[solved]App takes more then 14 seconds to load when app is opened

cli packages: (C:\Users\lapi\AppData\Roaming\npm\node_modules)

@ionic/cli-utils  : 1.19.0
ionic (Ionic CLI) : 3.19.0

global packages:

cordova (Cordova CLI) : 7.1.0

local packages:

@ionic/app-scripts : 3.1.0
Cordova Platforms  : android 6.3.0
Ionic Framework    : ionic-angular 3.9.2

System:

Android SDK Tools : 26.0.2
Node              : v6.11.1
npm               : 3.10.10
OS                : Windows 10

Environment Variables:

ANDROID_HOME : C:\Users\lapi\AppData\Local\Android\android-sdk

Misc:

backend : legacy

this is my ionic cli info and here is my app module

import { BrowserModule } from ‘@angular/platform-browser’;
import { ErrorHandler, NgModule } from ‘@angular/core’;
import { IonicApp, IonicErrorHandler, IonicModule } from ‘ionic-angular’;
import { SplashScreen } from ‘@ionic-native/splash-screen’;
import { StatusBar } from ‘@ionic-native/status-bar’;
import { IonicStorageModule } from ‘@ionic/storage’;
import { HttpModule } from ‘@angular/http’;
import { MediaCapture } from ‘@ionic-native/media-capture’;
import { AngularFireModule } from ‘angularfire2’;
import { AngularFireAuthModule } from ‘angularfire2/auth’;
import { AngularFirestoreModule } from ‘angularfire2/firestore’;
import { File } from ‘@ionic-native/file’;
import { VideoEditor } from ‘@ionic-native/video-editor’;
import { FileChooser } from ‘@ionic-native/file-chooser’;
import { PhotoLibrary } from ‘@ionic-native/photo-library’;
import { ImagePicker } from ‘@ionic-native/image-picker’;
import { VideoPlayer } from ‘@ionic-native/video-player’;
import { OneSignal } from ‘@ionic-native/onesignal’;
import { NativeAudio } from ‘@ionic-native/native-audio’;

import { MyApp } from ‘./app.component’;
import { HomePage } from ‘…/pages/home/home’;
import { LoginPage } from ‘…/pages/login/login’;
import { SingupPage } from ‘…/pages/singup/singup’;
import { RecoverPage } from ‘…/pages/recover/recover’;
import { PassresetPage } from ‘…/pages/passreset/passreset’;
import { EditprofilePage } from ‘…/pages/editprofile/editprofile’;
import { OpenprofilePage } from ‘…/pages/openprofile/openprofile’;
import { AllfriendsPage } from ‘…/pages/allfriends/allfriends’;
import { MommRecordPage } from ‘…/pages/momm-record/momm-record’;
import { OpenMommPage } from ‘…/pages/open-momm/open-momm’;
import { AddContPage } from ‘…/pages/add-cont/add-cont’;
import { OpenVideoPage } from ‘…/pages/open-video/open-video’;
import { OpenCreaterPage } from ‘…/pages/open-creater/open-creater’;
import { NotiPage } from ‘…/pages/noti/noti’;
import { OpenChatPage } from ‘…/pages/open-chat/open-chat’;
import { OpenContPage } from ‘…/pages/open-cont/open-cont’;
import { OpenChatroomPage } from ‘…/pages/open-chatroom/open-chatroom’;
import { OpenDatePage } from ‘…/pages/open-date/open-date’;
import { SafeDatePage } from ‘…/pages/safe-date/safe-date’;

import { EditprofileIntroComponent } from ‘…/components/editprofile-intro/editprofile-intro’;
import { EditprofilePictureComponent } from ‘…/components/editprofile-picture/editprofile-picture’;
import { EditprofileEditComponent } from ‘…/components/editprofile-edit/editprofile-edit’;
import { EditprofileBuildComponent } from ‘…/components/editprofile-build/editprofile-build’;
import { HomeOnesignalComponent } from ‘…/components/home-onesignal/home-onesignal’;

import { ProgressBarComponent } from ‘…/components/progress-bar/progress-bar’;

