Angular 12配置outputHashing=all后应用仍被缓存该如何解决？

问题原因确认 #

你遇到的确实是index.html入口文件被浏览器/中间节点缓存导致的问题：

• Angular的outputHashing: all只会给JS、CSS、图片等静态资源文件的文件名添加哈希后缀，index.html作为应用入口文件本身不会携带哈希
• 缓存的旧版index.html中仍然引用了上一版带旧哈希的JS/CSS资源，因此用户访问时始终加载旧版本代码，只有硬刷新强制重新拉取index.html后才会加载新版本

缓存破除方案 #

1. 服务端/CDN配置强制不缓存index.html（优先推荐） #

这是最根本的解决方案，在你部署应用的Web服务或者CDN上添加针对index.html的响应头规则，禁止缓存该文件：

Nginx配置示例

在nginx.conf或者站点配置的server块中添加如下规则：

location = /index.html {
    add_header Cache-Control "no-cache, no-store, must-revalidate";
    add_header Pragma "no-cache";
    add_header Expires 0;
}

Apache配置示例

在.htaccess文件中添加：

<Files "index.html">
    FileETag None
    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, 11 Jan 1984 05:00:00 GMT"
</Files>

配置后所有用户访问时都会实时拉取最新的index.html，自动加载对应新版哈希的静态资源。

2. Angular前端补充版本检测（可选） #

如果暂时无法修改服务端配置，可以加前端版本检测逻辑，主动提示用户更新：

• 每次构建时在environment.ts中写入当前构建版本号/构建时间戳
• 应用初始化时定时请求当前根路径的index.html，对比返回内容中的资源哈希或者埋点的版本号，检测到差异后弹窗提示用户刷新页面

注意事项 #

• 不要给index.html文件名添加哈希后缀，Web服务默认会找根路径下的index.html作为入口，改名后会导致应用无法正常访问
• 静态资源（带哈希的JS/CSS等）可以设置较长的缓存时间（比如30天），因为内容变更后哈希会自动变化，不会出现缓存问题

内容的提问来源于stack exchange，提问作者Patrick