如何防止 Angular 7 站点上的浏览器缓存？答案

【问题标题】：How to prevent Browser cache on Angular 7 site?如何防止 Angular 7 站点上的浏览器缓存？
【发布时间】：2019-05-30 04:33:01
【问题描述】：

我在生产环境中有一个 Web 应用程序。用户每天都在使用它，当我发布更新并且用户返回 Web 应用程序时，他/她会查看旧版本的 Web 应用程序。他需要刷新浏览器才能加载新版本。我怎么解决这个问题？每次发布更新（每周 3-4 次）时，我都无法告诉数百名用户刷新页面。我使用以下内容来构建我的前端应用程序：Angular7 with angular-cli。

【问题讨论】：

您的应用程序托管在哪里？您需要确保您的 index.html 没有存储在浏览器缓存中。

标签： angular caching browser-cache cache-control angular7

【解决方案1】：

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

这会生成一个必须与服务器端匹配的哈希。如果前端的缓存版本与哈希不一样，他们会得到一个新版本的应用程序。这假设您使用的是使用 angular CLI 进行构建的标准方式。

如果你不是，你总是可以尝试一些像下面这样的骇人听闻的东西（未经测试）

@Component({
templateUrl: './app/something/something/something.html?v=' + Math.random()
stylesUrls: ['./app/something/something/something.html?v=' + Math.random()]
})

【讨论】：

我昨天做了同样的事情，但现在我得到同样的错误，浏览器缓存问题仍然存在
您确定您使用的网址正确吗？如果您在后端使用全栈应用程序，则服务器端可能会提供 /dist 文件夹以外的其他内容。例如，调试模式下的 Visual Studio IIS 将提供为其配置的文件而不是 dist 文件夹（默认情况下，我记得 2016 年）
要检查的一件事是构建您的应用程序并使用这些输出哈希设置。然后打开 dist 文件夹并确保文件的随机结尾被取消。这将确保服务器端构建工具不会覆盖文件。
没问题。如果它最终起作用，请告诉我。如果也接受答案;)
非常感谢悟空为我工作 ng build --aot --output-hashing=all