CODEWITHSUNDEEP
angularwebcachingbrowserweb-development-server
Pratiksan
Pratiksan

Reputation: 11

How to prevent index.html from caching and showing older .js files in Angular 10?

Though there are many similar question but none of them are solving my issue. I have a web server running which needs daily new builds and hence many contents are being changed on regular basis. But whenever I deploy any new build version, the browser caches the older index.html with older js, css files. Hence the newer changes are not even seen to the client despite adding into the code, which is very frustrating. I have added http-equiv="cache-control" content="no-cache, no-store, must-revalidate" but not working for me Note - There is only one workaround i.e. if I manually disable cache from the browser, even If I refresh the page multiple the browser is showing older index.html file

Please let me know if anything I need to do-

index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Angular</title>
  <meta http-equiv="cache-control" content="no-cache, no-store, must-revalidate">
  <meta http-equiv="expires" content="0">
  <meta http-equiv="pragma" content="no-cache">
  <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <base href="/">
<link rel="stylesheet" href="styles.13f59921f8d74cebb499.css"></head>
<body>
  <script src="assets/js/moment.js"></script>
  <script src="assets/js/moment-timezone.js"></script>
  <app-root></app-root>
<script src="runtime.7d4733d55376630cf00a.js" defer></script><script src="polyfills-es5.950ea5f001d77cff122d.js" nomodule defer></script><script src="polyfills.05dd00906ab9ae4ef80e.js" defer></script><script src="main.3490618dde062e2d93a4.js" defer></script></body>
</html>

Angular version - Angular Version

Upvotes: 1

Views: 3071

Answers (1)

Joosep Parts
Joosep Parts

Reputation: 6225

You would need to update the cache - a good job for a Service Worker. Implement one on your project. https://blog.angular-university.io/angular-service-worker/ After implementing it you get access to SwUpdate and all the other goodies that come with implementhing one (PWA stuff).

Once you get an update a new build occurs, and a new ngsw.json is available first application reload after the new version is deployed - the Angular Service Worker detects the new ngsw.json and loads any new files in the background second reload after new version deployment - the user sees the new version this behavior will work consistently, independently of how many tabs the user has opened (unlike what happens with the standard Service Worker Lifecycle).

Also don't forget to update package.json version number when releasing new builds.

Upvotes: 1

Related Questions