Ionic 3 slow when starting the application

LeFredy09 · October 15, 2017, 12:35pm

Hello,
my application made with ionic 3 takes on average 10 seconds to start by presenting the white screen.
can someone help me solve this problem please?

Sujan12 · October 15, 2017, 12:46pm

What is your ionic info?
How are you building your app?

LeFredy09 · October 16, 2017, 1:20pm

Hello!

Ionic Framework: 3.6.0
Ionic App Scripts: 2.1.3
Angular Core: 4.1.3
Angular Compiler CLI: 4.1.3
Node: 6.10.2
OS Platform: Windows 10

cordova run android --prod --release

Sujan12 · October 16, 2017, 1:21pm

This is old and should be updated.

This is not a ionic command, so adding --prod does nothing.
Try ionic cordova run android --prod --release.

LeFredy09 · October 16, 2017, 1:30pm

sorry i wanted to say ionic cordova run android --prod --release
or
ionic cordova build android --prod --release

I tried with these two commands but the result is the same. The blank page takes more than 9 seconds.

LeFredy09 · October 16, 2017, 2:28pm

I have updated my dependencies and here is the overview of my dependencies. Despite this the blance page at startup always puts more than 14 seconds. Help me please, I find this time abnormal.

“dependencies”: {
“@ionic-native/camera”: “^4.2.1”,
“@ionic-native/diagnostic”: “^4.2.1”,
“@ionic-native/geolocation”: “^4.2.0”,
“@ionic-native/local-notifications”: “^4.2.1”,
“@ionic-native/location-accuracy”: “^4.2.1”,
“@ionic-native/native-geocoder”: “^4.2.1”,
“@ionic-native/native-storage”: “^4.2.0”,
“@ionic-native/network”: “^4.2.1”,
“@ionic/storage”: “2.0.1”,
“@ngx-translate/core”: “^8.0.0”,
“@ngx-translate/http-loader”: “^0.1.0”,

"@angular/common": "4.4.3",
"@angular/compiler": "4.4.3",
"@angular/compiler-cli": "4.4.3",
"@angular/core": "4.4.3",
"@angular/forms": "4.4.3",
"@angular/http": "4.4.3",
"@angular/platform-browser": "4.4.3",
"@angular/platform-browser-dynamic": "4.4.3",
"@ionic-native/core": "4.3.1",
"@ionic-native/splash-screen": "4.3.1",
"@ionic-native/status-bar": "4.3.1",   
"ionic-angular": "3.7.1",
"ionicons": "3.0.0",
"rxjs": "5.4.3",
"sw-toolbox": "3.6.0",
"zone.js": "0.8.18"

},
“devDependencies”: {
“@ionic/app-scripts”: “3.0.0”,
“@types/googlemaps”: “^3.26.20”,
“typescript”: “2.3.4”
},
“cordovaPlugins”: [
“cordova-plugin-console”,
“cordova-plugin-statusbar”,
“cordova-plugin-whitelist”,
“cordova-plugin-device”,
“cordova-plugin-splashscreen”,
“ionic-plugin-keyboard”
],

Sujan12 · October 16, 2017, 3:00pm

Please post the output of ionic info on the command line.
(If this above was it, update your Ionic CLI to a current version)

LeFredy09 · October 16, 2017, 3:07pm

ordova CLI: 6.5.0
Ionic Framework Version: 3.6.0
Ionic CLI Version: 2.2.3
Ionic App Lib Version: 2.2.1
Ionic App Scripts Version: 2.1.3

Sujan12 · October 16, 2017, 3:20pm

This is old. Upgrade.

LeFredy09 · October 16, 2017, 8:00pm

@ionic/cli-utils  : 1.13.1
ionic (Ionic CLI) : 3.13.1

local packages:

@ionic/app-scripts : 3.0.0
Ionic Framework    : ionic-angular 3.6.0

System:

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

Misc:

backend : pro

With this update I moved to 13 seconds now.

Sujan12 · October 16, 2017, 9:38pm

This doesn’t show any Cordova information. Why?

LeFredy09 · October 16, 2017, 10:29pm

I do not know why, but cordova -v : 7.1.0

SigmundFroyd · October 16, 2017, 11:36pm

What does your app.module.ts look like?

LeFredy09 · October 17, 2017, 7:11am

