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.

6 Likes
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 Likes
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.

1 Like
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

3 Likes
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.
4 Likes
7

Here is what I do now

let prodMode: boolean = !!window.cordova;

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

works.

4 Likes
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.

1 Like
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.

6 Likes
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.

2 Likes
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.

1 Like
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);
1 Like
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!!!