Develop Reference

fresh cordova build from angular2 build white screen on android

I copied my angular2 folder to a new folder, ran npm I etc. in Angular it runs fine.
I created a Cordova folder in my folder with
cordova create cordova be.volckaertachiel.be "volckaertAchiel"
then:
cd cordova
cordova platform add browser
cordova run browser
rm -r www
cd ..
build it in the corodova folder with:
ng build --target=production --environment=prod --output-path cordova/www/
And then ran it in the browser with Cordova run browser
After I changed my backend(node.js API) to accept port 8000 it ran like it was running in angular2
After this Cordova platform add android and then Cordova build android
it launched the Android SDK, it launched the app, but it has a white screen...
My issue in short: I build my web with Cordova -> runs fine, on android I just get a white screen.
Updated Issue: compiled js files aren't found in android

The issue with not finding the files is fixed by setting from this <base href="/"> to this <base href="./"> it's also explained here: https://github.com/electron/electron/issues/1769

This is solution may be application if you want are running on android 8.0 emulator/device with angular 8.
For android 8.0 emulators, it does not support ES2015 which is ES6.
Go to your angular project
Then edit the target to "es5" in tsconfig.json

Just in case someone else get here with this problem without lucky: in my case, i had to change the script in index.html, removing the scripts wicht type was "module" and removing the attribute "nomodule".
In other words, i changed from this:
<script src="runtime-es2015.js" type="module"></script>
<script src="polyfills-es2015.js" type="module"></script>
<script src="main-es2015.js" type="module"></script>
<script src="runtime-es5.js" nomodule></script>
<script src="polyfills-es5.js" nomodule></script>
<script src="main-es5.js" nomodule></script>
<script src="scripts.js"></script>
To this:
<script src="runtime-es5.js"></script>
<script src="polyfills-es5.js"></script>
<script src="main-es5.js"></script>
<script src="scripts.js"></script>
It looks like it has something to do with what mingliang94 said, but my emulator is android 9.

There are two possibilities for this type of behavior:
1. Splash screen misconfiguration
Check your config.xml and verify that you have:
Configured your splash screen to hide automatically
Specified valid splash screen images.
Here's a sample config for Android that will hide the splash screen after 10 seconds:
<preference name="SplashScreen" value="screen" />
<preference name="SplashScreenDelay" value="10000" />
<platform name="android">
<preference name="android-minSdkVersion" value="16" />
<preference name="android-targetSdkVersion" value="22" />
<allow-intent href="market:*" />
<icon density="ldpi" src="res/icons/android/ldpi.png" />
<icon density="mdpi" src="res/icons/android/mdpi.png" />
<icon density="hdpi" src="res/icons/android/hdpi.png" />
<icon density="xhdpi" src="res/icons/android/xhdpi.png" />
<icon density="xxhdpi" src="res/icons/android/xxhdpi.png" />
<splash density="port-hdpi" src="res/screen/android/splash-port-hdpi.png" />
<splash density="port-ldpi" src="res/screen/android/splash-port-ldpi.png" />
<splash density="port-mdpi" src="res/screen/android/splash-port-mdpi.png" />
<splash density="port-xhdpi" src="res/screen/android/splash-port-xhdpi.png" />
</platform>
2. Index page bug
Check your index.html stored in www. Is it missing? Is it empty? Does it load a white page when you open it in a browser?
If the index.html file is present and loading properly in a web browser then you will need to inspect the app while it's running on your Android device. It's likely throwing a JavaScript error during page load that's preventing anything from being displayed. To do so, follow these steps:
Enable developer mode debugging on your Android.
Connect your device to your computer via USB.
Compile the app for debug and run it on your Android device: cordova run android --debug --target=YOURDEVICEIDHERE
Open up Chrome on your desktop and navigate to chrome://inspect
You can live inspect your app just like you would a regular web page. Hitting the refresh button will re-run the initial load and allow you to log any errors.

Cordova app cannot load any files in assets/www (only index.html)

