6

Our app uses the node.js Core & Angular version 7.2

We are frequently rollout production build of the Angular app to deploy the changes 3-4 times in a month.

I have received some client's complaints who are unable to see changes unless they clear their cache or hard reload the page in the browser.

I thought ng build --prod created unique hashes so it would handle cache-busting, But it doesn't seem to be happening.

In angular.json I have below configuration for the production build

"production": {
  "optimization": true,
  "outputHashing": "all",
  "sourceMap": false,
  "extractCss": true,
  "namedChunks": false,
  "aot": true,
  "extractLicenses": false,
  "vendorChunk": false,
  "buildOptimizer": true,
  "fileReplacements": [
    {
      "replace": "src/environments/environment.ts",
      "with": "src/environments/environment.prod.ts"
    }
   ]
}

After running ng build --prod it is generating hashed files and it's different from previous version based on changes. Also, I have configured the server to do not cache index.html. then why sometimes users need to hard reload the page or clear the cache manually to get the latest changes?

Is there any way I can combat this issue besides telling clients to clear their cache?

Any suggestions would be greatly appreciated.

Nikunj Beladiya
  • 159
  • 1
  • 8
  • are you sure your not cache header for index.html is working for them? – Aakash Garg Jun 09 '20 at 17:55
  • @AakashGarg Yes, I am getting this header in network tab for index.html `Cache-Control: no-cache, private, no-store, must-revalidate, max-stale=0, post-check=0, pre-check=0` – Nikunj Beladiya Jun 10 '20 at 04:25
  • if new index.html is getting served it should serve bundles with new hash. please also include meta tags for no cache in your index.html – Aakash Garg Jun 10 '20 at 05:36
  • I think it doesn't make sense to add meta tags for no cache in `index.html` because from the server-side already passing headers to do not cache file. If we add meta to file still it will be ignored by headers and meta tags for cache control is easily be ignored when there is a proxy between client and server – Nikunj Beladiya Jun 10 '20 at 06:47
  • 1
    Any development on this? I'm having the same issue – Fernando Rocha Mar 05 '21 at 17:13
  • Did you guys figure this out? – arao6 Mar 25 '21 at 14:02
  • The problem is with your hosting (IIS, node.js, etc...) not with angular or the cli - you are looking in the wrong place. – Aviad P. Jul 25 '21 at 06:28
  • why cant i add a bounty here? – Alex Gordon Jul 29 '21 at 23:19
  • Did you check this link: https://medium.com/acute-angular/angular-rookie-mistakes-how-to-cache-bust-an-angular-2-application-in-production-c4e4d1c48514 – Juan Rojas Sep 14 '21 at 03:55

1 Answers1

0

angular old version:

ng build --prod --aot --output-hashing=all

For the newer version of angular ( for example Angular 10) the command is now updated:

ng build --prod --aot --outputHashing=all
Mohnish
  • 1,010
  • 1
  • 12
  • 20
Bhaskar Reddy
  • 59
  • 3