How to bundle an Angular app for production

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.

2 to 17 (TypeScript) with Angular CLI

OneTime Setup

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

Bundling Step

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

  flag --configuration production bundle for production is now the default (see the Angular documentation to customize it if needed).

• 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{/,/browser} for v6+)

Output

Sizes with Angular 17.0.9 and option CSS without pre-rendering

• dist/main.[hash].js Your application bundled [ size: 193 KB for new Angular CLI application empty, 53 KB compressed].
• dist/polyfill-[es-version].[hash].bundle.js the polyfill dependencies (@angular, RxJS...) bundled [ size: 33 KB for new Angular CLI application empty, 11 KB compressed].
• dist/index.html entry point of your application.
• dist/runtime.[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. This is not safe to use for production usage.

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