Angular 应用程序始终使用缓存版本，无需手动硬刷新答案

【问题标题】：Angular app always using cached version without hard refresh manuallyAngular 应用程序始终使用缓存版本，无需手动硬刷新
【发布时间】：2021-03-10 20:58:32
【问题描述】：

我已将 Angular 7 应用程序部署到 Azure 应用服务。每次新部署后，即使启动新浏览器，我也必须手动刷新或硬刷新浏览器页面才能看到新的更改。

我可以在我的部署中看到，index.html 文件确实每次都嵌入了新的哈希文件名。

<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>

为什么应用程序没有自动重新加载 index.html？如何解决这个问题？

【问题讨论】：

也许缓存控制会有所帮助。见stackoverflow.com/questions/49547/…
所以通常你的 Index.html 被缓存在服务器端的某个地方，例如在负载均衡器或其他地方，如果你得到旧的 index.html 哈希数字不正确。
您是否尝试在构建中使用输出哈希标志？ ng build --output-hashing=all
我可以从服务器站点上部署的文件中看到，哈希数已更改。这是预期的正确行为，因为 outputHashing 在 angular.json 文件中设置为 all。我只是不明白，因为 index.html 肯定改变了，为什么浏览器不重新加载文件。
你试过控制浏览器的缓存行为吗？

标签： javascript angular

【解决方案1】：

生成的 index.html 包含指向您最新脚本的链接被缓存。

我建议仅禁用位置 /index.html 文件的缓存，因此浏览器总是至少加载 index.html。

因为生成的 css 和 js 在文件名中包含一个哈希值，如果生成的文件在构建后发生更改，则该哈希值会更改，因此用户应始终获取最新版本。

【讨论】：