[Ionicv4] Stuck at white page after splash screen

[axuu]

Bug Report

Ionic Info

Ionic:
   ionic (Ionic CLI)          : 4.1.1 (/Users/fred/.npm-global/lib/node_modules/ionic)
   Ionic Framework            : @ionic/angular 4.0.0-beta.3
   @angular-devkit/core       : 0.7.4
   @angular-devkit/schematics : 0.7.4
   @angular/cli               : 6.1.4
   @ionic/ng-toolkit          : 1.0.7
   @ionic/schematics-angular  : 1.0.5

Cordova:
   cordova (Cordova CLI) : 8.0.0
   Cordova Platforms     : android 7.0.0
   Cordova Plugins       : cordova-plugin-ionic-keyboard 2.1.2, cordova-plugin-ionic-webview 2.0.3, (and 3 other plugins)

System:
   Android SDK Tools : 26.1.1 (/Users/fred/Library/Android/sdk)
   NodeJS            : v8.11.4 (/usr/local/bin/node)
   npm               : 6.4.0
   OS                : macOS High Sierra
   Xcode             : Xcode 9.4.1 Build version 9F2000

Describe the Bug

Hi, I just updated my Ionic2 project to Ionic4 by using CLI tool to start a new project and moving code from old to new.

After Immigration I ran ionic cordova run android —prod and the building process worked successfully. After the splash screen only what I could see was a white page. But before updating this won't happen in my old Ionic 2 project.

I tried to debug but no error reported in command line or browser. BTW in browser the project worked perfectly.

I used chrome://inspect to debug and found that the <app-root> tag was empty 0px * 0px but I don't know where the problem is. Please help. Thank you!

Building Report

