Angular项目构建后代码修改未在浏览器生效该如何解决？

本地开发环境（ng serve启动）排查方案 #

• 直接删除Angular CLI本地缓存目录后重启服务：
  执行命令rm -rf .angular/cache（Windows系统执行rmdir /s /q .angular\cache），再用ng serve --no-cache --live-reload启动项目，强制禁用构建缓存并开启热重载。
• 检查angular.json中serve配置节点，确认没有设置liveReload: false、hmr: false这类关闭热更新的参数。

生产构建部署场景排查方案 #

• 确认构建参数已生效：检查angular.json的architect > build > configurations > production配置，确认outputHashing值为all，构建后的dist目录内js、css资源均带哈希后缀，避免浏览器复用旧资源。
• 调整Web服务器缓存策略：大部分Web服务器会默认对静态资源设置强缓存，需单独对入口文件index.html设置不缓存规则，Nginx配置示例如下：

  add_header Cache-Control "no-store, no-cache, must-revalidate, proxy-revalidate";
  避免服务器返回304状态码加载旧的入口文件。

• 部署时完全清空服务器上原有dist目录后再上传新构建的所有文件，避免旧的带哈希后缀的资源残留。

通用排查方案 #

• 检查项目是否开启了PWA/Service Worker功能：如果开启了Service Worker，它会独立缓存静态资源，可在Chrome开发者工具>Application>Service Workers面板手动注销现有Service Worker后刷新验证。
• 使用Chrome无痕模式访问页面测试，排除浏览器扩展、全局缓存的干扰。
• 确认当前修改的代码属于正在运行的项目分支、目录，排除切错分支、改错文件的低级失误。

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