Angular 8+ 生产部署后更新未生效，需用户刷新或清缓存如何解决？

该问题核心原因是浏览器默认缓存了旧版本的静态资源与入口HTML文件，没有拉取最新部署的代码，可通过以下多层级方案彻底解决：

1 优化构建配置，启用资源哈希命名 #

Angular生产模式默认会为所有js、css、图片等静态资源文件名添加唯一哈希后缀，版本更新后资源名会自动变化，直接触发浏览器拉取新资源，无需清理缓存。
根据你的Angular版本调整构建命令即可：

• Angular 8 ~ 11版本，在原有命令基础上添加--prod参数启用生产模式优化：

  ng build --prod --base-href=./ --sourceMap=false
  

• Angular 12及以上版本，--prod参数已弃用，改为指定生产配置：

  ng build --configuration production --base-href=./ --sourceMap=false
  

如果构建后资源仍无哈希后缀，可手动修改angular.json配置确认：找到projects.你的项目名.architect.build.configurations.production节点，确保outputHashing字段值为all。

2 禁用入口HTML文件的缓存 #

即使静态资源带哈希，如果入口index.html文件被浏览器缓存，仍会加载旧版本的资源地址，需要在服务器配置中单独对index.html设置不缓存规则，以下是Nginx配置示例：

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

Apache、IIS等服务器可参照相同的缓存头规则配置。

3 应用内主动检测版本更新（可选，用户体验更优） #

如果希望用户无感知获得更新，无需手动刷新，可在应用内添加版本检测逻辑：

• 构建时在输出目录生成version.json文件，写入当前版本号或构建时间戳
• 应用启动后/定时请求服务器的version.json，和本地存储的版本号对比
• 检测到版本不一致时，弹出提示引导用户点击刷新，或静默刷新页面
  如果你已开启Angular Service Worker离线缓存，可直接使用@angular/service-worker提供的SwUpdate服务，直接监听版本更新事件，无需自己实现版本校验逻辑。

4 部署配套注意事项 #

• 部署时不要直接删除服务器上的旧版本静态资源，建议新老版本资源共存至少24小时，避免部署过程中正在使用应用的用户出现资源加载失败问题
• 如果使用了CDN加速静态资源，部署完成后需要触发CDN刷新，清除CDN节点缓存的旧版本资源

内容的提问来源于stack exchange，提问作者Samuel Elias Bustillo Agüero