White Blank Screen After Splash Screen

Ionic Framework
1

I tested my app “ionic serve --lab” and everything is fine. No errors or warnings at all. I also tried “ionic cordova run android --device” which successfully builds, installs and runs app on my android phone. I saw a quick flash of white screen and immediately it showed my the root page which is a sign-in page. Didn’t see any errors or warnings. Everything looked normal.

I then built using “ionic cordova build android --prod” which created app-debug.apk . I installed this into my android phone. After I clicked icon, I saw splash screen and then the white blank screen. Can some one please help. Any help will be really appreciated. Thank you so much.

My package.json and config.xml files are located here: https://drive.google.com/drive/folders/13oWbn7NxacBKc7uv1AqFXHZ1n9Mixo-L?usp=sharing

Below is output of “ionic info” command:

Ionic:

Ionic CLI : 5.1.0 (C:\Users\vkgandhi84\AppData\Roaming\npm\node_modules\ionic) Ionic Framework : ionic-angular 3.9.6 @ionic/app-scripts : 3.2.3

Cordova:

Cordova CLI : 9.0.0 (cordova-lib@9.0.1) Cordova Platforms : android 8.0.0 Cordova Plugins : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 4.1.1, (and 12 other plugins)

Utility:

cordova-res : 0.5.1 native-run : 0.2.7

System:

Android SDK Tools : 26.1.1 (C:\Users\vkgandhi84\Projects\LAMA\Tools\sdk-tools-windows-4333796) NodeJS : v12.4.0 (C:\Program Files\nodejs\node.exe) npm : 6.9.0 OS : Windows 10

2

if the white screen dose not disappear after a while, then there is an error. you might need to debug using chrome://inspect

do the following:

1- connect to your phone using USB
2- run, ionic cordova run android --prod
(or, run ionic cordova build --release --prod and take the app.apk and install it in your device)
3- once installation finished, open chrome browser and write chrome://inspect

image

click inspect, and go to console tab. You might see an error message. Sometimes you might not see an error cause you did not console.log() it in the the function. other reasons might be:

  • plugin issue
  • permission not granted (in your case might be storage permission)

good luck :wink:

3

Thank you so much for your help. I went to Application Manager and gave app Camera and Storage permission and then tried again. But, I see the same white screen issues immediately after I see splash screen. I used chrome://inspect and see below error . I spent so much time upgrading my app (all plug-ins etc.) and this one error is really bothering me. I’ll really appreciate any help that you can provide me. Thank you again for showing me this way of debugging.

Note: “ionic cordova run android --device” works fine. No issues, no errors, no warnings. I see the issue with “ionic cordova run android --prod”

Can you please provide me some more guidance on below that you mentioned in your response:

  • plugin issue
  • permission not granted (in your case might be storage permission)

** Error Message **

Failed to load resource: the server responded with a status of 404 (OK)
roboto-light.woff:1 Failed to load resource: the server responded with a status of 404 (OK)
roboto-light.ttf:1 Failed to load resource: the server responded with a status of 404 (OK)
vendor.js:1 Uncaught Error: Cannot find module “.”
at vendor.js:1
at vendor.js:1
at Object. (vendor.js:1)
at e (vendor.js:1)
at Object.283 (main.js:1)
at e (vendor.js:1)
at window.webpackJsonp (vendor.js:1)
at main.js:1

4

upgrading plugins and packages might caused your app to crash.

I wonder if you are trying to load some fonts?

Failed to load resource: the server responded with a status of 404 (OK)
roboto-light.woff:1 Failed to load resource: the server responded with a status of 404 (OK)
roboto-light.ttf:1 Failed to load resource: the server responded with a status of 404 (OK)

while this could be the reason why your app crash.

vendor.js:1 Uncaught Error: Cannot find module “.”

You should keep the packages and plugins version that your project is compatible with:

this is a sample from your package.json:

"@angular/animations": "^7.2.15",
"@angular/common": "^7.2.15",
"@angular/compiler": "^7.2.15",
"@angular/compiler-cli": "^7.2.15",
"@angular/core": "^7.2.15",
"@angular/forms": "^7.2.15",
"@angular/forms": "^7.2.15",

while i have a project - ionic 3 - see the deference:

"@angular/animations": "5.2.11",
"@angular/common": "5.2.11",
"@angular/compiler": "5.2.11",
"@angular/compiler-cli": "5.2.11",
"@angular/core": "5.2.11",
"@angular/forms": "5.2.11",
"@angular/http": "5.2.11",

you need to figure out which package version is compatible with ionic 3 project, create a new project and compare your package.json with new project package.json

other thing you could do, run your project from another PC

5

I just signed-in after a long time and saw this response. I did the same. Brought everything from project backup and indeed the problem is fixed. It was released to dependencies. Thank you so much for your help and guidance. Appreciate it.

6

I spent one hour trying to understand the problem on Ionic 5, and it was apparently because of Storage plugin.

Here is a schema of my app :

Page 1 : whatever that needs to retrieve data from the app

this.token = await this.storage.get('tutorialComplete');

WITH an authguard supposed to drive to page 2 if nothing is on the storage. But I commented out the code of that condition so the app stayed on this page without the possibility to retrieve data from storage and showed a white screen.

Page 2 : connection which store something in the app

this.storage.set('tutorialComplete', true);

I was surprised to have this bug as I almost didn’t change anything in my code, I just uninstalled completely the app from my device but that erased the native storage.

Hope this information can help someone.