How to bundle an Angular app for production

Pat M picture Pat M · Jun 4, 2016 · Viewed 223k times · Source

What is the best method to bundle Angular (version 2, 4, 6, ...) for production on a live web server.

Please include the Angular version within answers so we can track better when it moves to later releases.

Answer

Nicolas Henneaux picture Nicolas Henneaux · Aug 4, 2016

2, 4, 5, 6, 7, 8, 9, 10, 11 (TypeScript) with Angular CLI

OneTime Setup

  • npm install -g @angular/cli
  • ng new projectFolder creates a new application

Bundling Step

  • ng build --prod (run in command line when directory is projectFolder)

    flag prod bundle for production (see the Angular documentation for the list of option included with the production flag).

  • Compress using Brotli compression the resources using the following command

    for i in dist/*; do brotli $i; done

bundles are generated by default to projectFolder/dist(/$projectFolder for v6+)**

Output

Sizes with Angular 11.0.2 with CLI 11.0.2and option CSS without Angular routing

  • dist/main-[es-version].[hash].js Your application bundled [ ES5 size: 136 KB for new Angular CLI application empty, 38 KB compressed].
  • dist/polyfill-[es-version].[hash].bundle.js the polyfill dependencies (@angular, RxJS...) bundled [ ES5 size: 36 KB for new Angular CLI application empty, 11 KB compressed].
  • dist/index.html entry point of your application.
  • dist/runtime-[es-version].[hash].bundle.js webpack loader
  • dist/style.[hash].bundle.css the style definitions
  • dist/assets resources copied from the Angular CLI assets configuration

Deployment

You can get a preview of your application using the ng serve --prod command that starts a local HTTP server such that the application with production files is accessible using http://localhost:4200.

For a production usage, you have to deploy all the files from the dist folder in the HTTP server of your choice.