javascript - fresh cordova build from angular2 build white screen on android - Stack Overflow

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: piled js files aren't found in 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: piled js files aren't found in android

• javascript
• android
• node.js
• angular
• cordova

Share Improve this question Follow edited Jan 26, 2018 at 23:30 Achiel Volckaert asked Jan 26, 2018 at 16:42 Achiel VolckaertAchiel Volckaert 1,0141212 silver badges2929 bronze badges 0

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 8

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./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 puter 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.