import { CommPage } from ‘…/pages/comm/comm’;
import { ProfilePage } from ‘…/pages/profile/profile’;
import { MommPage } from ‘…/pages/momm/momm’;
import { VideoPage } from ‘…/pages/video/video’;
import { ContPage } from ‘…/pages/cont/cont’;

export const firebaseConfig = {
apiKey: “AIzaSyCLCJIqNHPrDccMCal8VwgOWOXcNgbIPbg”,
authDomain: “bikk-1f1b3.firebaseapp.com”,
databaseURL: “https://bikk-1f1b3.firebaseio.com”,
projectId: “bikk-1f1b3”,
storageBucket: “bikk-1f1b3.appspot.com”,
messagingSenderId: “406497138557”

};

@NgModule({
declarations: [
MyApp,
HomePage,
LoginPage,
SingupPage,
RecoverPage,
PassresetPage,
CommPage,
ProfilePage,
MommPage,
VideoPage,
ContPage,
OpenprofilePage,
EditprofilePage,
AllfriendsPage,
EditprofileIntroComponent,
EditprofilePictureComponent,
EditprofileEditComponent,
EditprofileBuildComponent,
MommRecordPage,
ProgressBarComponent,
OpenMommPage,
AddContPage,
OpenVideoPage,
OpenCreaterPage,
NotiPage,
OpenChatPage,
OpenContPage,
OpenChatroomPage,
OpenDatePage,
SafeDatePage,
HomeOnesignalComponent,
],
imports: [
BrowserModule,
IonicModule.forRoot(MyApp),
IonicStorageModule.forRoot(),
HttpModule,
AngularFireModule.initializeApp(firebaseConfig),
AngularFireAuthModule,
AngularFirestoreModule.enablePersistence() //.enablePersistence()
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
HomePage,
LoginPage,
SingupPage,
RecoverPage,
PassresetPage,
CommPage,
ProfilePage,
MommPage,
VideoPage,
ContPage,
EditprofilePage,
OpenprofilePage,
AllfriendsPage,
MommRecordPage,
ProgressBarComponent,
OpenMommPage,
AddContPage,
OpenVideoPage,
OpenCreaterPage,
NotiPage,
OpenChatPage,
OpenContPage,
OpenChatroomPage,
OpenDatePage,
SafeDatePage,
HomeOnesignalComponent,
],
providers: [
StatusBar,
SplashScreen,
MediaCapture,
File,
VideoEditor,
FileChooser,
PhotoLibrary,
ImagePicker,
VideoPlayer,
OneSignal,
NativeAudio,
{provide: ErrorHandler, useClass: IonicErrorHandler}
]
})
export class AppModule {}

the first function on my homepage is called after 14 seconds so the page is loading really late but why??

please help i am building the app via command : ionic cordova build --release android

Can you make a production build using ionic cordova build android --prod?

This will make a faster and more performant build of your app.
Please post the results

Lazy load your pages. Right now you are loading them eagerly.

how to lazy load the pages please help??

Read the official Ionic blog posts about lazy loading. That explains it. Or look at any of the threads on this forum.

i tried everything but the prod is not working at all it seems there is some kind of error going on for a long time in prod

1 Like

or wait a little bit for Ionic 4. Ionic team told me they will work on reducing loading time and all loading errors. I requested them to do so.

Have you tried to set splash screen delay to completely 0 on config.xml?

What error are you getting?

hey i got it working i am now using --prod --release flags and its seems to work the app is now loading under 3 seconds i also made some changes in ngFor to collection repeat which is a little bit faster but prod is still not working update your ionic cli to the latest

Hello, could you give us the list of your versions plugin ? Because i already have a compile error with the --prod flag. Thank you :slight_smile:

cli packages: (C:\Users\lapi\AppData\Roaming\npm\node_modules)

@ionic/cli-utils  : 1.19.0
ionic (Ionic CLI) : 3.19.0

System:

Node : v6.11.1
npm  : 3.10.10
OS   : Windows 10

Misc:

backend : legacy

this is my ionic info

there is a problem with firebase plugin so downgrade it to version 2.8.0 or the last stable version

and the problem with webpack please use --prod --release at the same time let me know if you have browser plugin error

It’s possible to have the package.json ? :smile: I use all latest version like angular 5, maybe it’s not a good idea