Angular 2/4 模板缓存破坏不起作用

Posted 2023-03-13

【中文标题】Angular 2/4 模板缓存破坏不起作用

【英文标题】：Angular 2/4 template cache-busting is not working

【发布时间】：2018-05-13 04:29:24

【问题描述】：

我们的 Angular 4 应用程序在缓存清除方面存在问题。 看来，当我们发布新版本时，旧的模板文件会被缓存（Ctrl + F5 解决了这个问题）。

我们使用 angular-cli (--prod) 来构建我们的应用程序，该应用程序应该在新版本发布时处理缓存清除。编译后的 js-file-names 包含每个版本的 hash-number，这样文件就不会被缓存。并且 html 应该包含在 javascript 文件中。似乎仍然缓存了旧的模板内容。

一个可能的解决方案可能是这个：How to prevent Browser cache on Angular 2 site? 为什么这应该改变任何东西，因为不是模板而是请求 js 文件？ 这个问题的最佳解决方案是什么？

【问题讨论】：

您确定缓存的不是主页 (index.html) 本身吗？

其实这可能是问题所在。为此使用缓存控制元标记是一种好习惯吗？ (***.com/a/1341133/3584607)

这也会影响图像缓存、javascript...吗？

这取决于浏览器和你的网络服务器（apache、nginx）添加的缓存元

我使用了一个重要的解决方案，但它可以消除 Angular 6（浏览器、cdn、代理/isp 缓存）中的所有类型缓存问题，请参阅 (***.com/a/54538027/1544054)

【参考方案1】：

解决方案是在我们的亚马逊 S3-bucket 中为 index.html 文件设置 cache-expires 标头。

http://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/Expiration.html#ExpirationAddingHeadersInS3