Angular Nested Routing
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.
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.
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.
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
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.
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">
Basic overview of the TypeScript and ECMAScript 6 models. An example of use case to exemplify the use of models in external classes.
Access DOM elements directly using viewChild and Template Reference Variables.