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

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

Answer 2

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 enhanced-resolve@3.3.0

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.

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

Answer 4

Whether Aot is or is not implemented.

If Aot is implemented :

ng build --prod

If Aot is not implemented :

ng build --prod --aot=false

Answer 5

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

Answer 6

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 enhanced-resolve@3.3.0

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