Search code examples
angularwebpacksystemjsangular-cli

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.

Solution

  • 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 prod 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.