Angular cache - Chrome is loading old main.js file on frequent used routes

Question

I am facing this annoying issue with Angular cache in Chrome. I get this issue every time I do a release.

I have added cache control settings in HTML.

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

What is weird is, on one of the most frequent routes, Chrome uses old main.xxxx.js file.

<script type="text/javascript" src="main.e782af08b3f281507dba.js"></script>

But as soon as I switch to another less frequent route, it loads latest main.xxxxx.js file.

<script type="text/javascript" src="main.075b8caa48c74ed93f64.js"></script>

I am facing this after every release, which is very annoying not just for me, but for my clients as well. I can't ask them to clear their cache every time I do a new release.

Also, in last release I had put a check for version change, and if version is changed, use window.reload() to reload the browser, which it does. But as soon as it routes to frequent path, chrome gets old main.js file.

Answer 1

From my research This worked

Prevent google chrome cache html page

"Set the correct expiry headers in the HTTP response from your server. They override anything you've put in meta tags"

Answer 2

Angular has a built in hashing mechanism to ensure updated files are not cached. To activate this functionality you have to add the property "outputHasing": "all" to the build configurations in your angular.json file. Alternatively you can build your project with the command: ng build --output-hashing=all . This will add a hash to each file name.

However, Angular does not hash the index.html file. Server-side response headers should ensure that this file isn't cached - as they override your meta tags. Cache-Control is such a header that you can configure on your web server to add to all outgoing requests, which will tell the browser and CDNs how to cache your content. This answer explains how to set these no-cache headers on your web server.

You can verify if these cache control headers are set correctly by going to the Inspect > Network tab in your browser or by using the curl -I www.yourURL.com command.

Important: All versions of your index.html file that were cached in your clients browser -before you added the new cache control headers- will still be cached. To overcome this issue you should use different URL's. This can be done by using a new domain name (as long as you do not care about SEO), changing the routes or by adding a URL parameter (without touching SEO).

After building your Angular project as described above and adding the configuration on your web server, users will always get the newest version of your page, even after a future release.