Angular 2 with CLI - build for production

Question

I have freshly installed angular-cli 1.0.0.beta.17 (latest one), start new project, able to serve project on port 4200 with no problems - just standard \"app works!\" message.

Answer 1

There are a lot of commands to build the angular application to production mode using angular cli.

ng build --env=prod

Once you will execute this command on cmd dist default folder will create that will contain all the minified files related to prod build, but it will not set the base path in the index.html. To change in index.html either go and do the manual change like adding the (.) ie.

<base href="./">

You can also pass the parameter while building the code in prod mode using angular/CLI command.

ng build --base-href=./ --env=prod

There are other commands as well to build like passing the AOT and build-optimizer ( to reduce bundle sizes).

ng build --prod --build-optimizer

If you want to change the default folder name (dist) after build then you can change the outDir value in the .angular-cli.json.

Answer 2

You must update latest version angular-cli, typescript. If you use command:

ng build --prod --aot=false

Your project compile JIT compilation and must be work if you use angular-cli.

if you want build with command

ng build --prod --aot=true

then it be AOT compilation and you must update main.ts file into:

import { enableProdMode } from '@angular/core';
import { platformBrowser }    from '@angular/platform-browser';

import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

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

platformBrowser().bootstrapModuleFactory(AppModule);

Answer 3

With the cli version (1.0.1) use :

ng build --prod

This will give you the dist folder with the index.html and all the bundled js file ready for production.