Ionic 3 slow when starting the application


#1

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?


#2

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


#3

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


#4

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.


#5

sorry i wanted to say :slight_smile: 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.


#6

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”
],


#7

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


#8

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


#9

This is old. Upgrade.


#10
@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.


#11

This doesn’t show any Cordova information. Why?


#12

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


#13

What does your app.module.ts look like?


#14

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 {}


#15

Is this normal latency time normal? Need help please


#16

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


#17

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


#18

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”
]
}
}