Browser loading cached version of index.html - angular 7

Question

I have an angular 7 application running on python server, using angular-cli we are building project files. While building i am setting up cache bursting option using the below command.

ng build --prod --build-optimizer --aot --output-hashing=all

output-hashing=all will take care of cache bursting as per angular documentation. Though i provided this flag, after deploying our app files name are appended with hashed value(styles.a5169d3732258e921e2c.css, main.8dc0644c88c4fbf67797.js) but index.html file is always showing cached version.

I want to cache all files in client side except index.html. How will i do this?

Answer 1

I had the same issue a few months back (the meta-tags for my website were set wrongly and so the index.html was cached). Solutions online are not very specific when it comes to that issue.

What helped was setting the appropriate headers in the server's configuration (this is an Apache server .htaccess-file; the config location and syntax may vary depending on your specific server):

<FilesMatch "\.(html|htm)$">
  FileETag None
  <IfModule mod_headers.c>
    Header unset ETag
    Header set Cache-Control "max-age=0, no-cache, no-store, must-revalidate"
    Header set Pragma "no-cache"
    Header set Expires "Wed, 12 Jan 1980 05:00:00 GMT"
  </IfModule>
</FilesMatch>

The configuration above is a copy-paste from somewhere, might even be SO, though I couldn't find the source anymore.

This config turns off the E-Tag header (automatic change-detection with some weird behaviors, see link below) and disables all caching for your index.html.

The other parts of Angular applications (like static images etc.) are usually cached automatically without configuration. I suggest you add the following to the server config, though, since the bundles won't be cached otherwise:

<FilesMatch "\.js$">
  FileETag None
  <IfModule mod_headers.c>
    Header unset ETag
    Header set Cache-Control "private, max-age=31536000"
  </IfModule>
</FilesMatch>

This enables only end-users (browsers) to cache the bundles for a year. Since Angular-CLI adds a hash to the bundles on every build anyways, this does not affect functionality (but makes your Application faster).

See https://stackoverflow.com/a/8497239/2740014 for more info on that.