enable production mode in angular 2

Question

I have been creating web application using Angular 2 and Firebase, I want to enable production mode.

main.ts

if (environment.production) {
  enableProdMode();
}

environment.ts

export const environment = {
  production: true
};

environment.prod.ts

export const environment = {
  production: true
};

Then I'm tried ng build -prod; ng serve ,but still not working.

Thanks in advance.

Answer 1

ng build --prod will create build artifacts in the /dist folder - you have to put those files on a different web server (i.e. you don't use ng serve after that).

If you just want to run your app using ng serve but using production mode, then use:

ng serve --prod

Edit

I don't seem to be doing a good job of explaining this. Your request is to "enable production mode". You have two ways of doing that, depending on what you're trying to do.

If you want to use the angular-cli development server to run your app in production mode as a means of testing to see if production mode works properly, then use:

ng serve --prod

If, however, you are ready to deploy your app to a production web server, then it's a two step process:

1. generate the production-ready version of your app using: ng build --prod

2. copy the output of the /dist folder onto your production web server

Note that I don't do both - i use either ng build or ng serve , depending on what I'm trying to accomplish.

Answer 2

ng serve --prod didn't worked for me.

This worked btw 😊

ng serve --configuration=production

it creates a test production server which works same as it works on the deployed one. I tried this testing with environment.js (all other solutions didn't worked for me)

You can follow this (Becoming an Angular Environmentalist) article to learn more about Angular environments

Answer 3

You should try again with ng run build --prod or npm run build as for me, in my package.json file, I setting script like that

"scripts":{
 "ng": "ng",
 "publish": "ng build --prod",
 "start": "ng serve --host 0.0.0.0 --port 4200",
 "hmr": "ng serve --host 0.0.0.0 --port 4200 4201 --hmr -e=hmr",
 "test": "ng test",
 "pree2e": "webdriver-manager update --standalone false --gecko false",
 "e2e": "protractor"},..

and then so, when I want to build(publish) my angular project, I used npm run publish command. If you want to change "build" instead of "publish", you must use like "npm run build" It will OK.

Answer 4

I have observed this in angular-cli 1.0.0-beta.28.3. The dist disappears on ng-serve. If you want to keep the build, try ng build --output-path=last-build/ and have a look at this issue.

But the point is you don't need to do a ng serve --prod after you have created the build. As @snorkpete is saying, please copy the dist folder after creating the build to your web server. And your web server will take care of running the app. Remeber, you will have to create a virtual host for this. But if you just want to run it on your local machine and want the live webpack, Just do ng serve --prod, a live webpack has nothing to do with the dist you have.

Answer 5

For enabling your angular2 app to production mode:

open your angular appfolder and open main.ts and in main.ts there will be

import {environment} './environment/environment'

Hust add .prod in the last environment written:

import {environment} './environment/environment.prod'