Develop Reference

Cordova: cordova_plugins.js failed to load resource

I am learning to use cordova and i have been just doing a normal install of android platform in my cordova application, everything worked fine except for some errors i don't intent to fix just yet (which are external resource files loaded from javascript). I just installed phonegap-plugin-push for working on a push notification support, i believe i have to first register the device on which the notification should be recieved so i ran the app without any other configuration rather than downloading the libraries and putting the google-services.json file at the root application folder.
I try to find the commands for pushing but i am unabled to do so and i think it might be because of an error thrown in the console
Failed to load resource: net::ERR_FILE_NOT_FOUND /cordova_plugins.js
so i have been searching on google and i have found that i don't need to add anything but cordova.js as i have already done upon cordova application installation in order to work with cordova features.
I don't know if i have to add something else or if i am missing some code in order to make this plugin work, probably this plugin is not compatible with cordova but phonegap is built over cordova so i don't know.
in case it is necessary, this are the versions i am using:
Cordova-CLI: 7.1.0
Google Play Services: 46
Android support repository: 47
Android SDK: 26

I failed to say that the application running in cordova is done with angular and angular-ui-router.
After long hours of testing i've found out that the problem is caused by angular-ui-router, because i was using angular-ui-router i have set a <base href> tag in the head tag which is what is making cordova to fail, this is now actually how cordova is intended to work, it is because of how the files are placed. On android the files are placed in android_asset/www/, i don't know how the files are placed in other platforms, but when <base href> tag is set with a new value then the calls are now trying to be done in a directory where the files are not placed.
The solution in angular is to not set a <base href> tag and disable html5Mode in the config
app.config(["$stateProvider", "$locationProvider", "$urlRouterProvider",
function($stateProvider, $locationProvider, $urlRouterProvider){
// Set the default url state
// NOTE: Do not set <base href> tag, this breaks cordova calls
$urlRouterProvider.otherwise("/");
// Disable html5 native router mode
$locationProvider.html5Mode(false);
......
}
]);
I've realized this because in chrome device remote inspector i was getting error calls to wrong directories, by looking at the url where the application is running i saw that the calls were not in the proper directory

External HTML asset not bundled by React Native in production build for use by Webview

I'm building an Android application using React Native. It has a webview that reads an HTML file locally.
This is the piece of code I'm using to render webview.
<WebView ref="webview"
source={require('./helloworld.html')}
javaScriptEnabled style={styles.webView} />
This works well during development build. The HTML file loads on the webview and renders well.
But it doesn't on Android release/production build. The webview is empty and if I inspect using chrome://inspect, the webview is empty and doesn't load the HTML file.
From what I understand is the React Native fails to bundle helloworld.html as an asset during Android production build. I noticed that it works fine on iOS.
Any idea how to fix it?

As per the discussions around here https://github.com/facebook/react-native/issues/6004, it's a known defect. Assets are not bundled for Android production build but works fine in dev build.
A solution is store assets in Android assets folder manually, and then load the resource using
<WebView
source={{ uri: 'file:///android_asset/helloworld.html' }}
startInLoadingState={true} />

