fresh cordova build from angular2 build white screen on android

Question

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

Answer 1

通过从此<base href="/">设置为此<base href="./">来解决找不到文件的问题，在此处也进行了说明： https : //github.com/electron/electron/issues / 1769

Answer 2

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.

Answer 3

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

Answer 4

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.