Angular 2 with CLI - build for production
Updated for Angular v6+
# Prod - these are equivalentng build --configuration=productionng build --c=productionng build --prod=true# Dev - and so are theseng build --configuration=developmentng build --c=developmentng build --prod=falseng 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 equivalentng build --target=production --environment=prodng build --prod --env=prodng build --prod# Dev and so are theseng build --target=development --environment=devng build --dev --env=devng build --devng 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 theproduction
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
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.22Time: 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