How to handle cache busting in Angular

Question

With the help of a code example, can you tell me how to handle cache busting in Angular?

Answer 1

In Angular, cache busting ensures users get the latest versions of your application's assets since it will prevent browsers from serving older cached files. Angular comes with built-in mechanisms for effective handling of cache busting.

1. Output Hashing:
Angular's build process can append a unique hash to filenames of compiled assets (e.g., JavaScript and CSS files). This hash changes whenever the file content changes, prompting browsers to fetch the new version. To enable this feature, use the following build command:

ng build --output-hashing=all

This command ensures that all built assets receive a unique hash based on their content. 

2. Prevent Caching of index.html:
While Angular takes care of cache busting for most assets, index.html may still be cached in the browser, which can lead to it referencing old asset filenames. This can be avoided by adding the following meta tags to the index.html file to disable caching.

 <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
 <meta http-equiv="Pragma" content="no-cache">
 <meta http-equiv="Expires" content="-1">