I am experiencing a similar issue. My app boots up and I see the splash screen for about 2 to 3 seconds. And then I see a white screen which takes about 10 seconds or so before I see my first page.
When I do a remote debugging via Chrome, I don’t see anything. How can I check this? By the way this is not a production release.
Try to override your config.xml preferences about splashscreen with the ones i share here and check if you have in your app component file the
A production build will drastically bring back your boot time, so that might be enough in your case. If you want fine grained control (not autohide the splashscreen after three seconds, but when you’re app is ready for it), use @fdom 's approach to hide the splashscreen when the app is ready to do so.
Overall try to keep the boot time to a minimum for a better user experience.
The 10 second white screen leads me to believe it’s less of a splash screen hiding issue, and more of a on load processing issue. What are you doing when the app loads?
I tried to run --prod when building but the CLI complains of this error:
Error: Type DashboardPage in /Users/arsyad/IonicProjects/MyProject/src/pages/dashboard/dashboard.ts is part of the declarations of 2 modules: AppModule in /Users/arsyad/IonicProjects/MyProject/src/app/app.module.ts and DashboardPageModule in /Users/arsyad/IonicProjects/MyProject/src/pages/dashboard/dashboard.module.ts! Please consider moving DashboardPage in /Users/arsyad/IonicProjects/MyProject/src/pages/dashboard/dashboard.ts to a higher module that imports AppModule in /Users/arsyad/IonicProjects/MyProject/src/app/app.module.ts and DashboardPageModule in /Users/arsyad/IonicProjects/MyProject/src/pages/dashboard/dashboard.module.ts. You can also create a new NgModule that exports and includes DashboardPage in /Users/arsyad/IonicProjects/MyProject/src/pages/dashboard/dashboard.ts then import that NgModule in AppModule in /Users/arsyad/IonicProjects/MyProject/src/app/app.module.ts and DashboardPageModule in /Users/arsyad/IonicProjects/MyProject/src/pages/dashboard/dashboard.module.ts.
If I don’t use --prod the compile works.
During loading, I don’t do much. I have a root page which I named as BootPage. In between the splash screen and the BootPage, the white screen is there for about 10 seconds. Nothing else is executed until BootPage is loaded.
In my app.component.ts, I setup my side menu pages here. Does having import statements for all the pages slow things down?
I am trying to see if lazy loading helps.
use following command, it will surely solve your boot time problem:
ionic cordova build ios --prod --aot --minifyjs --minifycss --optimizejs
Those commands should be executed automatically when you run with --prod.
You definitely need to fix the errors with prod as that should help tremendously. If you’re not using lazy loading you don’t need a module for each page, so delete those and that should fix that error.
Would it be right to say that I can safely delete the module for those pages that is not used in lazy loading? I did try to remove the module but I faced other errors:
Error: /Users/arsyad/IonicProjects/MyProject/src/pages/dashboard/dashboard.ts has a @IonicPage decorator, but it does not have a corresponding “NgModule” at /Users/arsyad/IonicProjects/MyProject/src/pages/dashboard/dashboard.module.ts
I removed @IonicPage and then got this error:
The RegExp to find the DeepLinkConfigToken did not return valid data
I removed these posts from the other topic so it doesn’t get totally hijacked by this new discussion.
@arsyad, please provide the usual:
ionic info output,
config.xml content. Also your build command you are using and anything else that could be interesting to understand your situation.
I managed to compile with --prod flag. What I did was change angular version from 4.2.5 to 4.1.3. And also checked that in package.json my ionic_source_map_type value is deleted. The app now loads much faster now.