Date: 2018-08-22T11:07:05.524Z
Hash: d035536a53251418bdc9
Time: 19367ms
chunk {69} 69.eee1778b02bcffff8ed0.js () 7.37 kB  [rendered]
chunk {cordova} cordova.b8b05ba265b9ff1d69c8.js (cordova) 24.6 kB  [rendered]
chunk {0} common.b22a0c20a5c76a172a21.js (common) 16 kB  [rendered]
chunk {1} 1.31146171e1c3dedc8152.js () 197 kB  [rendered]
chunk {2} 2.0d24de8d133aa6f23847.js () 203 kB  [rendered]
chunk {3} 3.cf07f20b7860f73c9da9.js () 196 kB  [rendered]
chunk {4} 4.c27d77ca1704c0f1e87f.js () 202 kB  [rendered]
chunk {5} 5.0b0b8b3b8b3050d6ac0b.js () 33.6 kB  [rendered]
chunk {6} 6.ebd3ef611d6718886ca6.js () 35.8 kB  [rendered]
chunk {7} 7.654edf52697df4bb2bb2.js () 33.8 kB  [rendered]
chunk {8} 8.cd79dceac0aa6bb8a6db.js () 36.2 kB  [rendered]
chunk {9} 9.a035a680d5b8d1f58b91.js () 16.2 kB  [rendered]
chunk {10} 10.03a673645f7dd4f5f599.js () 17.4 kB  [rendered]
chunk {11} 11.159e33999fc19f22aea2.js () 16 kB  [rendered]
chunk {12} 12.807edc7347f4dc0275d1.js () 17.2 kB  [rendered]
chunk {13} 13.92b9551ecfc32c2752ca.js () 30.5 kB  [rendered]
chunk {14} 14.d996c46cecbaacab530d.js () 30.6 kB  [rendered]
chunk {15} 15.59c7fcca1c0bcd093656.js () 7.9 kB  [rendered]
chunk {16} 16.a5c7b1f1c0598859b769.js () 7.94 kB  [rendered]
chunk {17} 17.4d2844e4c4ea54052de7.js () 19.9 kB  [rendered]
chunk {18} 18.e2117d09388e56bf3221.js () 21 kB  [rendered]
chunk {19} 19.4cc32b4fc4911a033872.js () 19.3 kB  [rendered]
chunk {20} 20.3c00d156c8b72f2096a7.js () 20.6 kB  [rendered]
chunk {21} 21.ca152891f45e1d0e8b4f.js () 12.7 kB  [rendered]
chunk {22} 22.d4e0dd2642b89b01113e.js () 1.98 kB  [rendered]
chunk {23} 23.dca568f57f6400037bf1.js () 16 kB  [rendered]
chunk {24} 24.1493ad8791dee1f9ff6d.js () 16.4 kB  [rendered]
chunk {25} 25.be4e16ee218be22a5123.js () 16 kB  [rendered]
chunk {26} 26.0350f865dc9fa82bfe6c.js () 16.4 kB  [rendered]
chunk {27} 27.f8beda4f0b474b99ce7b.js () 10.5 kB  [rendered]
chunk {28} 28.93cf99cea70039bea376.js () 11 kB  [rendered]
chunk {29} 29.f40bf24ddf4b54fc98a7.js () 10.5 kB  [rendered]
chunk {30} 30.bac83ee86534e862b24d.js () 11.1 kB  [rendered]
chunk {31} 31.a0871b484dd51e1c8354.js () 5.7 kB  [rendered]
chunk {32} 32.c2c74e90e57a2dd454e3.js () 5.84 kB  [rendered]
chunk {33} 33.409e8d88b44353a8faed.js () 3.13 kB  [rendered]
chunk {34} 34.3263ef82f4f7273ace0f.js () 3.22 kB  [rendered]
chunk {35} 35.bd1efd3c79fe232f6c96.js () 3.4 kB  [rendered]
chunk {36} 36.ad6c6be16d357ca740f7.js () 3.52 kB  [rendered]
chunk {37} 37.d1645b9f423926afaaa5.js () 3.26 kB  [rendered]
chunk {38} 38.4cd815b3ee1d67d15f4e.js () 3.37 kB  [rendered]
chunk {39} 39.95393c4711de11344999.js () 3.26 kB  [rendered]
chunk {40} 40.d1aaccc241ff8ec8a47c.js () 3.39 kB  [rendered]
chunk {41} 41.a1d70a7ce44496f0e777.js () 6.51 kB  [rendered]
chunk {42} 42.372f2fcee3c13cf7aeca.js () 6.36 kB  [rendered]
chunk {43} 43.72a171b792399402b262.js () 9.09 kB  [rendered]
chunk {44} 44.f9bb86042314c149151e.js () 9.26 kB  [rendered]
chunk {45} 45.bfd39a52fdc16712c43a.js () 2.74 kB  [rendered]
chunk {46} 46.eb1cb3e2cae677970a6b.js () 6.5 kB  [rendered]
chunk {47} 47.5ea82df1b146956011de.js () 6.83 kB  [rendered]
chunk {48} 48.b38289190de8e4340ad1.js () 7.01 kB  [rendered]
chunk {49} 49.48604255431a762566d2.js () 7.44 kB  [rendered]
chunk {50} 50.c7bcc45a1c5a15dcc4d2.js () 9.21 kB  [rendered]
chunk {51} 51.b4e3e8267c5dfa33dfca.js () 9.22 kB  [rendered]
chunk {52} 52.8ec11e9987ef60c22413.js () 11.1 kB  [rendered]
chunk {53} 53.126fdcdce9a7e4ddd01b.js () 11.6 kB  [rendered]
chunk {54} 54.ae5538bd48ec15cbf7c6.js () 9.19 kB  [rendered]
chunk {55} 55.08eaf0b342de1996d19a.js () 9.1 kB  [rendered]
chunk {56} 56.da0a22853bdec45a4e68.js () 9.01 kB  [rendered]
chunk {57} 57.388c871fe402402d2830.js () 9.2 kB  [rendered]
chunk {58} 58.7a7908aa6ab2a6fd642f.js () 9.61 kB  [rendered]
chunk {59} 59.cb6ae007984dd412da1d.js () 9.67 kB  [rendered]
chunk {60} 60.d817bdf4049ba97ca34e.js () 6.61 kB  [rendered]
chunk {61} 61.fcc22d1a541f161ae4bd.js () 6.62 kB  [rendered]
chunk {62} 62.64c736beb82afe1e4aee.js () 3.75 kB  [rendered]
chunk {63} 63.4634104aa09779e2f2d1.js () 3.57 kB  [rendered]
chunk {64} 64.4a661677e0e9e5d49116.js () 3.67 kB  [rendered]
chunk {65} 65.39a1455ab0c428d15420.js () 12.6 kB  [rendered]
chunk {66} 66.08916331bceec43402bc.js () 13.2 kB  [rendered]
chunk {67} 67.fb90c1689c86c6a05e0f.js () 12.8 kB  [rendered]
chunk {68} 68.c6bf2a7abf3bae568d69.js () 13.4 kB  [rendered]
chunk {70} 70.1d353c114fc9365fb718.js () 707 bytes  [rendered]
chunk {71} 71.7142183d040807be6c2e.js () 1.66 kB  [rendered]
chunk {72} 72.c09d7330cf0329f2dc39.js () 650 bytes  [rendered]
chunk {73} 73.2f6636490660b9927df3.js () 13.7 kB  [rendered]
chunk {74} 74.83dea35fd7da4033276f.js () 10.1 kB  [rendered]
chunk {75} 75.ab95aa544c7c7d6fa9e7.js () 7.74 kB  [rendered]
chunk {76} 76.738c9eb06e205fbacd2f.js () 8.01 kB  [rendered]
chunk {77} 77.54f21ff570e28500d2da.js () 8.65 kB  [rendered]
chunk {78} 78.cf34ffff1e31633b2f8a.js () 9.12 kB  [rendered]
chunk {79} 79.0558011e0766dc92daeb.js () 6.2 kB  [rendered]
chunk {80} 80.e85bc3593ba00d2bccf5.js () 6.37 kB  [rendered]
chunk {81} 81.f1d5d2bc8cc72e31131d.js () 6.2 kB  [rendered]
chunk {82} 82.029f2a021223a1058181.js () 6.38 kB  [rendered]
chunk {83} 83.38917a24bad6fc7fcf7b.js () 835 bytes  [rendered]
chunk {84} 84.0e1ad2c1bd6c09825016.js () 842 bytes  [rendered]
chunk {85} 85.b460f63efc60209f10dd.js () 4.04 kB  [rendered]
chunk {86} 86.d30510c54552d13779a7.js () 4.02 kB  [rendered]
chunk {87} 87.3bb3d84b4746c3cd8fd7.js () 5.42 kB  [rendered]
chunk {88} 88.7405ef3f18b9fa578d33.js () 5.83 kB  [rendered]
chunk {89} 89.9d0b5ae0cfff3e998ea0.js () 5.42 kB  [rendered]
chunk {90} 90.ff4e02abb54a77a2a1c1.js () 5.85 kB  [rendered]
chunk {91} 91.cad030c420e078c95f69.js () 989 bytes  [rendered]
chunk {92} 92.f38f948b2f789a01ac06.js () 9.54 kB  [rendered]
chunk {93} 93.e4a4c664a1ed851dfb50.js () 10.1 kB  [rendered]
chunk {94} 94.723d671840fc8a1b38f5.js () 10.4 kB  [rendered]
chunk {95} 95.5f0fac14f0934b225284.js () 11.7 kB  [rendered]
chunk {96} 96.3c93a38c3df41a5e31f1.js () 3.06 kB  [rendered]
chunk {97} 97.06b2e22a88f6f4ca3af0.js () 3.1 kB  [rendered]
chunk {98} 98.78f3109c37f360f995ac.js () 6.4 kB  [rendered]
chunk {99} 99.8e6fadf7bbd144686d1a.js () 13.5 kB  [rendered]
chunk {100} 100.676bad8c40ffb0c37fd5.js () 14.1 kB  [rendered]
chunk {101} 101.256deee503376648b694.js () 12 kB  [rendered]
chunk {102} 102.b678e6543de3fd3083b3.js () 12.4 kB  [rendered]
chunk {103} 103.9d35895bd61dce430c30.js () 2.28 kB  [rendered]
chunk {104} 104.7d679516156d97cc298d.js () 8.55 kB  [rendered]
chunk {105} 105.9ab1820b4aa9e013f679.js () 8.92 kB  [rendered]
chunk {106} 106.3da1251b426cefca5e62.js () 8.62 kB  [rendered]
chunk {107} 107.3f6bfdc2436380cac887.js () 9.02 kB  [rendered]
chunk {108} 108.fff0b23fb9f4308b77cb.js () 1.6 kB  [rendered]
chunk {109} 109.dc32e813f738e30882f2.js () 1.63 kB  [rendered]
chunk {110} 110.7b98278fce9249bd50f3.js () 5.01 kB  [rendered]
chunk {111} 111.313a97e6bb400fa9417e.js () 5.24 kB  [rendered]
chunk {112} 112.7b197fcf5ec2a6e5cd60.js () 4.88 kB  [rendered]
chunk {113} 113.c2f9a206d2fb81a347cd.js () 5.13 kB  [rendered]
chunk {114} 114.50dc099eec4822a8e6df.js () 2.35 kB  [rendered]
chunk {115} 115.68e88665ca37c749271e.js () 2.42 kB  [rendered]
chunk {116} 116.73a821ef35dcf40370c5.js () 2.35 kB  [rendered]
chunk {117} 117.ac72b3ff65f1210612fc.js () 2.42 kB  [rendered]
chunk {118} 118.7b02c8697551730be8ac.js () 5.08 kB  [rendered]
chunk {119} 119.83dcd82c5f5c34f45ad1.js () 5.34 kB  [rendered]
chunk {120} 120.628a70085691efd27b31.js () 5.04 kB  [rendered]
chunk {121} 121.94b13115fc735f7d62be.js () 5.29 kB  [rendered]
chunk {122} 122.69464b7bd1c3d89f8d09.js () 12.5 kB  [rendered]
chunk {123} 123.c3016f1bc80a6623fad8.js () 1.31 kB  [rendered]
chunk {124} 124.122dcf8da08b2141dae5.js () 1.41 kB  [rendered]
chunk {125} 125.093cf34cfabe43fa560f.js () 3.39 kB  [rendered]
chunk {126} 126.2f8d1941fbbb7b8bfdfc.js () 37.6 kB  [rendered]
chunk {127} 127.d3b0ba2fa4a5e42fe842.js () 6.4 kB  [rendered]
chunk {128} runtime.1220017469102fe0ef23.js (runtime) 5.3 kB [entry] [rendered]
chunk {129} 129.6e78cdd8564cef4f254d.js () 4.34 kB  [rendered]
chunk {130} 130.7fd576f9ece9876c5033.js () 1.73 kB  [rendered]
> cordova run android
Android Studio project detected
ANDROID_HOME=/Users/fred/Library/Android/sdk
JAVA_HOME=/Library/Java/JavaVirtualMachines/jdk1.8.0_171.jdk/Contents/Home
studio
Subproject Path: CordovaLib
Subproject Path: app
publishNonDefault is deprecated and has no effect anymore. All variants are now published.
The Task.leftShift(Closure) method has been deprecated and is scheduled to be removed in Gradle 5.0. Please use Task.doLast(Action) instead.
	at build_86ls9u5c7dnf6hjrkte4qaewu.run(/Users/fred/code/lovebox/client/platforms/android/app/build.gradle:143)
