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?

Answer 1

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.

Answer 2

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.

Answer 3

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

Answer 4

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.

Answer 5

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

export const environment = {
  production: true
};

for Angular 2

Answer 6

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
};

Answer 7

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

ng build --prod

Answer 8

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.

Answer 9

In environment.ts file set production to true

export const environment = {
  production: true
};

Answer 10

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

Answer 11

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

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

Answer 12

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.

Answer 13

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']);

Answer 14

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

Answer 15

Just write: ng s --prod

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

Answer 16

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.

Answer 17

Just run:

ionic serve --prod

or

ng build --prod

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

Answer 18

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

Answer 19

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.