How to enable production mode?

Question

I was reading related questions and I found this one, but my question is how can I switch from development to production mode. There are some differences between the modes which are pointed out here.

In the console I can see ....Call enableProdMode() to enable the production mode. However, I'm not sure instance of which type should I call that method on.

Can somebody answer this question?

I found it crazy passing configuration using Webpack 2+ Angular2 and Typescript, created a simple solution: https://github.com/Sweetog/yet-another-angular2-boilerplate — Brian Ogden, Feb 24 '17 at 23:12

score 239 · Accepted Answer · edited May 27 '16 at 18:55

239

You enable it by importing and executing the function (before calling bootstrap):

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

enableProdMode();
bootstrap(....);

But this error is indicator that something is wrong with your bindings, so you shouldn't just dismiss it, but try to figure out why it's happening.

edited May 27 '16 at 18:55

Mark Rajcok

362,217
114
495
492

answered Mar 01 '16 at 11:06

Sasxa

40,334
16
88
102

How to enableProdMode() if you are not using typescript? If I just call this method before ng.platform.browser.bootstrap(...) I get this error: enableProdMode is not defined – Daniel Dudas Mar 01 '16 at 12:27
2

@DanielDudas I don't use es5, but try `ng.core.enableProdMode()` – Sasxa Mar 01 '16 at 12:36
3

I believe "angular2/core" is now "@angular/core". See my answer below. – adampasz May 14 '16 at 23:16
I am using Ionic2. In what file is this bootstrap called? When I generate a sample app `ionic start test sidemenu --v2 --ts` I see `app.ts` but where is this bootstrap function called? – A.W. May 24 '16 at 10:44
Found it using Ionic2. Edited `app.ts` imported `import {enableProdMode} from '@angular/core'` And put `enableProdMode();` before `@App` – A.W. May 24 '16 at 10:57
2

I did the same but I'm getting an exception like "Cannot enable prod mode after platform setup". Could anyone help me in getting this resolved? – Gowtham Mar 27 '17 at 13:01
using `angular-cli` execute `ng build` with `--env=prod` – Konstantin May 24 '17 at 07:47
How to do this using node `require`? – Mohammad Kermani Sep 04 '17 at 13:15
1

Can you elaborate regarding the binding issue? – Sharan Mohandas Oct 30 '17 at 06:53
Is `ng build --prod` the same as doing `ng build --env=prod`? – Ennio Nov 22 '17 at 16:32
How would i use this with an individual test that has different behavior depending on whether it's run with dev or prod? – Jeremy Moritz Jul 17 '18 at 19:24
@Sasxa I didn't realize this was indicating that there was something wrong with bindings. I thought everyone would see this message when running in dev mode. Can you elaborate? – Patrick Dec 28 '22 at 19:56

score 114 · Answer 2 · edited Oct 15 '18 at 14:30

114

The best way to enable the production mode for an Angular 2 application, is to use angular-cli and build the application with ng build --prod. This will build the application with production profile. Using angular-cli has the benefit of being able to use development mode using ng serve or ng build while developing without altering the code all the time.

edited Oct 15 '18 at 14:30

fida1989

3,234
1
27
30

answered Sep 17 '16 at 19:41

Matthias B

5,523
3
45
47

8

I'm using Angular 6 and it's ng build --prod to build in prod mode. Just putting this here for any newcomers visiting this page. – Verbose Aug 11 '18 at 03:14
I think that _build --prod_ has been implemented keeping isDevMode and enableProdMode in mind. This answer should be marked as the answer – bubi Feb 13 '19 at 07:12

score 66 · Answer 3 · answered Sep 24 '16 at 16:25

66

When I built a new project using angular-cli. A file was included called environment.ts. Inside this file is a variable like so.

export const environment = {
  production: true
};

Then in main.ts you have this.

import './polyfills.ts';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { environment } from './environments/environment';
import { AppModule } from './app/';

if (environment.production) {
  enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule);

You could add this to a non angular-cli project, I would assume, because enableProdMode() is being imported from @angular/core.

answered Sep 24 '16 at 16:25

howserss

1,139
1
8
12

How does this work for non-prod build? I assume in that case environment.ts is ignored, so don't you get a tsc compile error when trying to import the module? – llasarov Dec 08 '16 at 08:31
@llasarov the environment.ts is just behaving like a configuration file, in which you can turn on/off production mode. The main.ts just calls the enableProdMode if its true, so this can be done without any specific build process. You can also do selecting logging here, by checking if the logMode is debug then your custom logger service doing a detailed StackTrace else just logging a one liner – NitinSingh Jun 20 '17 at 20:01

score 63 · Answer 4 · edited Sep 28 '17 at 17:12

63

This worked for me, using the latest release of Angular 2 (2.0.0-rc.1):

main.ts

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

enableProdMode();
bootstrap(....);

Here is the function reference from their docs: https://angular.io/api/core/enableProdMode

edited Sep 28 '17 at 17:12

Pankaj Parkar

134,766
23
234
299

answered May 14 '16 at 23:15

adampasz

1,065
9
10

1

