8

There is a popular question on how to force-clear the cache of the browser in a VanillaJS application, with the general consensus being, setting the name of the .js-script or the scripts arguments to a new value: Force browser to clear cache

How can I achieve this with Angular (currently 5.1 in AngularCLI/Webpack build), so every time I release the code in production (with AOT), a new version is built? I would use date-hashing instead of indexing, but the main question is: where can I set it (eg the script name/arguments)? In development, where the CLI takes care of rebuilding the app, this is not an issue, just in production!

Phil
  • 7,065
  • 8
  • 49
  • 91
  • This is i did for angular: https://stackoverflow.com/questions/55402751/angular-app-has-to-clear-cache-after-new-deployment/61473275#61473275c – Alejo JM Apr 28 '20 at 05:57

1 Answers1

16

By setting your build command to target production ng build --target=production, the cli automatically hashes your js files. Here are the docs You can also set the command manually if you wanted it on dev ng build --output-hashing=all

LLai
  • 13,128
  • 3
  • 41
  • 45
  • Thank you. I have made the changes, but need to check if it works first, will accept your answer after that :) – Phil Dec 14 '17 at 15:25
  • But how do I enforce the browser to also refresh asset files when a new version is created? – CularBytes Apr 29 '19 at 12:16
  • @CularBytes It looks like angular cli doesn't hash all assets (see this [thread](https://github.com/angular/angular-cli/issues/4212)). You might be able to update the webpack config to look for your asset urls and add a hash or make a pipe that adds a hash. (for example say you had a pipe that pulled in your package.json version and appended it to the url. everytime you update the version and deploy the asset would be cache busted) – LLai May 01 '19 at 13:48