import { NgModule, ErrorHandler } from ‘@angular/core’;
import { BrowserModule } from ‘@angular/platform-browser’;
import { IonicApp, IonicModule, IonicErrorHandler } from ‘ionic-angular’;
import { MyApp } from ‘./app.component’;
import { LocationAccuracy } from ‘@ionic-native/location-accuracy’;
import { Network } from ‘@ionic-native/network’;
import { Diagnostic } from ‘@ionic-native/diagnostic’;
import { LocalNotifications } from ‘@ionic-native/local-notifications’;
import { NativeGeocoder, NativeGeocoderReverseResult, NativeGeocoderForwardResult } from ‘@ionic-native/native-geocoder’;

import { IonicStorageModule } from ‘@ionic/storage’;

import { AboutPage } from ‘…/pages/about/about’;
import { ContactPage } from ‘…/pages/contact/contact’;
import { HomePage } from ‘…/pages/home/home’;
import { TabsPage } from ‘…/pages/tabs/tabs’;

import { AllNightDrugstore } from ‘…/pages/all-night-drugstore/all-night-drugstore’;
import { Advice } from ‘…/pages/advice/advice’;
import { Notifications } from ‘…/pages/notifications/notifications’;
import { Ordonnance } from ‘…/pages/ordonnance/ordonnance’;
import { Search } from ‘…/pages/search/search’;
import { Settings } from ‘…/pages/settings/settings’;
import { DrugnstoreDetail } from ‘…/pages/drugnstore-detail/drugnstore-detail’;
import { Register } from ‘…/pages/register/register’;
import { Login } from ‘…/pages/login/login’;
import { Drugstore } from ‘…/pages/drugstore/drugstore’;
import { MyDrugstores } from ‘…/pages/my-drugstores/my-drugstores’;
import { MyDrugstoresUsers } from ‘…/pages/my-drugstores-users/my-drugstores-users’;
import { Timer } from ‘…/pages/timer/timer’;
import { Map } from ‘…/pages/map/map’;
import { Test } from ‘…/pages/test/test’;
import { ChooseDrugstore } from ‘…/pages/choose-drugstore/choose-drugstore’;
import { EmergencyNumber } from ‘…/pages/emergency-number/emergency-number’;
import { NotificationDetails } from ‘…/pages/notification-details/notification-details’;
import { Guard } from ‘…/pages/guard/guard’;
import { IsDrugstoreAccount } from ‘…/pages/is-drugstore-account/is-drugstore-account’;
import { DrugstoreSearchResult } from ‘…/pages/drugstore-search-result/drugstore-search-result’;
import { AddUser } from ‘…/pages/add-user/add-user’;

import { TranslateModule, TranslateLoader } from “@ngx-translate/core”;
import { TranslateHttpLoader } from “@ngx-translate/http-loader”;
import { HttpModule, Http } from “@angular/http”;

import { StatusBar } from ‘@ionic-native/status-bar’;
import { SplashScreen } from ‘@ionic-native/splash-screen’;
import { Geolocation } from ‘@ionic-native/geolocation’;
import { GeocoderProvider } from ‘…/providers/geocoder’;
import { ClientService } from “…/providers/client-service”;

export function createTranslateLoader(http: Http) {
return new TranslateHttpLoader(http, ‘./assets/i18n/’, ‘.json’);
}

@NgModule({
declarations: [
MyApp,
AboutPage,
ContactPage,
HomePage,
Search,
Advice,
AllNightDrugstore,
Notifications,
Ordonnance,
DrugnstoreDetail,
Settings,
Register,
Login,
Drugstore,
MyDrugstores,
MyDrugstoresUsers,
Timer,
NotificationDetails,
Map,
EmergencyNumber,
ChooseDrugstore,
Guard,
DrugstoreSearchResult,
IsDrugstoreAccount,
Test,
AddUser,
TabsPage
],
imports: [
BrowserModule,
HttpModule, // A ajouter pour les API
IonicStorageModule.forRoot(),
IonicModule.forRoot(MyApp),
TranslateModule.forRoot({
loader: {
provide: TranslateLoader,
useFactory: (createTranslateLoader),
deps: [Http]
}
})
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
AboutPage,
ContactPage,
HomePage,
Search,
Advice,
AllNightDrugstore,
Notifications,
Ordonnance,
DrugnstoreDetail,
Settings,
Register,
Login,
Drugstore,
MyDrugstores,
MyDrugstoresUsers,
Timer,
NotificationDetails,
Map,
EmergencyNumber,
ChooseDrugstore,
Guard,
DrugstoreSearchResult,
IsDrugstoreAccount,
Test,
AddUser,
TabsPage
],
providers: [
Geolocation,
Network,
Diagnostic,
LocationAccuracy,
LocalNotifications,
NativeGeocoder,
StatusBar,
SplashScreen,
GeocoderProvider,
ClientService,
{provide: ErrorHandler, useClass: IonicErrorHandler}
]
})
export class AppModule {}