new link: https://angular.io/docs/ts/latest/api/core/index/enableProdMode-function.html – emp Jul 13 '16 at 13:13
3

@emp I'm surprised the official Angular documentation for `enableProdMode` doesn't tell you *where* you're supposed to call it. – Dai Feb 26 '18 at 22:58

score 15 · Answer 5 · answered Jun 08 '17 at 07:28

15

Go to src/enviroments/enviroments.ts and enable the production mode

export const environment = {
  production: true
};

for Angular 2

answered Jun 08 '17 at 07:28

Alex

927
1
12
18

score 11 · Answer 6 · edited Aug 08 '18 at 11:52

11

To enable production mode in angular 6.X.X Just go to environment file

Like this path

Your path: project>\src\environments\environment.ts

Change production: false from :

export const environment = {
  production: false
};

To

export const environment = {
  production: true
};

edited Aug 08 '18 at 11:52

4b0

21,981
30
95
142

answered Aug 08 '18 at 11:47

Osama khodroj

1,230
2
23
29

Mahmoudi MohamedAmine · Answer 7 · 2020-06-24T12:27:37.440

10

ng build --prod replaces environment.ts with environment.prod.ts

ng build --prod

edited Jun 24 '20 at 12:27

answered Apr 22 '19 at 14:04

Mahmoudi MohamedAmine

230
1
3
13

This is deprecated now. – Melroy van den Berg May 19 '23 at 01:03

score 9 · Answer 8 · answered Nov 22 '17 at 21:11

Most of the time prod mode is not needed during development time. So our workaround is to only enable it when it is NOT localhost.

In your browsers' main.ts where you define your root AppModule:

const isLocal: boolean = /localhost/.test(document.location.host);
!isLocal && enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);

The isLocal can also be used for other purposes like enableTracing for the RouterModule for better debugging stack trace during dev phase.

score 8 · Answer 9 · answered Jun 09 '19 at 11:54

8

In environment.ts file set production to true

export const environment = {
  production: true
};

answered Jun 09 '19 at 11:54

Vinodh Ram

709
1
9
22

Really EZ :P TY for...! – Carlos Galeano Dec 02 '19 at 08:11

Panagiotis Bougioukos · Answer 10 · 2021-09-01T15:25:25.817

8

For Angular v12 and onwards ng build --prod has been deprecated.

You should now build it using ng build --configuration=production where again as before

the src/environments/environment.ts file is replaced with the target-specific version of the file, src/environments/environment.prod.ts.

edited Sep 01 '21 at 15:25

answered Sep 01 '21 at 14:23

Panagiotis Bougioukos

15,955
2
30
47

score 6 · Answer 11 · answered Dec 28 '17 at 16:26

6

When ng build command is used it overwrite environment.ts file

By default when ng build command is used it set dev environment

In order to use production environment, use following command ng build --env=prod

This will enable production mode and automatically update environment.ts file

answered Dec 28 '17 at 16:26

Waqas Saleem

61
1
1

1

This was changed in Angular CLI 6 to `ng build --configuration=production` (as default using the CLI-generated angular.json file). – slasky Oct 18 '18 at 02:07

score 5 · Answer 12 · answered Jun 22 '18 at 10:46

5

you can use in your app.ts || main.ts file

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

answered Jun 22 '18 at 10:46

Samudrala Ramu

2,088
1
15
36

score 4 · Answer 13 · answered Sep 26 '16 at 19:56

For those doing the upgrade path without also switching to TypeScript use:

ng.core.enableProdMode()

For me (in javascript) this looks like:

var upgradeAdapter = new ng.upgrade.UpgradeAdapter();
ng.core.enableProdMode()
upgradeAdapter.bootstrap(document.body, ['fooApp']);

score 4 · Answer 14 · answered Jun 21 '17 at 17:44

4

You don't need any environment.ts or such file to be provided by your seed project. Just have a configuration.ts and add all such entries which require runtime decision (example:- logging configuration and urls). This will fit in any design structure and also help in future

configuration.ts

export class Configuration {

   isInProductionMode : bool = true;

   // other configuration
   serviceUrl : string = "http://myserver/myservice.svc";
   logFileName : string = "...";
}

// Now use in your startup code (main.ts or equivalent as per the seed project design

import { Configuration } from './configuration';
import { enableProdMode } from '@angular/core';
....
if (Configuration.isInProductionMode)
    enableProdMode();

answered Jun 21 '17 at 17:44

NitinSingh

2,029
1
15
33

1

how do you differentiate prod/dev with that `isInProductionMode` to be true/false? in the build time? – LeOn - Han Li Nov 22 '17 at 14:42
Usually as a GULP parameter or equivalent – NitinSingh Dec 06 '17 at 11:31
The JSON has entry as following: -"environmentSource": "environments/environment.ts", "environments": { "dev": "environments/environment.ts", "prod": "environments/environment.prod.ts" } – NitinSingh Dec 06 '17 at 11:33

score 3 · Answer 15 · answered Jan 13 '23 at 15:36

3

