Angular应用部署后更新不生效，如何无需用户强刷实现全量缓存更新？

解决方案 #

1. 统一补全所有生产构建命令的缓存清除参数 #

你当前的prod-build-staging构建命令尚未添加--output-hashing=all参数，所有生产环境相关的构建脚本都需要统一加上该配置，确保JS、CSS、媒体等所有静态资源在内容变动时，生成的哈希后缀同步更新，调整后的配置示例：

"prod-build-staging": "ng build --prod --configuration=staging --build-optimizer --aot --output-hashing=all"

2. 配置入口文件index.html强制不缓存 #

剩余缓存问题90%以上是因为入口文件index.html被浏览器、CDN或者服务器缓存，该文件本身不带哈希后缀，旧版缓存的index.html会继续引用旧版带哈希的静态资源，导致用户看不到更新。
需要在你的Web服务器（Nginx/Apache/云服务CDN）针对index.html单独配置不缓存规则，Nginx配置示例如下：

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

该配置会让浏览器每次访问站点都拉取最新的index.html，不会使用本地缓存的旧入口文件。

3. （可选）应用内版本检测自动更新 #

如果你的Angular应用启用了PWA Service Worker，默认会缓存应用资源，需要主动监听版本更新事件，检测到新版本后自动触发页面重载，示例代码如下：

import { SwUpdate } from '@angular/service-worker';

constructor(private swUpdate: SwUpdate) {
  if (this.swUpdate.isEnabled) {
    this.swUpdate.versionUpdates.subscribe(() => {
      if (confirm('检测到新版本，是否立即加载？')) {
        window.location.reload();
      }
    });
  }
}

未启用PWA的场景可以自行实现轻量版本检测：打包时将版本号写入配置文件，应用启动时拉取最新版本号和本地缓存的版本号对比，不一致则触发刷新即可。

4. 静态资源缓存规则优化 #

所有带哈希后缀的静态资源（格式为*.[哈希值].js、*.[哈希值].css等）可以配置长期缓存规则（比如max-age=31536000，即1年缓存），这类资源内容变动时哈希会同步变化，不会出现缓存问题，还能提升站点加载性能。部署时建议保留至少1-3个历史版本的带哈希静态资源，避免更新过程中在线用户加载旧资源失败。

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