Angular app always using cached version without hard refresh manually

Question

I have Angular 7 application deployed to Azure App Services. After each new deployment, even if I start a new browser, I have to manually refresh or hard refresh the browser page in order to see the new changes.

I can see in my deployment, the index.html file does have the new hashed file name embedded each time.

<script type="text/javascript" src="runtime.5959ec9531e22bc6ae82.js"></script>
<script type="text/javascript" src="es2015-polyfills.d9df4d9cef7e9c40c764.js" nomodule></script>
<script type="text/javascript" src="polyfills.eb0596823492af2b4693.js"></script>
<script type="text/javascript" src="main.1eb70d066995e0724818.js"></script>

Why the application didn't reload the index.html automatically? How to solve this problem?

Maybe cache-control will help. See stackoverflow.com/questions/49547/… — rickz
– rickz, Commented Mar 10, 2021 at 21:08
so usually your Index.html is cached on serverside some where for example in load balancer or something, and if you get old index.html hash numbers are not correct. — Reza
– Reza, Commented Mar 10, 2021 at 21:09
Did you try with output hashing flag in build? ng build --output-hashing=all — Zam Abdul Vahid
– Zam Abdul Vahid, Commented Mar 10, 2021 at 21:10
I can see from the files deployed on server site, the hash numbers are changed. It is the correct behavior expected because outputHashing is set to all in the angular.json file. I just don't understand since index.html is definitely changed, why the browser doens't reload the file. — user3616544
– user3616544, Commented Mar 11, 2021 at 5:47

Florian Rubel · Accepted Answer · 2021-03-10 22:24:00Z

1

The generated index.html which contains the links to your latest scripts is cached.

I would recommend to disable the caching for the location /index.html file only, so the browser ALWAYS loads at least the index.html.

Because the generated css and js contains a hash in the filename that changes if the resulted file changes after the build, the user should always get the latest version.

answered Mar 10, 2021 at 22:24

Florian Rubel

1248 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular app always using cached version without hard refresh manually

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related