How to enable production mode?
AngularAngular 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
};
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.