Angular应用每次部署后需手动刷新浏览器问题求助

看起来你遇到的是典型的浏览器/服务器缓存导致静态资源不更新问题，再加上缓存的旧资源引发的语法错误，咱们一步步来解决：

1. 确保--output-hashing all真正生效 #

首先确认构建后的文件是否正确带上了哈希值：

• 运行构建命令后，打开dist文件夹，检查JS/CSS文件的命名，比如是不是main.7f9d2a.js这种带随机哈希的格式，而不是main.js。
• 如果没有哈希，可能是你的QA环境配置覆盖了这个参数！打开angular-cli.json，找到environments下的qa配置，看看有没有"outputHashing": "none"这种设置，有的话删掉或者改成"all"。
• 保险起见，直接在命令行里明确指定参数：

  ng build --prod --env=qa --output-hashing all
  

2. 调整服务器的缓存策略（核心解决方法） #

就算前端加了哈希，如果服务器的缓存配置不对，还是会出问题：

• 带哈希的静态文件（比如*.js、*.css、图片等）：可以设置长期缓存（比如1年），因为文件名变了就会触发新的请求，配置示例（以Nginx为例）：

  location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg)$ {
      expires 1y;
      add_header Cache-Control "public, immutable";
  }
  

• index.html文件：必须禁用缓存！因为它是应用的入口，里面记录了最新的哈希资源路径，如果缓存了旧的index.html，浏览器还是会请求旧的JS文件，导致语法错误。Nginx配置示例：

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

  如果你用的是其他服务器（比如Apache、IIS），对应调整缓存策略即可，核心就是index.html不缓存，哈希文件长期缓存。

3. 排查构建过程中的语法错误 #

控制台的Uncaught SyntaxError大概率是加载了旧的、和当前构建不兼容的JS文件导致的，但也有可能是构建过程本身出了问题：

• 先在本地运行dist文件夹里的应用（比如用http-server dist），看看会不会报同样的错误。如果本地也报错，说明是构建的问题：
  • 尝试关闭AOT和构建优化器，用命令ng build --prod --env=qa --output-hashing all --no-aot --no-build-optimizer，看看是不是这些优化步骤导致的语法错误。
  • 检查你的第三方依赖，有没有某个库在Angular 5的生产构建中不兼容的情况。

4. 前端兜底的强制刷新方案 #

如果服务器配置暂时没法调整，可以在前端加一些兜底措施：

• 在index.html里添加meta标签，强制浏览器不缓存入口文件：

  <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
  <meta http-equiv="Pragma" content="no-cache" />
  <meta http-equiv="Expires" content="0" />
  

• 做一个版本检测机制：在assets目录下创建version.json，每次构建时更新里面的版本号，应用启动时请求这个文件，对比本地存储的版本，如果不一致就提示用户刷新页面，或者自动触发刷新。

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