How to enable production mode?

Angular

Angular Problem Overview


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?

Angular Solutions


Solution 1 - Angular

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.

Solution 2 - Angular

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.

Solution 3 - Angular

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

Solution 4 - Angular

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.

Solution 5 - Angular

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

export const environment = {
  production: true
};

for Angular 2

Solution 6 - Angular

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

enter image description here

Solution 7 - Angular

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

ng build --prod

Solution 8 - Angular

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.

Solution 9 - Angular

In environment.ts file set production to true

export const environment = {
  production: true
};

Solution 10 - Angular

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

Solution 11 - Angular

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

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

Solution 12 - Angular

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.

Solution 13 - Angular

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

Solution 14 - Angular

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

Solution 15 - Angular

Just write: ng s --prod

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

Solution 16 - Angular

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.

Solution 17 - Angular

Just run:

ionic serve --prod

or

ng build --prod

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

Solution 18 - Angular

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

Solution 19 - Angular

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.

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionAngel AngelView Question on Stackoverflow
Solution 1 - AngularSasxaView Answer on Stackoverflow
Solution 2 - AngularMatthias BView Answer on Stackoverflow
Solution 3 - AngularadampaszView Answer on Stackoverflow
Solution 4 - AngularhowserssView Answer on Stackoverflow
Solution 5 - AngularAlexander K. J. SchmidtView Answer on Stackoverflow
Solution 6 - AngularOsama khodrogView Answer on Stackoverflow
Solution 7 - AngularMahmoudi MohamedAmineView Answer on Stackoverflow
Solution 8 - AngularLeOn - Han LiView Answer on Stackoverflow
Solution 9 - AngularVinodh RamView Answer on Stackoverflow
Solution 10 - AngularWaqas SaleemView Answer on Stackoverflow
Solution 11 - AngularSamudrala RamuView Answer on Stackoverflow
Solution 12 - AngularPanagiotis BougioukosView Answer on Stackoverflow
Solution 13 - AngularRyan CrewsView Answer on Stackoverflow
Solution 14 - AngularNitinSinghView Answer on Stackoverflow
Solution 15 - AngularsimiView Answer on Stackoverflow
Solution 16 - AngularPraveen Patel GView Answer on Stackoverflow
Solution 17 - AngularDavid BatunView Answer on Stackoverflow
Solution 18 - AngularGyromiteView Answer on Stackoverflow
Solution 19 - AngularPrassanth NicholasView Answer on Stackoverflow