Cache busting on Angular

Question

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

@AkshayAmar see: https://medium.com/acute-angular/angular-rookie-mistakes-how-to-cache-bust-an-angular-2-application-in-production-c4e4d1c48514 — SeleM, Oct 25 '21 at 13:11
Coz that's why your clients don't have their apps updated = browser's cache, that's why they'd to ctrl + f5 => clean the cache — SeleM, Oct 25 '21 at 13:12
@SeleM , what do you mean ? so do you mean the issue is with the client ? — Akshay Amar, Oct 25 '21 at 13:27
@AkshayAmar, it's a browser's cache behavior, that's why they have to do ctrl + f5 to get the updates.. if you want to avoid that.. you should tell the browser : "yo ! I don't want a you to cache my app" , Now, how to do it ? = by disabling the cache in your app's index.html + http headers as it's described in the links I sent. — SeleM, Oct 25 '21 at 13:41
@SeleM , do you have some example implementation that I can follow ? just in a small angular project. Thanks. I will pay if you can help me. — Akshay Amar, Oct 25 '21 at 13:45
@AkshayAmar Could you please upvote the answer :) unless you'll give a donation for the help (as it was suggested by you in the upper comments :'D ) Thanks in advance ! — SeleM, Oct 26 '21 at 11:59
it says "Thanks for the feedback! You need at least 15 reputation to cast a vote, but your feedback has been recorded." — Akshay Amar, Oct 26 '21 at 12:00
@AkshayAmar did you find a solution for the issue please comment if u did — dj43, Mar 21 '22 at 12:04

score 7 · Accepted Answer · edited May 24 '23 at 21:52

7

I think that's a browser's cache issue. Although Angular includes cache busting by default, it requires you to manually turn off caching on index.html in order to give it a chance to run.

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.

edited May 24 '23 at 21:52

O'Rooney

2,878
2
27
41

answered Oct 25 '21 at 14:03

SeleM

9,310
5
32
51

here https://imgur.com/a/c8IROf0 ? – Akshay Amar Oct 25 '21 at 14:09
@AkshayAmar after line 7 would be cleaner – SeleM Oct 25 '21 at 14:10
can you explain to me SIr what this 3 lines actually do ? – Akshay Amar Oct 25 '21 at 14:11
@AkshayAmar TDLR, to prevent your browser from caching, in fact some of the options could be deprecated in latest versions, but it's better to keep them, you don't know which versions are used by your clients.. for more details, you can take for example : `no-store` , copy it and search for it in [Cache-Control](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cache-Control) with `cntrl + f` & you'll have detailed answers, and so on.. – SeleM Oct 25 '21 at 14:30
what is the downside of this solution ? – Akshay Amar Oct 25 '21 at 14:42
does this slow my app ? – Akshay Amar Oct 25 '21 at 14:43
Sir , where can I pay you what platform ?. I just have one last question , by adding the meta and cache control you have said , I think it will slow my app since my app or browser would no longer do caching. Am I right ? – Akshay Amar Oct 26 '21 at 18:33
@AkshayAmar, Disabling cache -generally- hurts performance. It may make CDNs and ISP proxies (e.g. commonly used by mobile operators) ineffective. It doesn't hurt first load by a new user, but then subsequent navigation may be slower. And, yet.. slowness depends on how much resources you download. – SeleM Oct 27 '21 at 07:45
1

@O'Rooney the court is yours to make a less terrible suggestion ^^ waiting for your answer + please, mention those much bigger problems – SeleM May 24 '23 at 07:31
You're right, I'm wrong. I will delete my comment. – O'Rooney May 24 '23 at 21:51
2

The missing part (which I added to your answer) is that Angular will do good caching and cache busting on changes, but for that to happen the index.html must not be cached. – O'Rooney May 24 '23 at 21:53

Cache busting on Angular

1 Answers1