on RN 0.40,
require('./file.html')
is failing for me in Build release variant. It's fine in debug builds.
As workaround, I was able to put the file in android assets dir, and
{ uri: file:///android_asset/file.html }
load from there. Unfortunately for my situation, the html file loads remote third-party libs which internally reference protocol-agnostic resources: e.g., //domain.com/file.json. So those all got turned into file://domain.com/file.json links and of course failed.
I monkey patched XMLHttpRequest to change //... to https://... which solved that problem, but none of the images those libs attempt to load, will load. all broken. And I've been unable to find a way to determine what the requests look like for those images, to see why they break/fail-to-load.

on iOS production build this solution is work
<WebView
source={{ uri: 'helloworld.html' }}
startInLoadingState={true} />

File not found error when using web pack build in cordova app on android

I want to wrap a react based web app which gets build using webpack in a
cordova container for an Android device. I successfully built the
cordova app for iOS and everything worked fine. However, when building
for android, static resources like images and fonts that are required in
javascript using webpack's file-loader, aren't loaded correctly.
The web view tries to load all resources like an image from
file:///android_asset/www/build/myImage.png, but logs a file not found
error. If I link - for example - the same image directly in the
index.html via an image tag, the image is loaded correctly, but changing
the publicPath attribute in my webpack config file didn't work.
Any help is very much appreciated.
Thanks a lot in advance

My brute force solution:
Pre-React Build: add "homepage": "./", to app’s package.json.
Post-React Build, and Pre-Cordova Run Android: in www/static/js, find/replace “static/media” with “android_asset/www/static/media” for all image/pdf files in the main###.js file (not the .map file).

My solution was to add "homepage": "/android_asset/www/" to package.json, it works perfectly with dynamic paths,

Phonegap - 2.9.0 - Subdirectory issue

I am new to phone gap and really struggling to get this done.
Basically, the directory structure is like this:
/www
css/*
img/*
js/*
pages/*
config.xml
index.html
When I try to include add images from index.html referenced in img directory, the image loads successfully. But when i try to reference an image from a page within the js directory, it does not load the image. I do it from a index.js within the js directory.
I provide the path like this when inside the js directory:
<img src="../img/abc.jpg">
When i Debug using the "phonegap app" , it does find the image, but after building the apk using "phonegap run android" , and loading the app on my device the image does not load.
Also, any page inside the pages directory cannot find the cordova_plugin.js and thus any plugin .js file does not load.
Basically i do not invoke the cordova_plugin.js file. It is invoked by plugin.js that i include in my html.
So basically when in my www/index.html I include
<script type="text/javascript" src="phonegap.js"></script>
and it implicitly invokes the cordova_plugins.js which loads all the plugins. This works fine.
But When inside www/pages directory i reference it like this
<script type="text/javascript" src="../phonegap.js"></script>
and in this case phonegap.js loads successfully but it fails to load the cordova_plugins.js and thus none of the modules load.
Note: I found that the files do not load by debugging it in chrome.
Any help would be highly appreciated

Your javascript files are building html to go into the index.html DOM, so you should include the src as it will be referenced by index.html:
<img src="img/abc.jpg" />
Not sure what you mean here:
When i Debug using the "phonegap app" , it does find the image, but after building the apk using "phonegap run android" , and loading the app on my device the image does not load.
So, maybe I'm misunderstanding your problem.
Also, any page inside the pages directory cannot find the cordova_plugin.js and thus any plugin .js file does not load.
How are you referencing the .js files? For pages/foo.html it would be:
<script type="text/javascript" src="../js/cordova_plugin.js"></script>
But again, not sure exactly what you are after without some code examples.

Application Error - The connection to the server was unsuccessful. (file:///android_asset/www/index.html)

App Dies On Startup (connection to the server was unsuccessful)
I have an Android application that I'm writing using PhoneGap BUILD. The app was working fine earlier, but now it seems I am getting this error after refining my app (some UI changes only)
1) When I start the app I (usually) get:
Application Error - The connection to the server was unsuccessful.
(file:///android_asset/www/index.html)
Sorry if this is duplication of any question. I have seen some similar questions here, but i couldn't find a perfect answer or solution. As in my case it was working fine until my last changes.

In your config.xml file add this line:
<preference name="loadUrlTimeoutValue" value="700000" />

Here is the working solution
create a new page main.html
example:
<!doctype html>
<html>
<head>
<title>tittle</title>
<script>
window.location='./index.html';
</script>
</head>
<body>
</body>
</html>
change the following in mainactivity.java
super.loadUrl("file:///android_asset/www/index.html");
to
super.loadUrl("file:///android_asset/www/main.html");
Now build your application and it works on any slow connection
refernce.
NOTE: This is a workaround I found in 2013.

Please remove remotely linked jQuery files such as:
https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js
Instead, download this file and load it from your local js folder, making the URI:
js/jquery.min.js

Remove the external scripts in your index.html
Change this:
<script src="http://code.highcharts.com/highcharts-more.js"></script>
to
<script src="project_folder/highcharts-more.js"></script>

I had a similar issue and based on above suggestions I first added "super.setIntegerProperty("loadUrlTimeoutValue", 70000);" but that did not help.
So I tried Project -> Clean, that worked and I can launch the app now !
Avinash...

Try this,
1.Rename your index.html to “main.html”
2.Create a new “index.html” and put the following content into it:
<!doctype html>
<html>
<head>
<title>tittle</title>
<script>
window.location='./main.html';
</script>
<body>
</body>
</html>
3.Rebuild your app! No more errors!

fixing this on an ionic app, simply add
<preference name="loadUrlTimeoutValue" value="700000" />
to your config.xml file immediately after this line
<platform name="android">

I had the same on my project.
I tried " super.setIntegerProperty("loadUrlTimeoutValue", 70000); " but to no avail.
I ensured all files were linked properly [ CSS, JS files etc ], validated the HTML using w3c validator [ http://validator.w3.org/#validate_by_upload ] , and cleaned the project [ Project -> Clean ]
It now loads and executes without the same error.
Hope this helps

Extending loading Timeout Limit will not solve the problem which caused the error, it just will avoid the system to show the message but performance will be affected whatsoever.
Actual reason: You may be linking files or images to remote locations, and those resources are taking too long to load. (this is likely the most common error)
Definitive solution: move all the scripts, images and css needed to some local folders and load them locally ...
Performance will be increased and error will be effectively solved.

Check you index.html file. If you use external resources, that not available when you run application then you can get this error.
In my case I forgot to delete link on debugger script (weinre).
<script src="http://192.168.0.102:8080/target/target-script-min.js#anonymous"></script>
So application worked on emulator because http://192.168.0.102:8080/ was on my localhost and available for emulator.
But when I setup application on mobile phone I had same error, because 192.168.0.102 was not available from mobile network.

For my case, the problem was due to losing of the internet connection in my WiFi.

In my case I am using ionic and I simply closed the dialog went to apps in the emulator and ran my app from there instead. This worked. I got the idea of that from here since it was just a time out issue.

If you are using visual studio. After changing config.xml sometimes you need this
clean build solution
rebuild your app
It is working for me.

I was facing the same issue. I noticed that in my index i had both the "on device ready" and the "document.ready" function, so removing one of them fixed my problem :)

It's quite a niche situation but thought I'd post it here in case it saves somebody else the hours I spent going round in circles.
I reverted to cordova-android#9.1 after trying out cordova-android#10.0.1 and started getting this error when trying to run my app in dev mode.
What I had forgotten is that when I upgraded to 10.0.1 I had to remove the whitelist plugin since it's now part of cordova-android.
Reinstating cordova-plugin-whitelist got everything working again for me!

Another reason this error might occur is: there is no index.html in .../YourApp/www/ !
I just followed the ionic guide, and one of the steps is:
$ rm www/index.html
On iOS this is no problem as during the build the compiler takes some default HTML instead. However, when building for android, NO example index.html is used. Took me sometime to find out ("WHY does it work on iOS, but not on android...?)
Easy solution: create a index.html, save it under .../YourApp/www, rebuild ...et voila!