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 ?

Solution 1

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

More flag settings here

https://angular.io/cli/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.

---

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

Solution 2

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

Solution 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.

Solution 4

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

Solution 5

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

View more solutions