Ionic Plugins are not being installed when built by --prod flag

Since boot time of my application reached to 12 seconds on android, i have searched ways to faster this process. I found the command with --prod flag which is like “ionic cordova build android --prod” .

Building or running with this command opens the app so quick but it does not install any of the plugins such as SQLite, File. Also even tried to enableProdMode() in app.main.ts but did not work too.

The version of ionic-app-scripts is 2.0.2,
The version of Ionic framework itself is 3.5.3.

Can you help me finding ways to increase the speed of booting ?

What is the output of cordova plugin ?

--prod takes care of this, you don’t have to do this manually.

How do you call your plugins? Do you wait for platform.ready to make sure it acutally loaded everything?

This is my app.component.ts, thus i have to handle some synchronization task in the beginning of the application.

import { Component } from '@angular/core';
import { Platform } from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
import { User } from '../models/user';
import { Cart } from '../models/cart';
import { LoginPage } from '../pages/login/login';
import { RequestProvider } from '../providers/request/request';
import { DbProvider } from '../providers/db/db';
import { LoadingController } from 'ionic-angular';
import 'rxjs/add/operator/map';

@Component({
  templateUrl: 'app.html'
})
export class MyApp {
  resSync: any;
  getData: any;
  loader: any;
  loader2: any;
  paramHour : any = 2;
  rootPage: any;

  constructor(platform: Platform, public loadingCtrl: LoadingController, statusBar: StatusBar, splashScreen: SplashScreen, public RequestObject: RequestProvider, public DbProviderObject: DbProvider) {
    platform.ready().then(() => {
      this.rootPage = LoginPage;
      this.loader = this.loadingCtrl.create({
        content: 'Ortamlar indiriliyor...'
      })
      this.loader2 = this.loadingCtrl.create({
        content: 'Lütfen Bekleyiniz...'
      })

      this.loader2.present().then(() => {
        console.log("show");
      })
      if(!localStorage.getItem('syncParam')){
        localStorage.setItem('syncParam',this.paramHour);
        console.log(localStorage.getItem('syncParam'));
      }
      else{
        console.log(localStorage.getItem('syncParam'));
      }

      
      setTimeout(() => {
        this.loader2.dismiss().then(() => {
          console.log("hide");
        })
        
        DbProviderObject.retrieve("SELECT * FROM CLASTS")
          .then((res) => {
            if (res == null) {
              console.log("Senkronizasyon var");
              RequestObject.Sync();
            }
            else {
              this.resSync = res;
              var today = new Date();
              console.log("Gün : " + today.getDate() + " Saat : " + today.getHours() + " Dakika : " + today.getMinutes());
              console.log("Gün : " + this.resSync.rows.item(0).DAY + " Saat : " + this.resSync.rows.item(0).HOUR + " Dakika : " + this.resSync.rows.item(0).MINUTE);
              if (this.resSync.rows.item(0).DAY == today.getDate() && ((this.resSync.rows.item(0).HOUR + 2) >= today.getHours())) {
                console.log("Senkronizasyon Yok");
                alert("Bilgileriniz güncel.Giriş yapıp devam edebilirsiniz.");
              }
              else if (this.resSync.rows.item(0).DAY != today.getDate() || (this.resSync.rows.item(0).HOUR + 2) < today.getHours()) {
                console.log("Senkronizasyon var");
                RequestObject.Sync();
              }
              else {
                console.log("burdayım");
                console.log(res);
              }
            }

          })
          .catch(e => console.log(e));
          
      }, 7000);


      
      // 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();
    });
  }

}

E:\cil>cordova plugin
cordova-plugin-app-event 1.2.0 "Application Events"
cordova-plugin-compat 1.0.0 "Compat"
cordova-plugin-console 1.0.5 "Console"
cordova-plugin-device 1.1.4 "Device"
cordova-plugin-file 4.3.3 "File"
cordova-plugin-network-information 1.3.3 "Network Information"
cordova-plugin-splashscreen 4.0.3 "Splashscreen"
cordova-plugin-statusbar 2.2.2 "StatusBar"
cordova-plugin-whitelist 1.3.1 "Whitelist"
cordova-sqlite-storage 2.0.4 "Cordova sqlite storage plugin"
de.appplant.cordova.plugin.local-notification 0.8.5 "LocalNotification"
ionic-plugin-keyboard 2.2.1 "Keyboard"
phonegap-plugin-barcodescanner 6.0.8 “BarcodeScanner”

Btw, while using enableProdMode() in app.main.ts and not using --prod command while ionic cordova build android or ionic cordova run android. There is not any news from the error but i guess there is not any decrease in time of booting

I’m not sure you should do this. Try building with --prod and not enabling ProdMode inside your code.

1 Like

I cannot run with --prod. I mean i have the error in the question header. I have tried build with --prod and run but the result was the same, annoying error btw i was not using enableProdMode();

Do i have any wrong code mentality in my app.component.ts ? I ll be so happy if you have any advice for me tho.

What’s the error? The Angular compiler is more strict than Ionic Serve, so there are a lot of TypeScript details you might need to fix. But once you fix those errors, you’ll have something nice.

Firstly, thanks for your effort, Aaron. My error is in the picture which is in the question above. It does not install the plugins it says when i run or build with --prod .

That looks like the screenshot of a browser console. Are you saying you have no build errors when you build?

Exactly. No problem on building with script --prod. The picture from chrome inspect

And you get those errors when running on a device? It won’t work if you’re just using Ionic Serve on a desktop.

1 Like

I am running app on android simulator,Nexus5 and monitoring the errors in chrome inspect.

I don’t know anything about Nexus5. Have you put an apk on an Android phone? You could just email it to yourself and install if your phone is in dev mode. Might want to see what happens.

1 Like

Then you actually have no problem building, and the plugins are probably being installed, but your code has problems accessing the plugins!

How to debug this then:

Look into the plugin.xml of one of these plugins that don’t work, look for the “clobbers” value. This is the global JS object it creates. Type that into the console manually. Does it return something or error? If it returns something, your code is not waiting until the plugins are actually loaded.

1 Like

Firstly, i removed enableProdMode() from app.main.ts then i built it with ionic cordova build android --prod. Then i used ionic cordova run android on real device connected via USB over ADB. No good news about increasing booting speed still the same. If i make it run with “ionic cordova run android --prod”, same error as in the chrome inspect console above in question post.

I have this error only on my two plugins, i understand your point. Can you describe a little bit more how i can detect the error if there is by using clobber value ?

I got your point and tried your method . this is my return :slight_smile:
SQLite returns an empty object like : Object { }
The other broken plugin which ionic native called “File” returns these :

File has some different clobbers i tried one of them and it returned some kind of a function.

Not really, follow what I wrote above.

My “File” plugin seems to be installed cause its clobbers returns function

1 Like