I'm compiling a very simple Cordova app and deploying on Android. I want to test the smoothness of jQuery Mobile on various Android devices, so I'm compiling an app with the contents of the jQuery Mobile demo folder.
I created a new Cordova project and placed the contents of jQuery Mobile demo folder into my www folder.
I then used the Cordova binary to add the android platform, ran cordova build, and finally cordova run android.
The application opened on my phone, but no files other than the index.html will load. I connected up the app to the Chrome Inspector debugger to see what wasn't loading, here's what I saw:
All of the files that Cordova can't find, do exist in platforms/android/assets/www. Cordova can find index.html just find, but it cannot load anything else.
If I open that folder in a web browser, everything loads just fine.
Anyone know what could be causing this issue or what steps I might take to further troubleshoot and isolate the issue? I've Googled for hours and I cannot find anyone else facing a situation quite like this. For other people, it's the index.html file that won't load or they simply forgot to add the files they want into the www folder. In my case, index.html loads fine, but nothing else will (see screenshot above).
Here is my config.xml (mostly just the standard default):
<?xml version='1.0' encoding='utf-8'?>
<widget id="com.rand.jqmdemo" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
<name>jqmdemo</name>
<description>
A sample Apache Cordova application that responds to the deviceready event.
</description>
<author email="dev#cordova.apache.org" href="http://cordova.io">
Apache Cordova Team
</author>
<content src="index.html" />
<plugin name="cordova-plugin-whitelist" spec="1" />
<access origin="*" />
<allow-intent href="http://*/*" />
<allow-intent href="https://*/*" />
<allow-intent href="tel:*" />
<allow-intent href="sms:*" />
<allow-intent href="mailto:*" />
<allow-intent href="geo:*" />
<platform name="android">
<allow-intent href="market:*" />
</platform>
<platform name="ios">
<allow-intent href="itms:*" />
<allow-intent href="itms-apps:*" />
</platform>
<engine name="android" spec="~4.1.1" />
</widget>
Here is my AndroidManifest.xml file:
<?xml version='1.0' encoding='utf-8'?>
<manifest android:hardwareAccelerated="true" android:versionCode="1" android:versionName="0.0.1" package="com.elliot.jqmdemo" xmlns:android="http://schemas.android.com/apk/res/android">
<supports-screens android:anyDensity="true" android:largeScreens="true" android:normalScreens="true" android:resizeable="true" android:smallScreens="true" android:xlargeScreens="true" />
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />
<application android:hardwareAccelerated="true" android:icon="#drawable/icon" android:label="#string/app_name" android:supportsRtl="true">
<activity android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale" android:label="#string/activity_name" android:launchMode="singleTop" android:name="MainActivity" android:theme="#android:style/Theme.Black.NoTitleBar" android:windowSoftInputMode="adjustResize">
<intent-filter android:label="#string/launcher_name">
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
</application>
<uses-sdk android:minSdkVersion="14" android:targetSdkVersion="22" />
</manifest>
Here is my index.html file: http://pastebin.com/duFSLT5T

I eventually figured this out. It's a Cordova issue while deploying with Android. Any folders that begin with an underscore are omitted without warning. It looks like the bug has been around for over 5 years and with no sign of getting fixed soon:
https://code.google.com/p/android/issues/detail?id=5343

If your files are in documents->jqdemo->www , like you show on pasteboard.co, then your files are in the wrong place.
They have to be in:
your_cordova_project->platforms->android->assets->www
To do so:
Include the assets, index.html, js only in the root folder of your cordova project and then do a cordova build and don't change the platform www folder by yourself.
If you are coding and not just testing, the better way is to have symlinks or pre-scripts, which do the copy job. So you don't have to call every time cordova build.
jQuery Mobile: It runs very well on mobile devices, if you know what you are doing. Otherwise it is very easy to slow down your app. So, be careful!
Update:
Interesting problem and I stay on it, that the path is not correct, maybe not resolvable. So, try this things:
Create a new css file, name test.css and content:
body {
background-color: red !important;
font-size: 3em !important;
}
Put this file in the root of your www folder, link it in your html-file and make a cordova build. Do you see the file in the platform www-folder?
How does it affect on your device?

