How to compile Angular into single bundle.

Compile Angular into single bundle

The easiest way to generate a single bundle is to the NGX Build Plus package. It is a great tool allowing you to extend the default behaviour of the Angular compiler and add your custom settings. The steps to compile angular in a single bundle are easy:

1. Install the NGX Build Plus package by running ng add ngx-build-plus
2. Compile your Angular application using ng build --prod --single-bundle

This command puts everything reachable from the main entry point into one bundle. Polyfills stay in their own bundle as the consuming application might have its own versions of these.

The library is compatible from Angular 6 up to latest release (Angular 11 as of December 2020).

Types of bundle files in Angular

It is important to understand the goal of each compilation file before merging them into a single one. The following files are generated after running: ng build –prod.

main.bundle.js
The JavaScript code that contains the application logic. Components, services and other utilities are getting compiled from typescript into this file.

polyfills.bundle.js
All polyfills described on your polyfills.ts file are getting compiled here. A polyfill is a piece of code used to provide modern functionality on older browsers that do not natively support it.

vendor.bundle.js
A vendor bundle contains all project and framework related libraries that the application depends on. An application declares its dependencies first on the app.module.ts and then on other sub-modules across the app.

inline.bundle.js
This is a tiny file that contains Webpack utilities that are required to load other files.
The reason why Angular generates these bundles as separate files is to allow the clients to cache the bundles. By doing that, the amount of downloaded data on each visit gets reduced.

Should I compile Angular into a single bundle?

How often do developers change the polyfills of an application? What about upgrating to a newer Angular version? And their third party dependencies?

Those questions must be taking into account before unifying the bundles. It is important to notice that by merging all bundles into a single file we no longer benefit from caching certain logic of our app.

A vendor bundle contains all the frameworks and libraries each application feature depends on. By building all this code into a single bundle, the client can effectively cache the bundle, and you only need to rebuild the bundle when a framework or library updates.

Prevent browser cache on Angular

In Angular +2 application there is a known common issue related to cache. After a new release gets deployed to production, some users don’t get the latest version. This can occur for users that loaded your application before the new release and their browser cached the index.html file which points to the also cached old-bundle.js.

The easiest way to prevent the browser from caching a static file is to set the Cache-Control header on the serve response.

Cache-Control: no-cache, no-store

However, web developers do no always have an easy access to modify headers without passing the request through IT departments. If you require an immediate fix, the following solution solves the problem on the front-end side.

The http-equiv header allow us to simulate an HTTP response header by setting its value under the content attribute. The following metas can be used on the < head > element of Angular’s HTML page to prevent the browser caching our files on the client side.

<meta http-equiv="cache-control" content="no-cache, must-revalidate, post-check=0, pre-check=0">
<meta http-equiv="expires" content="0">
<meta http-equiv="pragma" content="no-cache">

References

• https://github.com/manfredsteyer/ngx-build-plus
• https://blog.logrocket.com/quick-guide-to-webpack-bundle-and-code-splitting-with-react-43d1045f1064/
• https://medium.com/acute-angular/angular-rookie-mistakes-how-to-cache-bust-an-angular-2-application-in-production-c4e4d1c48514