angularcachingrefreshangular2-aot

(Angular 4, AOT, cache refresh) How to force end users browsers to do a hard refresh when code changes occur on server?


When I am ready to publish my code changes to our server, I build and compile using Angular AOT and copy my files over. Sometimes end users aren't getting these changes and have to do a hard refresh, or go into their browser history and clear cached images and files. What is the recommended method of forcing a hard refresh when I make changes to code on the server?

I've read about appending a version number to .css and .js files so the browser re-downloads the newly named files, but with angular AOT creating ngfactory.js files and ngfactory.js.map files, etc, I want to make sure I am doing this properly.

Also, I am hosting the site using IIS so if there is a way to achieve refreshing through ISS I am open to that as well.


Solution

  • When you build using ng build --prod which implies aot as well, the generated bundles have new names..

    A common approach is to configure IIS to never allow caching of index.html.. That way, if clients see the same bundle name, in the always current index.html, its cached.. But if you generate a new bundle, its downloaded.

    Related SO answer here.

    Also, you can google 'Cache Busting" to find a lot of resources.