Cordova event DeviceReady don't work on all pages

Well i have multiple page
In cordova, when it start, this show first index.htmland trigger deviceready event on javascript, and when i clicked on link like to search.html, the WebView change and load the search.html but dont trigger deviceready javascript event.
So, right now i use onload in another pages because i think
deviceready event only trigger when the App is ready to work(only
one time at the start).
Example(index.html, this work well):
<!DOCTYPE HTML>
<html>
<head>
...
<script>
document.addEventListener("deviceready", function(){
console.log('Device is Ready!!');
}, false);
</script>
...
</head>
<body>
Go to search
</body>
</html>
Example( XYZ.html, this don't because never trigger deviceready):
<!DOCTYPE HTML>
<html>
<head>
...
<script>
document.addEventListener("deviceready", function(){
console.log('Device is Ready!!');
}, false);
</script>
...
</head>
<body>
Go to Index
</body>
</html>
Example of file structure:
+ www/
- .
- ..
+ js/
- jquery.min.js
- bootstrap.min.js
+ css/
- bootstrap.min.css
+ img/
- logo.png
- default.png
+ icons/
- alert.png
- danger.png
- important.png
- icon.png
- index.html
- searh.html
- favorites.html
- contacts.html
- configuration.html
- about.html
Config.xml
<?xml version='1.0' encoding='utf-8'?>
<widget id="com.cordovacrosswalk.app" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
<name>CordovaAndCrosswalkApp</name>
<description>
A sample Apache Cordova application that responds to the deviceready event.
</description>
<author email="dev#cordova.apache.org" href="http://cordova.io">
Apache Cordova Team
</author>
<content src="index.html" />
<plugin name="cordova-plugin-whitelist" spec="1" />
<access origin="*" />
<allow-intent href="http://*/*" />
<allow-intent href="https://*/*" />
<allow-intent href="tel:*" />
<allow-intent href="sms:*" />
<allow-intent href="mailto:*" />
<allow-intent href="geo:*" />
<platform name="android">
<allow-intent href="market:*" />
</platform>
<platform name="ios">
<allow-intent href="itms:*" />
<allow-intent href="itms-apps:*" />
</platform>
<preference name="xwalkVersion" value="15+" />
<preference name="xwalkCommandLine" value="--disable-pull-to-refresh-effect" />
<preference name="xwalkMode" value="embedded" />
<preference name="xwalkMultipleApk" value="true" />
</widget>
Thanks a lot!

#olaf,
you need to read the documentation and blogs Phonegap Build and Cordova. Cordova/Phonegap is a mess. NOTE: Cordova is the base for *many* hybrid platforms, including Phonegap,Phonegap Build, Ionic, Sencha Touch, etc, et al.
These FAQs should also help.
Top Mistakes by Developers new to Cordova/Phonegap
HOW TO apply the Cordova/Phonegap the whitelist system
Core Plugins Setup.
Your Fixes
replacement config.xml
addition to your index.html
About your confusion with onload() and deviceready.READ 4. In the code, did not listen for the 'deviceready' event. IN Top Mistakes by Developers new to Cordova/Phonegap
Just to be clear on this point. deviceready waits until things are load. So in theory, it is waiting for onload to complete. I can verify this. I just finished a new boilerplate for the latest version (cli-5.2.0) of Phonegap Build.
The load order is Splash screen -> onload() -> ondeviceready() -> splash screen hide().
UPDATE: One last thing. I have several programs that work with multiple pages, so I know most of the gotchas
Best of Luck
1. replacement config.xml
NOTE YOUR APP IS NOW INSECURE. IT IS UP TO YOU TO SECURE YOUR APP.
<?xml version='1.0' encoding='utf-8'?>
<!-- your header is off. READ http://docs.build.phonegap.com/en_US/configuring_basics.md.html#The%20Basics -->
<widget xmlns = "http://www.w3.org/ns/widgets"
xmlns:gap = "http://phonegap.com/ns/1.0"
id = "com.cordovacrosswalk.app"
version = "0.0.1"
versionCode = "10"> <!-- versionCode is optional and Android only -->
<name>CordovaAndCrosswalkApp</name>
<description>
A sample Apache Cordova application that responds to the deviceready event.
</description>
<author email="dev#cordova.apache.org" href="http://cordova.io">
Apache Cordova Team
</author>
<!-- ONLY needed for IDE/SDK -->
<!-- <content src="index.html" /> -->
<!-- Tool Set Version -->
<!-- <preference name='phonegap-version' value='3.7.0' /> --> <!-- turns off required whitelist -->
<!-- <preference name='phonegap-version' value='cli-5.2.0' /> -->
<!-- Target Platforms -->
<platform name="android" />
<platform name="ios" />
<platform name="windows" />
<!-- You'll very likely need this on different platform. So you can tell them apart -->
<plugin name="cordova-plugin-device" source="npm" version="1.0.1" />
<!-- WHITELIST * WHITELIST * WHITELIST -->
<!-- https://github.com/jessemonroy650/top-phonegap-mistakes/blob/master/the-whitelist-system.md -->
<plugin name="cordova-plugin-whitelist" source="npm" spec="1.1.0" />
<allow-navigation href="*" />
<allow-intent href="*" />
<access origin="*" /> <!-- Required for iOS9 -->
<plugin name='org.crosswalk.engine' version='1.3.0' source='pgb' />
<preference name="xwalkVersion" value="15+" />
<preference name="xwalkCommandLine" value="--disable-pull-to-refresh-effect" />
<preference name="xwalkMode" value="embedded" />
<preference name="xwalkMultipleApk" value="true" />
</widget>
2. addition to your index.html
NOTE YOUR APP IS NOW INSECURE. IT IS UP TO YOU TO SECURE YOUR APP.
Add to the top of every HTML file.READ HOW TO apply the Cordova/Phonegap the whitelist system The section on CSP
<meta http-equiv="Content-Security-Policy"
content="default-src *;
style-src 'self' 'unsafe-inline' 'unsafe-eval';
script-src 'self' 'unsafe-inline' 'unsafe-eval';">

LoopBack/Angular/Cordova timing out on Android

We have a web app that's using LoopBack from Strongloop for the API and backend, and Angular on the frontend, with Cordova used to package for mobile. The web app and iOS target from Cordova work great as expected, but when we try to build for an Android device the app server is unreachable from the device. More specifically, after loading the client app and trying to log in, the device makes a POST to my API but never receives a response (and as far as I can tell the request never actually hits the server).
Here's what I've tried so far:
Make sure that access is set to origin="*" in config.xml
Make sure that a Content-Security-Policy meta tag is set in my (single-page) app's index.html, allowing remote network
Make sure that the INTERNET permission is being correctly set in the Android Manifest
Make sure that the app server is reachable from the device in browser
Make sure the generated lb-services.js Angular service has the correct API address
Try generating an Ionic Framework app and dropping my app code into that in case it generates something I need
Since I'm able to get my app running in iOS using Cordova without any issues, I'm thinking there must be something particular to my Android configuration here. I did encounter a separate issue where a plugin that was installed was not compatible with the latest Cordova, but removing that plugin seems to have resolved that. What is different about building for Android that would keep this from working?
EDIT:
I've switched to using Phonegap Build in the hopes that it would be an easier workflow, but I still see the same issues.. Here is the whitelist/CORS configuration that I'm doing:
meta tag in index.html:
<meta http-equiv="Content-Security-Policy" content="default-src *; style-src * 'self' 'unsafe-inline'; script-src * 'self' 'unsafe-inline' 'unsafe-eval'">
config.xml (Phonegap Build, identifiable info removed):
<?xml version="1.0" encoding="UTF-8" ?>
<widget xmlns="http://www.w3.org/ns/widgets" xmlns:gap="http://phonegap.com/ns/1.0" id="..." version="1.0.0">
<name ... />
<description ... />
<author ... />
<icon src="icon.png" />
<gap:splash src="splash.png" />
<preference name='phonegap-version' value='cli-5.1.1' />
<gap:plugin name="com.indigoway.cordova.whitelist.whitelistplugin" version="1.1.1" />
</widget>

Install https://github.com/apache/cordova-plugin-whitelist since Cordova 5.0.0 is mandatory for CORS query.
Have you installed it ?
If not, this is certainly your issue ;)

