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


#1

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


#2

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


#3

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


#4

how to lazy load the pages please help??


#5

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


#6

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


#7

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.


#8

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


#9

What error are you getting?


#10

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


#11

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:


#12

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


#13

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