I had a similar problem and discovered it comes from the web server (Apache in my case).
When you deploy the app on production, the root file (index.html
) contains the following code :
<!doctype html>
<html lang="en">
<head>
<base href="/">
<title>test</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="manifest" href="manifest.json">
</head>
<body>
<app-root></app-root>
<script src="/runtime.937c2b326bb921beac97.js" defer></script>
<script src="/polyfills.a78c48dee545feb95e6a.js" defer></script>
<script src="/scripts.14a9d42d0791cb2fa37d.js" defer></script>
<script src="/main.57de7a395d76adaeeb43.js" defer></script>
</body>
</html>
By default, my Apache serveur cached the JS files and the index.html
. So when I deployed a new version, the users still got the old index.html
which references the old JS files.
To fix this, I forced the browser not to cache the index.html
. It is fetched everytime the app load in the browser so the version is always the latest, and so the JS files.
Apache configuration :
<VirtualHost *:443>
# ...
<If "%{REQUEST_URI} == '/'">
Header Set Pragma "no-cache"
Header Set Expires "Thu, 1 Jan 1970 00:00:00 GMT"
Header Set Cache-Control "max-age=0, no-store, no-cache, must-revalidate"
Header Unset ETag
FileETag None
</If>
</VirtualHost>
For IIS server, see How to disable caching of single page application HTML file served through IIS?