It turns out that I was setting <access origin="*" /> in my original Phonegap configuration, but not in my Phonegap Build settings. Making sure that <access origin="*" /> is present in the config.xml used by Phonegap Build seems to fix this.

how to resume the application when click app icon launcher in cordova?

I am developing mobile application with cordova phonegap. I am testing it on android platform right now later on ios . My problem is when I have the app running in background, and I click the launcher of this application it is re-initialized. What I want is to just open the application from the launcher icon and continue running from where it is .
I tried to set the attribute keepRuning in config.xml to true but it did not work.
<preference name="keepRunning" value="true" />
This is the config.xml :
<?xml version="1.0" encoding="utf-8" standalone="no"?>
<widget xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0" id="com.coolappz.HTML5Application1" version="1.0.0">
<name>HTML5Application1</name>
<description>Cordova Application</description>
<author email="info#com.coolappz" href="http://www.coolappz.com">user</author>
<access origin="*"/>
<preference name="fullscreen" value="true"/>
<preference name="webviewbounce" value="true"/>
<preference name="keepRunning" value="true" />
</widget>
EDIT:
For more details:
I have a counter that starts from zero and increments by 1 every second . The counter resumes to increment in background if I press home. The problem is when I press the icon launcher of the application the counter resets from zero because the application is recreated.
I hope this makes the view more clear.
My question :
Can this be handled by cordova configuration or I need a plugin to do so.
Is that possible and how ?
Thanks