:CordovaLib:preBuild UP-TO-DATE
:CordovaLib:preDebugBuild UP-TO-DATE
:CordovaLib:compileDebugAidl UP-TO-DATE
:CordovaLib:compileDebugRenderscript UP-TO-DATE
:CordovaLib:checkDebugManifest UP-TO-DATE
:CordovaLib:generateDebugBuildConfig UP-TO-DATE
:CordovaLib:prepareLintJar UP-TO-DATE
:CordovaLib:generateDebugResValues UP-TO-DATE
:CordovaLib:generateDebugResources UP-TO-DATE
:CordovaLib:packageDebugResources UP-TO-DATE
:CordovaLib:platformAttrExtractor UP-TO-DATE
:CordovaLib:processDebugManifest UP-TO-DATE
:CordovaLib:processDebugResources UP-TO-DATE
:CordovaLib:generateDebugSources UP-TO-DATE
:CordovaLib:javaPreCompileDebug UP-TO-DATE
:CordovaLib:compileDebugJavaWithJavac UP-TO-DATE
:CordovaLib:processDebugJavaRes NO-SOURCE
:CordovaLib:transformClassesAndResourcesWithPrepareIntermediateJarsForDebug UP-TO-DATE
:app:preBuild UP-TO-DATE
:app:preDebugBuild UP-TO-DATE
:app:compileDebugAidl UP-TO-DATE
:CordovaLib:packageDebugRenderscript NO-SOURCE
:app:compileDebugRenderscript UP-TO-DATE
:app:checkDebugManifest UP-TO-DATE
:app:generateDebugBuildConfig UP-TO-DATE
:app:prepareLintJar UP-TO-DATE
:app:generateDebugResValues UP-TO-DATE
:app:generateDebugResources UP-TO-DATE
:app:mergeDebugResources UP-TO-DATE
:app:createDebugCompatibleScreenManifests UP-TO-DATE
:app:processDebugManifest UP-TO-DATE
:app:splitsDiscoveryTaskDebug UP-TO-DATE
:app:processDebugResources UP-TO-DATE
:app:generateDebugSources UP-TO-DATE
:app:javaPreCompileDebug UP-TO-DATE
:app:compileDebugJavaWithJavac UP-TO-DATE
:app:compileDebugNdk NO-SOURCE
:app:compileDebugSources UP-TO-DATE
:CordovaLib:mergeDebugShaders UP-TO-DATE
:CordovaLib:compileDebugShaders UP-TO-DATE
:CordovaLib:generateDebugAssets UP-TO-DATE
:CordovaLib:mergeDebugAssets UP-TO-DATE
:app:mergeDebugShaders UP-TO-DATE
:app:compileDebugShaders UP-TO-DATE
:app:generateDebugAssets UP-TO-DATE
:app:mergeDebugAssets UP-TO-DATE
:app:transformClassesWithStackFramesFixerForDebug UP-TO-DATE
:app:transformClassesWithDesugarForDebug UP-TO-DATE
:app:transformClassesWithDexBuilderForDebug UP-TO-DATE
:app:transformDexArchiveWithExternalLibsDexMergerForDebug UP-TO-DATE
:app:transformDexArchiveWithDexMergerForDebug UP-TO-DATE
:CordovaLib:compileDebugNdk NO-SOURCE
:CordovaLib:mergeDebugJniLibFolders UP-TO-DATE
:CordovaLib:transformNativeLibsWithMergeJniLibsForDebug UP-TO-DATE
:CordovaLib:transformNativeLibsWithIntermediateJniLibsForDebug UP-TO-DATE
:app:mergeDebugJniLibFolders UP-TO-DATE
:app:transformNativeLibsWithMergeJniLibsForDebug UP-TO-DATE
:app:processDebugJavaRes NO-SOURCE
:app:transformResourcesWithMergeJavaResForDebug UP-TO-DATE
:app:validateSigningDebug
:app:packageDebug UP-TO-DATE
:app:assembleDebug UP-TO-DATE
:app:cdvBuildDebug UP-TO-DATE

