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 w
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.
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.
Go to src/enviroments/enviroments.ts
and enable the production mode
export const environment = {
production: true
};
for Angular 2
In environment.ts file set production to true
export const environment = {
production: true
};
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();