0

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?

user3616544
  • 635
  • 1
  • 4
  • 14
  • Maybe cache-control will help. See https://stackoverflow.com/questions/49547/how-do-we-control-web-page-caching-across-all-browsers/2068407#2068407 – rickz Mar 10 '21 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 Mar 10 '21 at 21:09
  • Did you try with output hashing flag in build? ng build --output-hashing=all – Zam Abdul Vahid Mar 10 '21 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 Mar 11 '21 at 05:47
  • Did you try controlling the browser's cache behavior ? – rickz Mar 12 '21 at 04:06

2 Answers2

0

Just open your app in an other browser or an other device if possible. that's may be caused by the browser cashe.

0

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.