BUILD SUCCESSFUL in 1s
46 actionable tasks: 1 executed, 45 up-to-date
Built the following apk(s):
	/Users/fred/code/lovebox/client/platforms/android/app/build/outputs/apk/debug/app-debug.apk
ANDROID_HOME=/Users/fred/Library/Android/sdk
JAVA_HOME=/Library/Java/JavaVirtualMachines/jdk1.8.0_171.jdk/Contents/Home
No target specified, deploying to device '3e063f54'.
none
Skipping build...
Built the following apk(s):
	/Users/fred/code/lovebox/client/platforms/android/app/build/outputs/apk/debug/app-debug.apk
Using apk: /Users/fred/code/lovebox/client/platforms/android/app/build/outputs/apk/debug/app-debug.apk
Package name: io.ionic.starter
LAUNCH SUCCESS

[mhartington]

Hi there! There's no information on how to recreate or how to debug this.
Could you please provide some more information or a demo in the form of a github repo? Thanks!

[axuu]

Steps to Reproduce

Steps to reproduce the behavior:

1. cd project
2. ionic cordova run android --prod
3. build successful
4. the app starts automatically on Android phone
5. splash screen shows and hides after seconds
6. white screen

Related Code

Here is the project repo

https://github.com/zxfred/lovebox/tree/master/client

