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.

However when I try to build for production this empty and generic application by using command ng build --prod I do not have main.*.js file created at all and have a few screens of warnings like:

• Dropping unused function...
• Site effects in initialization...
• etc

This is a brand new empty project - I did not have a chance to break anything yet...

How to build production version ?

Pasteurization

does "ng serve --prod" work? – Neolithic

I had no idea about this --prod flag, I thought it would be enough to call the enable production function. This speeded up my loadtime from 8-12 seconds to 3-4 seconds. – Frostwork

Answer 1

Updated for Angular v16+

# Prod - these are equivalent
ng build --configuration=production
ng build --c=production
ng build 

# Dev - and so are these
ng build --configuration=development
ng build --c=development

More flag settings here https://angular.io/cli/build

---

Legacy code below this line

---

Updated for Angular v6+

# Prod - these are equivalent
ng build --configuration=production
ng build --c=production
ng build --prod=true

# Dev - and so are these
ng build --configuration=development
ng build --c=development
ng build --prod=false
ng build

---

---

Per Angular-cli's github wiki v2+, these are the most common ways to initiate a dev and production build

# Prod these are equivalent
ng build --target=production --environment=prod
ng build --prod --env=prod
ng build --prod

# Dev and so are these
ng build --target=development --environment=dev
ng build --dev --env=dev
ng build --dev
ng build

There are different default flags that will affect --dev vs --prod builds.

Flag                 --dev      --prod
--aot                false      true
--environment        dev        prod
--output-hashing     media      all
--sourcemaps         true       false
--extract-css        false      true

--prod also sets the following non-flaggable settings:

• Adds service worker if configured in .angular-cli.json.
• Replaces process.env.NODE_ENV in modules with the production value (this is needed for some libraries, like react).
• Runs UglifyJS on the code.

---

Original:

I need to do some troubleshooting in order to get AOT working. When I ran:

ng build --prod --aot=false

I would get will return a error similar to

Module not found: Error: Can't resolve './$$_gendir/app/app.module.ngfactory'

Originally, I had to do some project refactoring to get AOT to work. However, they may be a fix if you are encountering this error. Try

npm i [email protected]

https://github.com/angular/angular-cli/issues/7113

Baldpate

it seems in angular 6 later I have to use configuration flag right? ng build --configuration=production, and set flags-file replacements here? – Apopemptic

Yes they changed several build flags since v2. The latest version of angular build flags can be found here. angular.io/cli/build – Baldpate

Answer 2

Try using: ng build --target=production This should work.

Passel

Answer 3

try this

 ng build --env=prod

The build system defaults to the dev environment which uses environment.ts, but if you do ng build --env=prod then environment.prod.ts will be used instead.

sample result if your project is new angular cli app.

 10% building mod3439ms building modules                                                                     1ms add01564ms 917ms asset45ms emittingHash: 9216e76d6f10637c945c                  
Version: webpack 2.1.0-beta.22
Time: 6358ms
            Asset       Size  Chunks             Chunk Names
   main.bundle.js     2.6 MB    0, 2  [emitted]  main
 styles.bundle.js    10.2 kB    1, 2  [emitted]  styles
        inline.js    5.53 kB       2  [emitted]  inline
         main.map    2.61 MB    0, 2  [emitted]  main
       styles.map    14.2 kB    1, 2  [emitted]  styles
       inline.map    5.59 kB       2  [emitted]  inline
       index.html  482 bytes          [emitted]  
assets/.npmignore    0 bytes          [emitted]  
chunk    {0} main.bundle.js, main.map (main) 2.06 MB {1} [initial] [rendered]
chunk    {1} styles.bundle.js, styles.map (styles) 9.96 kB {2} [initial] [rendered]
chunk    {2} inline.js, inline.map (inline) 0 bytes [entry] [rendered]
Child html-webpack-plugin for "index.html":
         Asset     Size  Chunks       Chunk Names
    index.html  2.82 kB       0       
    chunk    {0} index.html 350 bytes [entry] [rendered]

Done and it's under /dist unless you have changed outDir in angular-cli.json

Haply

It is doing work without comments - right - however this is not production build - it does not minified files - main.bunde.js has over 2 MB and is just bundle... – Pasteurization

Answer 4

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.

Deason

Answer 5

Whether Aot is or is not implemented.

If Aot is implemented :

ng build --prod

If Aot is not implemented :

ng build --prod --aot=false

Disappear

Answer 6

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

Fermium

Answer 7

You want the AOT, which is implied by the use of the -prod switch. Unfortunately, when Angular CLI itself breaks, the error messages are not helpful. This is how I solved it:

npm install [email protected]

I found the solution a long, long way down this page: https://github.com/angular/angular-cli/issues/7113

I've seen some mention that updating Angular CLI version to at least 1.2.6. gets around the problem as well, but haven't tested it yet.

Kochi

Answer 8

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.

Rockweed

Answer 9

These are uglify js warnings either from your java-script source code or from the third party libraries you are using in your project.For now you can ignore them.

Angular cli team is working on suppressing this for the prod build https://github.com/angular/angular-cli/pull/1609

Hofer