浏览器加载 index.html 的缓存版本 - 角度 7答案

【问题标题】：Browser loading cached version of index.html - angular 7浏览器加载 index.html 的缓存版本 - 角度 7
【发布时间】：2019-12-13 18:39:48
【问题描述】：

我有一个在 python 服务器上运行的 angular 7 应用程序，我们正在使用 angular-cli 构建项目文件。在构建时，我正在使用以下命令设置缓存突发选项。

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

output-hashing=all 将按照角度文档处理缓存突发。虽然我提供了这个标志，但在部署我们的应用程序文件名后附加了哈希值（styles.a5169d3732258e921e2c.css，main.8dc0644c88c4fbf67797.js），但 index.html 文件始终显示缓存版本。

我想在客户端缓存除 index.html 之外的所有文件。我将如何做到这一点？

【问题讨论】：

您是否尝试过手动设置？
是的。我尝试了以下标题当我尝试这没有文件被缓存
我想缓存除 index.html 以外的其他文件
我有同样的问题：index.html 被缓存了，所以即使在文件上使用散列，它也无济于事，因为浏览器仍然看到旧的 index.html 并且还缓存了 js 文件- 它从本地缓存资源运行整个应用程序。我们正在使用 Angular 8.0

标签： angular-cli angular7 browser-cache

【解决方案1】：

几个月前我遇到了同样的问题（我网站的元标记设置错误，因此 index.html 被缓存了）。当涉及到该问题时，在线解决方案不是很具体。

有助于在服务器配置中设置适当的标头（这是一个 Apache 服务器.htaccess-file；配置位置和语法可能因您的特定服务器而异）：

<FilesMatch "\.(html|htm)$">
  FileETag None
  <IfModule mod_headers.c>
    Header unset ETag
    Header set Cache-Control "max-age=0, no-cache, no-store, must-revalidate"
    Header set Pragma "no-cache"
    Header set Expires "Wed, 12 Jan 1980 05:00:00 GMT"
  </IfModule>
</FilesMatch>

上面的配置是从某个地方复制粘贴的，甚至可能是这样，尽管我再也找不到源了。

此配置关闭了 E-Tag 标头（具有一些奇怪行为的自动更改检测，请参见下面的链接）并禁用 index.html 的所有缓存。

Angular 应用程序的其他部分（如静态图像等）通常无需配置即可自动缓存。不过，我建议您将以下内容添加到服务器配置中，否则捆绑包将不会被缓存：

<FilesMatch "\.js$">
  FileETag None
  <IfModule mod_headers.c>
    Header unset ETag
    Header set Cache-Control "private, max-age=31536000"
  </IfModule>
</FilesMatch>

这仅允许最终用户（浏览器）将捆绑包缓存一年。由于 Angular-CLI 在每次构建时都会向捆绑包添加哈希，因此这不会影响功能（但会使您的应用程序更快）。

有关更多信息，请参阅https://stackoverflow.com/a/8497239/2740014。

【讨论】：