I have integrated AOT compiler in my ionic project. App is still taking 6-7 seconds to appear first screen

[niravparsana94]

Hi Guys,
I have integrated AOT compiler in my ionic project.
I use below command while build .apk file:

"node_modules/.bin/ngc" -p tsconfig-aot.json

"node_modules/.bin/rollup" -c rollup-config.js

ionic cordova build android

but while using same command with --prod flag it gives me below logs:

ionic cordova build android --prod
[INFO] Running app-scripts build: --prod --platform android --target cordova

[17:43:35]  build prod started ...
[17:43:35]  clean started ...
[17:43:35]  clean finished in 5 ms
[17:43:35]  copy started ...
[17:43:35]  ngc started ...
[17:43:53]  Failed to parse and update D:\Projects\Code\Hybrid Mobile App\DailySheet\src\app\main.ts content for AoT
            compilation. For now, the default fallback content will be used instead. Please consider updating
            D:\Projects\Code\Hybrid Mobile App\DailySheet\src\app\main.ts with the content from the following link:
            https://github.com/ionic-team/ionic2-app-base/tree/master/src/app/main.ts
[17:43:59]  ngc finished in 23.38 s
[17:43:59]  preprocess started ...
[17:43:59]  deeplinks started ...
[17:44:00]  deeplinks finished in 1.06 s
[17:44:00]  optimization started ...
[17:44:03]  copy finished in 27.85 s
[17:44:26]  optimization finished in 26.21 s
[17:44:26]  preprocess finished in 27.28 s
[17:44:26]  webpack started ...
[17:44:58]  webpack finished in 31.98 s
[17:44:58]  sass started ...
[17:44:58]  uglifyjs started ...
[17:45:03]  sass finished in 5.34 s
[17:45:03]  cleancss started ...
[17:45:08]  cleancss finished in 5.07 s
[17:46:19]  uglifyjs finished in 81.17 s
[17:46:19]  postprocess started ...
[17:46:19]  removed unused font files
[17:46:19]  postprocess finished in 156 ms
[17:46:19]  lint started ...
[17:46:19]  build prod finished in 164.21 s
> ionic cordova prepare
> cordova prepare
√ Running command - done!

