[angular] How to enable production mode?

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?

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

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

ng build --prod

In environment.ts file set production to true

export const environment = {
  production: true
};

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

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.

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

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

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

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

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

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

export const environment = {
  production: true
};

for Angular 2

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

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.

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.

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.