LeFredy09 · October 18, 2017, 6:28am

Is this normal latency time normal? Need help please

mwiley63 · October 18, 2017, 10:00am

Try updating to ionic-angular 3.7.1.

Using ionic cordova build ios --prod (and for android) I get boot times under 3 seconds on newer devices (iPhone 6 and the original Pixel), using ionic info at the bottom.

If by white screen you mean that the splash screen is hidden, then perhaps there is an API call that is taking 10 seconds to process before any data is displayed.

If the splashscreen is a white screen, then make sure you are hiding the splash screen on the platform.ready() subscription and you have reasonable settings in your config.xml according to the splashscreen documentation (https://github.com/apache/cordova-plugin-splashscreen).

ionic info:

    @ionic/cli-utils  : 1.13.1
    ionic (Ionic CLI) : 3.13.1

global packages:

    cordova (Cordova CLI) : 7.0.1 

local packages:

    @ionic/app-scripts : 3.0.0
    Cordova Platforms  : android 6.2.3 ios 4.4.0
    Ionic Framework    : ionic-angular 3.7.1

System:

    ios-deploy : 1.9.1 
    ios-sim    : 5.0.13 
    Node       : v7.4.0
    npm        : 4.0.5 
    OS         : macOS Sierra
    Xcode      : Xcode 9.0 Build version 9A235 

Misc:

    backend : legacy

LeFredy09 · October 19, 2017, 1:31pm

I have updated ionic to 3.13.1 and it works, I am less than 5 seconce, thanks!

LeFredy09 · November 1, 2017, 7:25pm

Hi, thank you for your contribution, I updated but I still find this error : UNMET PEER DEPENDENCY @ionic-native/core@4.3.0. Here is my package.json below

{
“name”: “xxxxxxxxxxxxxxx”,
“version”: “0.0.0”,
“author”: “xxxxxxxxxxx”,
“homepage”: “xxxxxxxxxxxxxxxx”,
“private”: true,
“scripts”: {
“clean”: “ionic-app-scripts clean”,
“build”: “ionic-app-scripts build”,
“lint”: “ionic-app-scripts lint”,
“ionic:build”: “ionic-app-scripts build”,
“ionic:serve”: “ionic-app-scripts serve”
},
“dependencies”: {
"@angular/common": “4.1.3”,
"@angular/compiler": “4.1.3”,
"@angular/compiler-cli": “4.1.3”,
"@angular/core": “4.1.3”,
"@angular/forms": “4.1.3”,
"@angular/http": “4.1.3”,
"@angular/platform-browser": “4.1.3”,
"@angular/platform-browser-dynamic": “4.1.3”,
"@ionic-native/app-version": “^4.3.2”,
"@ionic-native/camera": “^4.3.2”,
"@ionic-native/core": “^3.14.0”,
"@ionic-native/crop": “^4.3.2”,
"@ionic-native/deeplinks": “^4.3.2”,
"@ionic-native/device": “^4.3.2”,
"@ionic-native/diagnostic": “^4.3.3”,
"@ionic-native/file": “^4.3.2”,
"@ionic-native/file-path": “^4.3.2”,
"@ionic-native/file-transfer": “^4.3.2”,
"@ionic-native/geolocation": “^4.3.3”,
"@ionic-native/image-picker": “^4.3.2”,
"@ionic-native/local-notifications": “^4.3.3”,
"@ionic-native/location-accuracy": “^4.3.3”,
"@ionic-native/native-geocoder": “^4.3.3”,
"@ionic-native/native-storage": “^4.3.3”,
"@ionic-native/network": “^4.3.3”,
"@ionic-native/sms": “^4.3.2”,
"@ionic-native/social-sharing": “^4.3.2”,
"@ionic-native/splash-screen": “^3.14.0”,
"@ionic-native/status-bar": “^3.14.0”,
"@ionic-native/transfer": “^3.14.0”,
"@ionic-native/unique-device-id": “^4.3.2”,
"@ionic/storage": “2.0.1”,
"@ngx-translate/core": “^8.0.0”,
"@ngx-translate/http-loader": “^0.1.0”,
“cordova-browser”: “^5.0.0”,
“cordova-plugin-app-version”: “^0.1.9”,
“cordova-plugin-camera”: “^2.4.1”,
“cordova-plugin-console”: “1.0.5”,
“cordova-plugin-crop”: “^0.4.0”,
“cordova-plugin-device”: “1.1.4”,
“cordova-plugin-file”: “^4.3.3”,
“cordova-plugin-file-transfer”: “^1.6.3”,
“cordova-plugin-filepath”: “^1.1.0”,
“cordova-plugin-geolocation”: “~2.4.3”,
“cordova-plugin-image-picker”: “^1.1.3”,
“cordova-plugin-splashscreen”: “~4.0.1”,
“cordova-plugin-statusbar”: “2.2.2”,
“cordova-plugin-telerik-imagepicker”: “^2.1.8”,
“cordova-plugin-uniquedeviceid”: “^1.3.2”,
“cordova-plugin-whitelist”: “1.3.1”,
“cordova-plugin-x-socialsharing”: “^5.2.1”,
“cordova-sms-plugin”: “^0.1.11”,
“es6-promise-plugin”: “^4.1.0”,
“ionic-angular”: “3.6.0”,
“ionic-plugin-deeplinks”: “^1.0.15”,
“ionic-plugin-keyboard”: “~2.2.1”,
“ionicons”: “3.0.0”,
“rxjs”: “5.4.0”,
“sw-toolbox”: “3.6.0”,
“zone.js”: “0.8.12”
},
“devDependencies”: {
"@ionic/app-scripts": “^3.0.0”,
"@types/googlemaps": “^3.26.20”,
“typescript”: “2.3.4”
},
“cordovaPlugins”: [
“cordova-plugin-console”,
“cordova-plugin-statusbar”,
“cordova-plugin-whitelist”,
“cordova-plugin-device”,
“cordova-plugin-splashscreen”,
“ionic-plugin-keyboard”
],
“cordovaPlatforms”: [],
“description”: “xxxxxxxxxxxxx”,
“cordova”: {
“plugins”: {
“ionic-plugin-keyboard”: {},
“cordova-plugin-whitelist”: {},
“cordova-plugin-console”: {},
“cordova-plugin-statusbar”: {},
“cordova-plugin-device”: {},
“cordova-plugin-splashscreen”: {},
“cordova-plugin-geolocation”: {},
“cordova-plugin-image-picker”: {},
“cordova-plugin-crop”: {},
“ionic-plugin-deeplinks”: {
“URL_SCHEME”: “demoapp”,
“DEEPLINK_SCHEME”: “https”,
“DEEPLINK_HOST”: “demoapp.com”,
“ANDROID_PATH_PREFIX”: “/”,
“ANDROID_2_PATH_PREFIX”: “/”,
“ANDROID_3_PATH_PREFIX”: “/”,
“ANDROID_4_PATH_PREFIX”: “/”,
“ANDROID_5_PATH_PREFIX”: “/”,
“DEEPLINK_2_SCHEME”: " ",
“DEEPLINK_2_HOST”: " ",
“DEEPLINK_3_SCHEME”: " ",
“DEEPLINK_3_HOST”: " ",
“DEEPLINK_4_SCHEME”: " ",
“DEEPLINK_4_HOST”: " ",
“DEEPLINK_5_SCHEME”: " ",
“DEEPLINK_5_HOST”: " "
},
“cordova-plugin-x-socialsharing”: {},
“cordova-sms-plugin”: {},
“cordova-plugin-camera”: {},
“cordova-plugin-file”: {},
“cordova-plugin-file-transfer”: {},
“cordova-plugin-filepath”: {},
“cordova-plugin-uniquedeviceid”: {},
“cordova-plugin-app-version”: {}
},
“platforms”: [
“browser”
]
}
}

josele2015 · March 4, 2019, 1:22am

use lazy loading ionic. https://ionicframework.com/docs/v3/api/navigation/IonicPage/

Topic		Replies	Views
Help with Ionic app Slow startup ionic-v3	21	11129	January 8, 2020
Android Startup takes 12 Seconds ionic-v3	2	1561	January 4, 2017
Ionic App Start delay in android ionic-v3	4	1915	July 19, 2021
IONIC startup too slow ionic-v3	16	6488	February 26, 2018
Android start app very slow ionic-v3	4	3521	November 15, 2018

Ionic 3 slow when starting the application

Related topics