> cordova build android
| Running command [17:47:36]  tslint: D:/Projects/Code/Hybrid Mobile App/DailySheet/src/pages/Units/Units.ts, line: 281
            Duplicate variable: 'unit'

     L280:  if (flag) {
/ Running command      L281:      for (var unit of array) {
     L282:          if (unit.UnitId == Unit.UnitId) {

[17:47:36]  tslint: D:/Projects/Code/Hybrid Mobile App/DailySheet/src/pages/Worker/Workers.ts, line: 142
            Duplicate variable: 'worker'

     L141:  if (flag) {
     L142:      for (var worker of array) {
     L143:          if (worker.WorkerId == Worker.WorkerId) {

[17:47:36]  lint finished in 76.82 s
√ Running command - done!
ANDROID_HOME=D:\Softwares\Programing\Android\android-sdk
JAVA_HOME=C:\Program Files\Java\jdk1.8.0_131
Subproject Path: CordovaLib
The Task.leftShift(Closure) method has been deprecated and is scheduled to be removed in Gradle 5.0. Please use Task.doLast(Action) instead.
        at build_cuh8avru5p0udzrxkx14hyufn.run(D:\Projects\Code\Hybrid Mobile App\DailySheet\platforms\android\build.gradle:138)
The JavaCompile.setDependencyCacheDir() method has been deprecated and is scheduled to be removed in Gradle 4.0.
Incremental java compilation is an incubating feature.
The TaskInputs.source(Object) method has been deprecated and is scheduled to be removed in Gradle 4.0. Please use TaskInputs.file(Object).skipWhenEmpty() instead.
:preBuild UP-TO-DATE
:preDebugBuild UP-TO-DATE
:checkDebugManifest
:preDebugAndroidTestBuild UP-TO-DATE
:preReleaseBuild UP-TO-DATE
:CordovaLib:preBuild UP-TO-DATE
:CordovaLib:preDebugBuild UP-TO-DATE
:CordovaLib:checkDebugManifest
:CordovaLib:prepareDebugDependencies
:CordovaLib:compileDebugAidl UP-TO-DATE
:CordovaLib:compileDebugNdk UP-TO-DATE
:CordovaLib:compileLint UP-TO-DATE
:CordovaLib:copyDebugLint UP-TO-DATE
:CordovaLib:mergeDebugShaders UP-TO-DATE
:CordovaLib:compileDebugShaders UP-TO-DATE
:CordovaLib:generateDebugAssets UP-TO-DATE
:CordovaLib:mergeDebugAssets UP-TO-DATE
:CordovaLib:mergeDebugProguardFiles UP-TO-DATE
:CordovaLib:packageDebugRenderscript UP-TO-DATE
:CordovaLib:compileDebugRenderscript UP-TO-DATE
:CordovaLib:generateDebugResValues UP-TO-DATE
:CordovaLib:generateDebugResources UP-TO-DATE
:CordovaLib:packageDebugResources UP-TO-DATE
:CordovaLib:processDebugManifest UP-TO-DATE
:CordovaLib:generateDebugBuildConfig UP-TO-DATE
:CordovaLib:processDebugResources UP-TO-DATE
:CordovaLib:generateDebugSources UP-TO-DATE
:CordovaLib:incrementalDebugJavaCompilationSafeguard UP-TO-DATE
:CordovaLib:compileDebugJavaWithJavac UP-TO-DATE
:CordovaLib:processDebugJavaRes UP-TO-DATE
:CordovaLib:transformResourcesWithMergeJavaResForDebug UP-TO-DATE
:CordovaLib:transformClassesAndResourcesWithSyncLibJarsForDebug UP-TO-DATE
:CordovaLib:mergeDebugJniLibFolders UP-TO-DATE
:CordovaLib:transformNative_libsWithMergeJniLibsForDebug UP-TO-DATE
:CordovaLib:transformNative_libsWithSyncJniLibsForDebug UP-TO-DATE
:CordovaLib:bundleDebug UP-TO-DATE
:CordovaLib:preReleaseBuild UP-TO-DATE
:CordovaLib:checkReleaseManifest
:CordovaLib:prepareReleaseDependencies
:CordovaLib:compileReleaseAidl UP-TO-DATE
:CordovaLib:compileReleaseNdk UP-TO-DATE
:CordovaLib:copyReleaseLint UP-TO-DATE
:CordovaLib:mergeReleaseShaders UP-TO-DATE
:CordovaLib:compileReleaseShaders UP-TO-DATE
:CordovaLib:generateReleaseAssets UP-TO-DATE
:CordovaLib:mergeReleaseAssets UP-TO-DATE
:CordovaLib:mergeReleaseProguardFiles UP-TO-DATE
:CordovaLib:packageReleaseRenderscript UP-TO-DATE
:CordovaLib:compileReleaseRenderscript UP-TO-DATE
:CordovaLib:generateReleaseResValues UP-TO-DATE
:CordovaLib:generateReleaseResources UP-TO-DATE
:CordovaLib:packageReleaseResources UP-TO-DATE
:CordovaLib:processReleaseManifest UP-TO-DATE
:CordovaLib:generateReleaseBuildConfig UP-TO-DATE
:CordovaLib:processReleaseResources UP-TO-DATE
:CordovaLib:generateReleaseSources UP-TO-DATE
:CordovaLib:incrementalReleaseJavaCompilationSafeguard UP-TO-DATE
:CordovaLib:compileReleaseJavaWithJavac UP-TO-DATE
:CordovaLib:processReleaseJavaRes UP-TO-DATE
:CordovaLib:transformResourcesWithMergeJavaResForRelease UP-TO-DATE
:CordovaLib:transformClassesAndResourcesWithSyncLibJarsForRelease UP-TO-DATE
:CordovaLib:mergeReleaseJniLibFolders UP-TO-DATE
:CordovaLib:transformNative_libsWithMergeJniLibsForRelease UP-TO-DATE
:CordovaLib:transformNative_libsWithSyncJniLibsForRelease UP-TO-DATE
:CordovaLib:bundleRelease UP-TO-DATE
:prepareComAndroidSupportMultidex101Library UP-TO-DATE
:prepareComAndroidSupportSupportCompat2600Alpha1Library UP-TO-DATE
:prepareComAndroidSupportSupportCoreUi2600Alpha1Library UP-TO-DATE
:prepareComAndroidSupportSupportCoreUtils2600Alpha1Library UP-TO-DATE
:prepareComAndroidSupportSupportFragment2600Alpha1Library UP-TO-DATE
:prepareComAndroidSupportSupportMediaCompat2600Alpha1Library UP-TO-DATE
:prepareComAndroidSupportSupportV132510Library UP-TO-DATE
:prepareComAndroidSupportSupportV42600Alpha1Library UP-TO-DATE
:prepareComGoogleAndroidGmsPlayServicesAds1101Library UP-TO-DATE
:prepareComGoogleAndroidGmsPlayServicesAdsLite1101Library UP-TO-DATE
:prepareComGoogleAndroidGmsPlayServicesBase1101Library UP-TO-DATE
:prepareComGoogleAndroidGmsPlayServicesBasement1101Library UP-TO-DATE
:prepareComGoogleAndroidGmsPlayServicesClearcut1101Library UP-TO-DATE
:prepareComGoogleAndroidGmsPlayServicesGass1101Library UP-TO-DATE
:prepareComGoogleAndroidGmsPlayServicesSafetynet1101Library UP-TO-DATE
:prepareComGoogleAndroidGmsPlayServicesTasks1101Library UP-TO-DATE
:prepareComGoogleFirebaseFirebaseAnalytics1101Library UP-TO-DATE
:prepareComGoogleFirebaseFirebaseAnalyticsImpl1101Library UP-TO-DATE
:prepareComGoogleFirebaseFirebaseCommon1101Library UP-TO-DATE
:prepareComGoogleFirebaseFirebaseCore1101Library UP-TO-DATE
:prepareComGoogleFirebaseFirebaseIid1101Library UP-TO-DATE
:prepareComGoogleFirebaseFirebaseMessaging1101Library UP-TO-DATE
:prepareMeLeolinShortcutBadger1117Library UP-TO-DATE
:prepareOrgApacheCordovaCordovaLib623DebugLibrary UP-TO-DATE
:prepareDebugDependencies
:compileDebugAidl UP-TO-DATE
:compileDebugRenderscript UP-TO-DATE
:generateDebugBuildConfig UP-TO-DATE
:generateDebugResValues UP-TO-DATE
:processDebugGoogleServices
Parsing json file: D:\Projects\Code\Hybrid Mobile App\DailySheet\platforms\android\google-services.json
:generateDebugResources
:mergeDebugResources
:processDebugManifest
:processDebugResources
:generateDebugSources
:incrementalDebugJavaCompilationSafeguard
:compileDebugJavaWithJavac
:compileDebugJavaWithJavac - is not incremental (e.g. outputs have changed, no previous execution, etc.).
:compileDebugNdk UP-TO-DATE
:compileDebugSources
:mergeDebugShaders
:compileDebugShaders
:generateDebugAssets
:mergeDebugAssets
:transformClassesWithJarMergingForDebug
:transformClassesWithMultidexlistForDebug
:transformClassesWithDexForDebug
:mergeDebugJniLibFolders
:transformNative_libsWithMergeJniLibsForDebug
:processDebugJavaRes UP-TO-DATE
:transformResourcesWithMergeJavaResForDebug
:validateSigningDebug
:packageDebug
:assembleDebug
:cdvBuildDebug

BUILD SUCCESSFUL

Total time: 2 mins 48.709 secs
Built the following apk(s):
        D:/Projects/Code/Hybrid Mobile App/DailySheet/platforms/android/build/outputs/apk/android-debug.apk

App is still taking 6-7 seconds to appear first screen. I’m sure it is not using AOT while production/release build.

[rapropos]

It looks like you have edited main.ts. Don’t do that. Replace it with a stock version from a new project or download it from the URL mentioned in the error message. I also don’t understand why you are manually running ngc or rollup.

[niravparsana94]

I have changed it because i followed steps mentioned in following link:
https://angular.io/guide/aot-compiler

I wonder that i never found any article which describes using AOT complier in ionic 3 application.

[rapropos]

@niravparsana94

I wonder that i never found any article which describes using AOT complier in ionic 3 application.

That is because there is no point in writing such an article. ionic-app-scripts handles all of this.

[niravparsana94]

I’ve used AOT because in production build, app is still taking 6-7 seconds.
But strange thing is when using new project it takes hardly 2-3 seconds,but after adding my code it takes much time.
So is there anything wrong with my code?

here is my app.component.ts

import { Component } from '@angular/core';
import { Platform, AlertController } from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
import { TranslateService } from '@ngx-translate/core';
import { SheetEntry } from '../pages/SheetEntry/SheetEntry';
import { Push, PushObject, PushOptions } from '@ionic-native/push';

@Component({
  templateUrl: 'app.html'
})
export class MyApp {
  rootPage: any;

  constructor(public platform: Platform,
    statusBar: StatusBar,
    splashScreen: SplashScreen,
    private translateService: TranslateService,
    private alertCtrl: AlertController,
    private push: Push) {
    let lang = localStorage.getItem('LANG');
    if (lang == null)
      lang = 'en';
    translateService.setDefaultLang(lang);

    let salarydate = localStorage.getItem('SALARYDATE');
    if (salarydate == null)
      localStorage.setItem('SALARYDATE', "1");

    let workinghours = localStorage.getItem('WORKINGHOURS');
    if (workinghours == null)
      localStorage.setItem('WORKINGHOURS', "8");

    let MULTIPLE_UNITS = localStorage.getItem('MULTIPLE_UNITS');
    if (MULTIPLE_UNITS == null)
      localStorage.setItem('MULTIPLE_UNITS', 'false');

    platform.ready().then(() => {
      // Okay, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need.
      statusBar.styleDefault();
      splashScreen.hide();
      this.rootPage = SheetEntry;
      this.InitPushPlugin();
    });
  }

  InitPushPlugin() {
    this.push.hasPermission()
      .then((res: any) => {
        if (!res.isEnabled) {
          console.log('We do not have permission to send push notifications');
        }
      });

    // to initialize push notifications

    const options: PushOptions = {
      android: {
        senderID: '871404459501',
        vibrate: true,
        sound: true
      },
      ios: {
        alert: true,
        badge: true,
        sound: true
      },
      windows: {}
    };

    const pushObject: PushObject = this.push.init(options);

    pushObject.on('notification').subscribe((notification: any) => {
      // console.log('Received a notification', notification);
      this.showAlert('Notification', notification.message);
    });

    pushObject.on('registration').subscribe((registration: any) => {
      if (registration.registrationId != null) {
        // console.log('Device registered', registration.registrationId);
        localStorage.setItem('RegistrationId', registration.registrationId);
      }
    });

    pushObject.on('error').subscribe(error => {
      console.error('Error with Push plugin', error);
    });
  }

  showAlert(Title: string, Message: string) {
    let OK;
    this.translateService.get('OK').subscribe(
      value => {
        OK = value;
      }
    );
    let alert = this.alertCtrl.create({
      title: Title,
      subTitle: Message,
      buttons: [OK]
    });
    alert.present();
  }
}

[rapropos]

I would not use localStorage. It is synchronous and thus blocks your app. Try switching to ionic-storage instead.

[niravparsana94]

Ohh, never knew that. Thanks for info. Let me give it a try.

[niravparsana94]

@rapropos I have tried to use ionic-storage as you suggested, but no cheers. App is taking same time.
Moreover, what i have done, created new ionic blank project and build with --prod flag. It takes 1.2 seconds
But after i added my code in app.module.ts(declarations,providers,imports etc), suddenly it affects to app starting time. It
falls back to 6-7 seconds. That means there’s something wrong with app.module.ts
here is my app.module.ts

import { NgModule, ErrorHandler } from '@angular/core';
import { Http, HttpModule } from "@angular/http";
import { BrowserModule } from '@angular/platform-browser';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';

import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
import { SQLite } from '@ionic-native/sqlite';
import { AdMobPro } from '@ionic-native/admob-pro';
import { CallNumber } from '@ionic-native/call-number';
import { File } from '@ionic-native/file';
import { FileOpener } from '@ionic-native/file-opener';
import { EmailComposer } from '@ionic-native/email-composer';
import { InAppBrowser } from '@ionic-native/in-app-browser';
import { Screenshot } from '@ionic-native/screenshot';
import { SocialSharing } from '@ionic-native/social-sharing';
import { AppRate } from '@ionic-native/app-rate';
import { Push } from '@ionic-native/push';

import { MyApp } from './app.component';
import { DBProvider } from '../providers/DBProvider';
import { ApiProvider } from '../providers/ApiProvider';
import { AppUserService } from '../providers/AppUserService';
import { AttendanceService } from '../providers/AttendanceService';
import { AdvanceService } from '../providers/AdvanceService';
import { UnitService } from '../providers/UnitService';
import { WorkerService } from '../providers/WorkerService';
import { ReportService } from '../providers/ReportService';
import { SyncService } from '../providers/SyncService';

import { SheetEntry } from '../pages/SheetEntry/SheetEntry';
import { Advances } from '../pages/Advances/Advances';
import { Units } from '../pages/Units/Units';
import { Workers } from '../pages/Worker/Workers';
import { AddEditWorker } from '../pages/Worker/AddEditWorker';
import { Options } from '../pages/SheetEntry/Options';
import { Reports } from '../pages/Reports/Reports';
import { ViewAttendance } from '../pages/Reports/ViewAttendance';
import { Settings } from '../pages/Settings/Settings';
import { Login } from '../pages/Settings/Login/Login';
import { Register } from '../pages/Settings/Register/Register';
import { PaymentDetails } from '../pages/Settings/PaymentDetails/PaymentDetails';

import { FilterPipe } from './FilterPipe';
import { FocuserDirective } from './Focuser';
export function createTranslateLoader(http: Http) {
  return new TranslateHttpLoader(http, './assets/i18n/', '.json');
}

@NgModule({
  declarations: [
    MyApp,
    SheetEntry,
    Advances,
    Units,
    Workers,
    AddEditWorker,
    Options,
    Reports,
    ViewAttendance,
    Settings,
    Login,
    Register,
    PaymentDetails,
    FilterPipe,
    FocuserDirective
  ],
  imports: [
    BrowserModule,
    HttpModule,
    IonicModule.forRoot(MyApp),
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: (createTranslateLoader),
        deps: [Http]
      }
    })
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    SheetEntry,
    Advances,
    Units,
    Workers,
    AddEditWorker,
    Options,
    Reports,
    ViewAttendance,
    Settings,
    Login,
    Register,
    PaymentDetails
  ],
  providers: [
    StatusBar,
    SplashScreen,
    AdMobPro,
    SQLite,
    CallNumber,
    File,
    FileOpener,
    EmailComposer,
    InAppBrowser,
    Screenshot,
    SocialSharing,
    AppRate,
    Push,
    DBProvider,
    ApiProvider,
    AppUserService,
    AttendanceService,
    AdvanceService,
    UnitService,
    WorkerService,
    ReportService,
    SyncService,
    // Keep this to enable Ionic's runtime error handling during development
    { provide: ErrorHandler, useClass: IonicErrorHandler }
  ]
})
export class AppModule { }

[Sujan12]

What exactly of the loads of stuff you are adding makes it slower?
The Cordova plugins? The pages?

How exactly are you building your “slow” app?
What is your ionic info output?

[niravparsana94]

I’m adding all required pages/providers to app.
There are many cordova plugins too.
I’m building app using below command:

ionic cordova build android --prod

Below is my ionic info output

    @ionic/cli-utils  : 1.9.2
    ionic (Ionic CLI) : 3.9.2

global packages:

    Cordova CLI : 7.0.1

local packages:

    @ionic/app-scripts : 2.1.3
    Cordova Platforms  : android 6.2.3
    Ionic Framework    : ionic-angular 3.6.0

System:

    Android SDK Tools : 25.2.5
    Node              : v7.8.0
    npm               : 4.2.0
    OS                : Windows 10

Below is my cordova plugin ls output:

com.darktalker.cordova.screenshot 0.1.5 "Screenshot"
cordova-plugin-admobpro 2.29.22 "AdMob Plugin Pro"
cordova-plugin-apprate 1.3.0 "AppRate"
cordova-plugin-compat 1.0.0 "Compat"
cordova-plugin-console 1.0.5 "Console"
cordova-plugin-device 1.1.4 "Device"
cordova-plugin-dialogs 1.3.3 "Notification"
cordova-plugin-email-composer 0.8.7 "EmailComposer"
cordova-plugin-extension 1.5.1 "Cordova Plugin Extension"
cordova-plugin-file 4.3.3 "File"
cordova-plugin-file-opener2 2.0.19 "File Opener2"
cordova-plugin-globalization 1.0.7 "Globalization"
cordova-plugin-inappbrowser 1.7.1 "InAppBrowser"
cordova-plugin-splashscreen 4.0.3 "Splashscreen"
cordova-plugin-statusbar 2.2.2 "StatusBar"
cordova-plugin-whitelist 1.3.1 "Whitelist"
cordova-plugin-x-socialsharing 5.1.8 "SocialSharing"
cordova-sqlite-storage 2.0.4 "Cordova sqlite storage plugin"
es6-promise-plugin 4.1.0 "Promise"
ionic-plugin-keyboard 2.2.1 "Keyboard"
mx.ferreyra.callnumber 0.0.2 "Cordova Call Number Plugin"
phonegap-plugin-push 2.0.0 "PushPlugin"

[Sujan12]

I saw the list of pages and list of Cordova plugins. My question was, which is making your app startup slow?
You will have to do some analysis to find out what is actually going on.

Find out by:

• e.g. removing all the non-essential Cordova plugins (which are not used to start your app) and build your app to see how slow or fast it starts up then.
• Remove the pages that are not required for startup of your app and see how slow/fast it is.

(If the pages are a problem, you might want to look into lazy loading)

[niravparsana94]

Nice idea. But it will take a lot time because i have to change every page since some page has reference of another one.
Regarding plugin, i have already listed plugin above, can you tell me which particular plugin may cause the issue?
I wonder that at the end i have to work with all the plugins and pages, then there should not be limitation in ionic.

[Sujan12]

You can’t optimize anything that you didn’t measure. Right now you are telling us “whah, it is slow”. I ask “What is slow exactly?” and yes, you will have to do some work to find out.

Start by removing all the Cordova plugins that are not present in a default project (if you don’t access the pages that use the functionality it should not throw any errors). If this already gives you perfect startup times, add them back one by one to find out which one is causing the slowdown.

If it is the combination of all these things, there are still strategies to work on that (see my previous comment on lazy loading for example).

[niravparsana94]

I have removed everything except one page. Still it is taking 3-4 seconds.
I can see below logs in console.

Failed to load resource: net::ERR_FILE_NOT_FOUND
roboto-regular.woff2 Failed to load resource: net::ERR_FILE_NOT_FOUND
roboto-medium.woff Failed to load resource: net::ERR_FILE_NOT_FOUND
roboto-regular.woff Failed to load resource: net::ERR_FILE_NOT_FOUND
index.html:1 GET file:///android_asset/www/assets/fonts/roboto-medium.ttf net::ERR_FILE_NOT_FOUND
index.html:1 GET file:///android_asset/www/assets/fonts/roboto-regular.ttf net::ERR_FILE_NOT_FOUND
deviceready has not fired after 5 seconds.
vendor.js:1 Ionic Native: deviceready event fired after 3950 ms

[Sujan12]

Same device for a blank project is faster than the project that now also effectively is a blank project? Doesn’t really make sense.

The errors you are seeing should not be there. Compare your project to a blank one with a tool like Winmerge to see if some files are missing.

[rapropos]

Can you try removing any customization you have done to index.html? I’m suspicious of the Roboto font stuff.

[niravparsana94]

I have run blank demo project and it still display below logs:

Failed to load resource: net::ERR_FILE_NOT_FOUND
roboto-regular.woff2 Failed to load resource: net::ERR_FILE_NOT_FOUND
roboto-medium.woff Failed to load resource: net::ERR_FILE_NOT_FOUND
roboto-regular.woff Failed to load resource: net::ERR_FILE_NOT_FOUND
roboto-medium.ttf Failed to load resource: net::ERR_FILE_NOT_FOUND
roboto-regular.ttf Failed to load resource: net::ERR_FILE_NOT_FOUND
vendor.js:1 Ionic Native: deviceready event fired after 1171 ms

I tried to removed @import "roboto"; from variables.scss file and then those logs are gone.

[niravparsana94]

Hey guys,
I followed below steps as you suggested:

1. removed all platforms,plugins and pages from my project
2. added android platform on blank project
3. added page one by one(only installed individual plugin required by page at a time) and measure application startup time

Here is summary:
I have used pdfmake plugin for generate reports.
Before adding Report page, startup time was 1.5-2 seconds.
But after adding Report page(with pdfmake plugin), startup time increases to 6.5-7 seconds.

Also my Reports.ts contains very large code, so what i have done after adding Reports page is below:

1. Commented large code, startup time => 4-5 seconds
2. Uncomment large code, startup time => 6-7 seconds

Also i’m using below command for building production app:
ionic cordova run android --minifycss --minifyjs --optimizejs --aot --prod
(I’ve tried all possible optimization command here

So, i’m confused now that is it plugin or code that are causing much long startup time.

[Sujan12]

@niravparsana94

Also i’m using below command for building production app:

ionic cordova run android --minifycss --minifyjs --optimizejs --aot --prod

(I’ve tried all possible optimization command here

Not necessary as --prod contains all of these.

@niravparsana94

I have used pdfmake plugin for generate reports.

Before adding Report page, startup time was 1.5-2 seconds.

But after adding Report page(with pdfmake plugin), startup time increases to 6.5-7 seconds.

Also my Reports.ts contains very large code, so what i have done after adding Reports page is below:

Commented large code, startup time => 4-5 seconds
Uncomment large code, startup time => 6-7 seconds

You still have to find out if it is only the plugin addition or the reports page.

• Remove the reports page, but load the plugin somewhere. Now you know how much only the plugin adds.
• Do the same with the reports page but without the lines that use the plugin so it doesn’t crash without the plugin. Now you know how much the page itself adds.

For the page itself, lazy loading it might help. It will only be loaded when accessed.
For the plugin, no idea. (I don’t expect that to be the culprit though) Might look for alternatives or maybe do it in the backend if internet connection is available all the time.

[niravparsana94]

Below is timings:

• Remove the reports page, but load the plugin somewhere. Now you know how much only the plugin adds. => startup time - 6-7 seconds

• Do the same with the reports page but without the lines that use the plugin so it doesn’t crash without the plugin. Now you know how much the page itself adds.=> startup time - 1.5-2 seconds

So, it was all plugin issue. Will Lazy loading still work in that case?

Also, I could not find any better plugin for generating pdf in ionic application. and earlier i thought of generating pdf backend but it’s not possible because internet connection may not be available all the time. What should i do now?