As of Angular 15 it is no longer required to call the enableProdMode() function. Production mode is rather automatically selected by building with the optimization parameter (see https://angular.io/api/core/enableProdMode#description)

answered Jan 13 '23 at 15:36

Atgoogat

66
4

score 2 · Answer 16 · answered May 10 '21 at 09:02

2

Just write: ng s --prod

This will serve the project as if you are on prod mode

answered May 10 '21 at 09:02

simi

173
2
7

score 1 · Answer 17 · answered Jan 07 '21 at 21:52

In Angular 10 :

Find the file path ./environments/environment.ts under your 'app' and set 'production' to 'true'.

Before change:

export const environment = {
  production: false
};

After change:

export const environment = {
  production: true
};

I hope it helps you.

score 1 · Answer 18 · edited Aug 20 '21 at 22:59

1

Just run:

ionic serve --prod

or

ng build --prod

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

edited Aug 20 '21 at 22:59

Mario Petrovic

7,500
14
42
62

answered Aug 17 '21 at 19:44

David Batun

21
2

score 0 · Answer 19 · answered Jun 02 '17 at 20:24

My Angular 2 project doesn't have the "main.ts" file mentioned other answers, but it does have a "boot.ts" file, which seems to be about the same thing. (The difference is probably due to different versions of Angular.)

Adding these two lines after the last import directive in "boot.ts" worked for me:

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

score 0 · Answer 20 · answered Dec 08 '21 at 19:41

0

before deployment always build in prod mode. this message comes when it the build is done in development mode. in development mode anyone can view the entire angular source code using any browser.

answered Dec 08 '21 at 19:41

Prassanth Nicholas

11

Welcome to Stack Overflow. Are you sure this answers the question? OP appears to be asking _how_ do do this, not whether they should. Please read [answer]. – ChrisGPT was on strike Dec 08 '21 at 21:19

score 0 · Answer 21 · answered Oct 31 '22 at 19:06

0

in your file:

src => environment => environment.ts

and you change (production value from false to true) this:

export const environment = { production: false };

to that:

export const environment = { production: true };

answered Oct 31 '22 at 19:06

Mounir bkr

1,069
6
6

Lightz · Answer 22 · 2023-05-02T10:37:51.770

If you wish to run angular in production or development mode with single ng serve command
Read on...

Step 1:

$ ng generate environments

This command generates these files;

src\environments\environment.ts
src\environments\environment.prod.ts
src\environments\environment.development.ts

Step 2:
Edit angular.json (found in same level as package.json of your project)
Add following lines in projects>architect>build>configurations>production:

"fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],

You may notice i skip the development part, because this is already added, when you run 'ng generate environments'.

Step 3:
In your component class

import { environment } from 'src/environments/environment';

And, also add

navBgColor = environment.bgColor;

Run ng serve commands

For Production
ng serve -c production --open

For Development
ng serve -c development --open

Logic explained:
For 'Development'
environment.ts will be replaced by environment.development.ts
For 'Production'
environment.ts will be replaced by environment.prod.ts
Note that, to see the difference, the value 'bgColor' has to be different, between environment.prod.ts and environment.development.ts.

Example:

environment.prod.ts:

export const environment = {
  bgColor: 'red',
  production: true
};

environment.development.ts:

export const environment = {
  bgColor: 'cyan',
  production: false
};

score 0 · Answer 23 · answered May 08 '23 at 00:13

I think from angular v15 and above, you don't necessarily need to specify production or development mode because it automatically has a default fallback depending on whether you are running ng build or ng serve.

"build": {
      "builder": "@angular-devkit/build-angular:browser",
      "options": {
        "outputPath": "dist/tasky",
        "index": "src/index.html",
        "main": "src/main.ts",
        "polyfills": [
          "zone.js"
        ],
        "tsConfig": "tsconfig.app.json",
        "inlineStyleLanguage": "scss",
        "assets": [
          "src/favicon.ico",
          "src/assets"
        ],
        "styles": [
          "src/styles.scss"
        ],
        "scripts": []
      },
      "configurations": {
        "production": {
          "budgets": [
            {
              "type": "initial",
              "maximumWarning": "500kb",
              "maximumError": "1mb"
            },
            {
              "type": "anyComponentStyle",
              "maximumWarning": "2kb",
              "maximumError": "4kb"
            }
          ],
          "outputHashing": "all"
        },
        "development": {
          "buildOptimizer": false,
          "optimization": false,
          "vendorChunk": true,
          "extractLicenses": false,
          "sourceMap": true,
          "namedChunks": true
        }
      },
      "defaultConfiguration": "production"
    },
    "serve": {
      "builder": "@angular-devkit/build-angular:dev-server",
      "configurations": {
        "production": {
          "browserTarget": "tasky:build:production"
        },
        "development": {
          "browserTarget": "tasky:build:development"
        }
      },
      "defaultConfiguration": "development"
    },

this is a sample code of the build and serve section in the angular.json file. clearly in the serve and build objects the is a last defaultConfiguration property which is either set to production or development. this tells us that to run your app in dev mode run ng serve and to run in prod mode run ng build. but regardless you can still serve in prod mode by setting the --configuration flag to prod mode and same goes to build.

How to enable production mode?

23 Answers23

Linked