I’ve been searching a solution for my issue, and I found several topics talking about it, but I haven’t found a solution that is working for me.
I have a simple Ionic project that I started with the tabs template. I’m a beginner with Ionic so I just edited those pages, did not add any. I use several plugins for fingerprint authentication, info storage(with ionic-native storage) and also FCM plugin for notifications.
The thing is, I have the same problem as a lot of people, which is a white screen lasting ~10 seconds.
By using the --prod flag, which should optimize the whitescreen time as said in other topics, I get a build without error, but when I put the apk on the phone, it stays on whitescreen forever.
Any idea about why this happens and how to fix it?
This keeps the splash shown for 30 second on bootup, but in the app.component.ts, put this
public initializeApp() {
this.platform.ready().then(() => {
this.statusBar.styleDefault();
this.splashScreen.hide();
});
}
The interesting portion is the splashScreen.hide();
nb: you have to import
import { SplashScreen } from “@ionic-native/splash-screen”;
both in app.component.ts and app.module.ts and the splashScreen in your app.module.ts @NGModule providers
Unfortunately, the template I used already included the splashScreen.hide() in app.component.ts.
Also, I’ve already tryied to edit the SplashScreenDelay value.
So I’m afraid that this is a solution I’ve already explored, and which led me nowhere!
Screen remains white only when I build with the --prod flag. If I don’t, everything works as expected, except the startup time is long.
Since I’m really new to ionic and cross platform dev globally, I’ve never used chrome dev tools. I’m only building on android directly since I use plugins requiring this platform, like notifications and fingerprint authentication
You could also debug your android device with chrome dev tools. If you enable usb debugging on your device, you’ll be able to inspect the app at runtime on your device. You have to find out what’s actually going on on the device itself when running with prod.
main.js:16 Install the Firebase plugin: 'ionic plugin add cordova-plugin-firebase'
s @ main.js:16
main.js:1 ERROR Error: Uncaught (in promise): plugin_not_installed
at c (polyfills.js:3)
at Object.reject (polyfills.js:3)
at e._fireError (main.js:14)
at e._failed (main.js:14)
at main.js:14
at t.invoke (polyfills.js:3)
at Object.onInvoke (main.js:3)
at t.invoke (polyfills.js:3)
at r.run (polyfills.js:3)
at polyfills.js:3
b @ main.js:1
main.js:32 Ionic Native: deviceready event fired after 2427 ms
main.js:20 DEVICE READY FIRED AFTER 1553 ms
plugins/cordova-sqlite-storage/www/SQLitePlugin.js:175 OPEN database: _ionicstorage
2plugins/cordova-sqlite-storage/www/SQLitePlugin.js:106 new transaction is waiting for open operation
plugins/cordova-sqlite-storage/www/SQLitePlugin.js:179 OPEN database: _ionicstorage - OK
plugins/cordova-sqlite-storage/www/SQLitePlugin.js:80 DB opened: _ionicstorage
This is already weird that I’ve got warnings about Firebase plugin that appears as not installed since it is working fine in debug mode.
After that, I really don’t undertand the error mentioned, and also don’t know why there are more notifications after that if the error is why the app is crashing ?
There is an issue with the recent release of Firebase. It seems the promise-polyfill dependency was not included. Until you run on-device or emulator, the issue does not appear. Run $ npm i promise-polyfilll and then rebuild your app.