I have an angular application and very often after deployment I get complaints from end users that they are unable to see the new features (they still have to ctrl + f5 before the changes reflect).
Do I need to incorporate cache busting? After a bit of Googling, I saw the following command:
ng build --output-hashing=all
I tried using it in my deployment pipeline and it was able to solve some of the issues but not all. there are some changes that I still need to do ctrl + f5 for.
How do I make sure my application is updated for my end users without requiring them to clear their own cache?
{
"name": "portfolio",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e",
"prod-build-dev-old": "ng build --prod --configuration=dev --build-optimizer",
"prod-build-dev": "ng build --prod --configuration=dev --build-optimizer --aot --output-hashing=all",
"prod-build-staging": "ng build --prod --configuration=staging --build-optimizer"
},
I think that's a browser's cache issue.
What I suggest is to add these three lines in your index.html:
<!doctype html>
<html>
<head>
...
<!-- Add the 3 following lines -->
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="expires" content="-1">
...
</head>
<body>
...
</body>
</html>
Once these updates got deployed, your clients wont have to ctrl + f5 after every deployment to get the new features.
For more informations about browser cache control, please check : Cache-Control in MDN.