Cache busting on Angular-CodePudding

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"
},

CodePudding user response：

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.