How to prevent Browser cache on Angular 2 site?

by

angular-cli resolves this by providing an --output-hashing flag for the build command (versions 6/7, for later versions see here). Example usage:

ng build --output-hashing=all

Bundling & Tree-Shaking provides some details and context. Running ng help build, documents the flag:

--output-hashing=none|all|media|bundles (String)

Define the output filename cache-busting hashing mode.
aliases: -oh <value>, --outputHashing <value>

Although this is only applicable to users of angular-cli, it works brilliantly and doesn’t require any code changes or additional tooling.

Update

A number of comments have helpfully and correctly pointed out that this answer adds a hash to the .js files but does nothing for index.html. It is therefore entirely possible that index.html remains cached after ng build cache busts the .js files.

At this point I’ll defer to How do we control web page caching, across all browsers?

More Related Contents:

  1. Difference between no-cache and must-revalidate for Cache-Control?
  2. What’s the difference between Cache-Control: max-age=0 and no-cache?
  3. AngularJS disable partial caching on dev machine
  4. What is Cache-Control: private?
  5. What’s default value of cache-control?
  6. Clear browser cache in Angular
  7. Disabling Chrome cache for website development
  8. Disable browser cache for entire ASP.NET website
  9. angular2: Error: TypeError: Cannot read property ‘…’ of undefined
  10. Memcached vs. Redis? [closed]
  11. How to cache Google map tiles for offline usage?
  12. OrderBy pipe issue
  13. Angular 2 Scroll to top on Route Change
  14. Angular2, what is the correct way to disable an anchor element?
  15. Preventing Caching of CSS Files
  16. VIPT Cache: Connection between TLB & Cache?
  17. Angular 2 Read More Directive
  18. vs
  19. How to force browsers to reload cached CSS and JS files?
  20. Angular 2 Dynamically insert a component into a specific DOM node without using ViewContainerRef
  21. Tomcat 8 throwing – org.apache.catalina.webresources.Cache.getResource Unable to add the resource
  22. Redis cache vs using memory directly
  23. Generate dynamic css based on variables angular
  24. Write-back vs Write-Through caching?
  25. System.Web.Caching vs. Enterprise Library Caching Block
  26. How does Linux perf calculate the cache-references and cache-misses events
  27. How to check the length of an Observable array
  28. How can I use ngFor to iterate over Typescript Enum as an array of strings
  29. RAM drive for compiling – is there such a thing?
  30. Virtually indexed physically tagged cache Synonym

Leave a Comment