How to bundle an Angular app for production

by

2 to 13 (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 for v6+)**

Output

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

  • dist/main-[es-version].[hash].js Your application bundled [ ES5 size: 132 KB for new Angular CLI application empty, 39 KB compressed].
  • dist/polyfill-[es-version].[hash].bundle.js the polyfill dependencies (@angular, RxJS…) bundled [ ES5 size: 37 KB for new Angular CLI application empty, 12 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. 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.

More Related Contents:

  1. How to add font-awesome to Angular 2 + CLI project
  2. How to decrease prod bundle size?
  3. angular-cli where is webpack.config.js file – new angular6 does not support ng eject
  4. How to undo Angular 2 Cli ng-eject?
  5. Avoiding relative paths in Angular CLI
  6. Using Angular CLI and unable to use relative image paths in CSS files
  7. How to upgrade Angular CLI to the latest version
  8. How to add bootstrap to an angular-cli project
  9. Angular CLI Error: The serve command requires to be run in an Angular project, but a project definition could not be found
  10. Angular CLI SASS options
  11. PowerShell script add ‘–prod’ argument to build Angular CLI project
  12. how to format date in Component of angular 5
  13. Angular-CLI proxy to backend doesn’t work
  14. jQuery is not defined in bootstrap-sass
  15. What’s the difference between –base-href and –deploy-url parameters of angular-cli tool
  16. Get angular-cli to ng serve over HTTPS
  17. Uncaught Error: Unexpected directive ‘MyComboBox’ imported by the module ‘AppModule’. Please add a @NgModule annotation
  18. How to install a specific version of Angular with Angular CLI?
  19. Angular – What is the meanings of module.id in component?
  20. Include assets when building angular library
  21. What are differences between SystemJS and Webpack?
  22. When to use ‘npm start’ and when to use ‘ng serve’?
  23. How to uninstall/upgrade Angular CLI?
  24. Implementing a plugin architecture / plugin system / pluggable framework in Angular 2, 4, 5, 6
  25. How to get rid of the warning .ts file is part of the TypeScript compilation but it’s unused
  26. Angular 2 : No NgModule metadata found
  27. How to add Web Animations API polyfill to an Angular 2 project created with Angular CLI
  28. Syntax Error in Angular App: Unexpected token
  29. Angular5: Deploying Angular application to multiple clients
  30. How to generate components in a specific folder with Angular CLI?

Leave a Comment