Update your config.xml for missing preferences. :
<preference name="permissions" value="none"/>
<!-- Customize your app and platform with the preference element. -->
<preference name="phonegap-version" value="3.3.0" /> <!-- all: current version of PhoneGap -->
<preference name="orientation" value="default" /> <!-- all: default means both landscape and portrait are enabled -->
<preference name="target-device" value="universal" /> <!-- all: possible values handset, tablet, or universal -->
<preference name="fullscreen" value="true" /> <!-- all: hides the status bar at the top of the screen -->
<preference name="webviewbounce" value="false" /> <!-- ios: control whether the screen 'bounces' when scrolled beyond the top -->
<preference name="prerendered-icon" value="true" /> <!-- ios: if icon is prerendered, iOS will not apply it's gloss to the app's icon on the user's home screen -->
<preference name="stay-in-webview" value="false" /> <!-- ios: external links should open in the default browser, 'true' would use the webview the app lives in -->
<preference name="ios-statusbarstyle" value="black-opaque" /> <!-- ios: black-translucent will appear black because the PhoneGap webview doesn't go beneath the status bar -->
<preference name="detect-data-types" value="true" /> <!-- ios: controls whether data types (such as phone no. and dates) are automatically turned into links by the system -->
<preference name="exit-on-suspend" value="false" /> <!-- ios: if set to true, app will terminate when home button is pressed -->
<preference name="show-splash-screen-spinner" value="true" /> <!-- ios: if set to false, the spinner won't appear on the splash screen during app loading -->
<preference name="auto-hide-splash-screen" value="true" /> <!-- ios: if set to false, the splash screen must be hidden using a JavaScript API -->
<preference name="disable-cursor" value="false" /> <!-- blackberry: prevents a mouse-icon/cursor from being displayed on the app -->
<preference name="android-minSdkVersion" value="10" /> <!-- android: MIN SDK version supported on the target device. MAX version is blank by default. -->
<preference name="android-installLocation" value="auto" /> <!-- android: app install location. 'auto' will choose. 'internalOnly' is device memory. 'preferExternal' is SDCard. -->
<preference name="KeyboardDisplayRequiresUserAction " value="false"/>

I tried this solution and it worked for me
Add
android:launchMode="singleInstance"
for activity tag in the AndroidManifest.xml , you can find it in projectName/platforms/android/AndroidManifest.xml.
That's it .