Expected Behavior

The app works properly

Additional Context

• The project works good on PC browser and no error found in console. White screen only happened when project running on Android. (don't have chance to run on the iOS platform)
• Seemingly no error in building process
• Android Version is 5.1.1

[bleuscyther]

Have you tried to remove the plateforme and install it again ? make sure the cordova plugins are up to date.
ionic cordova platform rm android
then
ionic cordova platform add android

You may have to manually remove all the plugins and install them back, I had a isimilar issue V3->V4

re-install the plugins if needed.

[axuu]

@bleuscyther Thanks, I will try that. : )

[axuu]

@mhartington Update: I changed to another Android 7.0.0 phone and this problem didn't show. But it still not OK with my two Android 5.0+ phone, One Plus 1 and One Plus 2.

[marcelocanales]

Same here --> #14904

[chrisbinnefeld]

Which Android System WebView version is running on your Android 5.0+ phones?

We can observe the same problem on WebView version 52.0.2743.100. See #15214

[axuu]

@chrisbinnefeld Hi, it's 43.0.2357.121 and like this

[chrisbinnefeld]

@Zxfred You could try and update to a more recent version of the Android System Webview. Either over Google Play Store or by downloading and installing a APK (https://www.apkmirror.com/apk/google-inc/android-system-webview/). After the update it worked on our 5.1.1 device.

[marcelocanales]

Finally I solved the problem by updating the Android System Webview in my Android 6. However, I believe that the ionic code could be transpilated to an previous version of ECMAScript or avoid the use of features not compatible with the old versions of Android System Webview, for example, async functions , to offer compatibility with previous versions of the Android System Webview, since this is independent of the Android version.

I would like to point out that I did tests with Vanilla Apache Cordova and I did not have problems with the old Android System Webview. Ionic should do the same.

[snowyu]

the same issue: #15038 .

[mhartington]

Ok, this looks like it's related to older android webviews loading ES6 code instead of ES5.
This should be fixed if you update your version of ionic/angular from beta 0

[yuankunluo]

After i update cordova-ionic-web-view to 2.1.0, the proble is still there.

See the screenshot:
https://preview.ibb.co/eFc27z/2018_09_01_13_16_11.png

Ionic:

ionic (Ionic CLI) : 4.1.1 (C:\Users**\AppData\Roaming\npm\node_modules\ionic)
Ionic Framework : @ionic/angular 4.0.0-beta.5
@angular-devkit/core : 0.7.5
@angular-devkit/schematics : 0.7.5
@angular/cli : 6.1.5
@ionic/ng-toolkit : 1.0.7
@ionic/schematics-angular : 1.0.5

Cordova:

cordova (Cordova CLI) : 8.0.0
Cordova Platforms : android 7.1.1
Cordova Plugins : cordova-plugin-ionic-keyboard 2.1.2, cordova-plugin-ionic-webview 2.1.0, (and 4 other plugins)

System:

Android SDK Tools : 26.1.1 (D:\Android\Android_SDK)
NodeJS : v8.11.4 (C:\Program Files\nodejs\node.exe)
npm : 5.6.0
OS : Windows 10

The chrome remote debug

Uncaught SyntaxError: missing ) after argument list -- vendor.js:69670

[snowyu]

@mhartington It can not be fixed even upgrade to @ionic/angular.beta.7
more detail see #15038 .

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.