
Angular: Routing
Understand the basics of Angular routing and review core concepts and internal architecture.
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:
ng add ngx-build-plus
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).
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.
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.
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">
Understand the basics of Angular routing and review core concepts and internal architecture.
Data communication between the logic component and DOM elements of an Angular application.
Basic overview of the TypeScript and ECMAScript 6 models. An example of use case to exemplify the use of models in external classes.