Development and Production builds

The Angular CLI supports producing both development and production using the build command:

ng build

The format of the command is:

ng build <options...>

By default it is running in development mode (an equivalent of ng build -dev) and produces output to the dist/ folder. You will get bundles together with source maps for better debugging:

FileSize
favicon.ico5430
index.html613
inline.bundle.js5764
inline.bundle.js.map5824
main.bundle.js6539
main.bundle.js.map3817
polyfills.bundle.js169209
polyfills.bundle.js.map204535
styles.bundle.js10039
styles.bundle.js.map13372
vendor.bundle.js2884505
vendor.bundle.js.map3081499

For production purposes you will want using the following command:

ng build -prod

Which is an equivalent of the:

ng build --target=production

This will give you much smaller output:

FileSize
favicon.ico5430
inline.d72284a6a83444350a39.bundle.js1460
main.e088c8ce83e51568eb21.bundle.js12163
polyfills.f52c146b4f7d1751829e.bundle.js58138
styles.d41d8cd98f00b204e980.bundle.css0
vendor.a2da17b9c49cdce7678a.bundle.js362975

Please note that styles bundle will be empty because by default newly generated app has src/styles.css file empty.

The ng tool removes dist folder between the builds so you should not worry about files left from previous builds and modes.

The content of the dist folder is everything you need to deploy your application to the remote server. You can also use any web server of your choice to run the application in production.

For example:

  • Nginx server
  • Tomcat server
  • IIS server
  • and many others

In addition, you can deploy your application to any static pages host, like:

It is still possible to use Angular CLI and embedded development server to test production builds. You can use the following command to build the app in production mode and then run and open default browser to check it:

ng serve --prod --open