enableProdMode() question

Ionic Framework ionic-v3
1

I’m trying to understand how angular 2 environment works in ionic 2. There is no call to enableProdMode() in ionic 2 app so I suppose angular 2 would work in dev mode. The question is when the app is built, would the app automatically get built in prod mode or it has to be managed by developer?

I also checked ionic help serve and ionic help build there isn’t an option for environment.

My concern is that I don’t want my app gets built in dev mode, that may impose a performance loss big or small.

Thanks.

2

By default it appears the app is built in dev mode. You can see the following message in the console when you run “ionic serve”

Angular 2 is running in the development mode. Call enableProdMode() to enable the production mode.

To enable prod mode, I configured the following in app.ts:

import {enableProdMode} from '@angular/core';
enableProdMode();

After doing so, I saw a huge difference in performance when building the app on the device.

Hope that helps.

4

Thanks @Kimonio, that’s very good to know.
I’m looking to implement something like

if (in_a_device) {
  enableProdMode()
}

Still trying to figure out a robust way to determine in_a_device.

5

May be this could work?

            if (this.platform.is('ios') || this.platform.is('android')) {
                enableProdMode();
            } else {
                // something else
            }

By the way, I’ve read in beta8 docs that there is now a prodMode config parameter that can be included in the ionicBootstrap

6

My App is on beta.8.

Doing

export class MyApp {
  rootPage: any = HomePage;

  constructor(platform: Platform) {
    if (platform.is('ios')
      || platform.is('android')
      || platform.is('windows')) {
      enableProdMode();
    }
  }

Results in

ORIGINAL EXCEPTION: Cannot enable prod mode after platform setup.

ionicBootstrap(MyApp, [], {prodMode: true}); works of course, but it’d better to activate prod mode only when the app is running on a device since dev mode can be useful during development.

Angular 2’s cli can trigger prod mode from the command line

ng serve -prod
vs.
ng serve -dev

I was hoping similar option for

ionic serve
ionic run
ionic build 
etc.
7

Here is what I do now

let prodMode: boolean = !!window.cordova;

ionicBootstrap(MyApp, [], {prodMode: prodMode});

works.

8 
let prodMode: boolean = !!window.cordova;

This makes typescript complain: Error TS2339: Property ‘cordova’ does not exist on type ‘Window’

let prodMode: boolean = window.hasOwnProperty('cordova');

This seems to work while placating typescript.

9

ionic serve --prod
or
ionic build --prod

is exactly what I would expect like you said it is the way angular-cli is doing it. Checking the device is a workaround that helps for most but not all cases.

+1 for that.

10

Feel like I’m going crazy. ionic serve --prod still gives me false for environment.production. In the console it also says Angular is running in the development mode. Call enableProdMode() to enable the production mode.

11

I think that with “serve” its always development mode.
Try with build or run.

12

Thanks for the response. I haven’t played around with my app on the iOS simulators or on an actual device yet. Main reason being the iOS simulator makes my animations (the default ones, like opening a modal) really slow and I haven’t figured out how to view the console logs yet. Strange thing is the comment that used ionic serve had 4 votes, so I thought it was just me.

13

run “ionic serve --prod” still give me “Angular is running in the development mode. Call enableProdMode() to enable the production mode.”.
Is it need to run “enableProdMode();” manually?

14

I believe because of all the whining about build times, ionic serve refuses to build in prod mode, no matter how much you try to convince it to.

15


Just found an article, add two line in main.ts to enable it into production mode.

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import {enableProdMode} from '@angular/core';
import { AppModule } from './app.module';

// this is the magic wand
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
16

Please disregard the previous post, it is wrong:

17

Honestly, @rapropos, you just kill me every time with your comments. But thi sis the best ever!!!