升级Angular 17至18后部署ASP.NET Core 8到Azure Web App异常

问题场景 #

将ASP.NET Core 8.0解决方案的前端从Angular 17升级至Angular 18后：

• 本地运行、构建均正常，开发者工具显示已使用Angular 18
• Azure DevOps构建成功，日志符合Angular 18特征，部署到Azure Web App操作显示成功
• 但打开部署后的Web App，前端仍运行Angular 17，所有修改未生效，怀疑是缓存导致

排查与解决步骤 #

• 强制清理客户端缓存
  按Ctrl + Shift + R（Windows/Linux）或Cmd + Shift + R（Mac）强制刷新浏览器，跳过本地缓存加载页面。若涉及多用户，可引导用户执行相同操作，或在页面添加缓存刷新提示。

• 验证Azure DevOps构建输出
  确认构建产物为Angular 18版本：

  • 查看构建日志，确认存在Angular CLI: 18.x.x的版本标识
  • 下载构建产物包，解压后检查dist目录下的main.js、polyfills.js等文件，确认包含@angular/core@18.x.x这类Angular 18的版本信息

• 清理Azure Web App服务器端缓存与旧文件

  1. 登录Azure门户，进入目标Web App的高级工具（Kudu），访问地址为https://<你的WebApp名称>.scm.azurewebsites.net/
  2. 在wwwroot目录下检查是否存在旧的Angular 17静态文件，若有则手动删除
  3. 进入Web App的常规设置，找到静态内容部分，临时关闭静态缓存后重新部署测试

• 启用Angular构建的缓存破坏机制
  在angular.json中确保开启文件名哈希，让每次构建生成带唯一哈希的静态文件，避免缓存冲突：

  "outputHashing": "all"
  

  该配置会给JS、CSS等文件添加哈希后缀，确保新版本资源不会被旧缓存覆盖。

• 调整ASP.NET Core静态文件缓存策略
  在Program.cs中添加缓存控制头，强制浏览器校验资源有效性：

  app.UseStaticFiles(new StaticFileOptions
  {
      OnPrepareResponse = ctx =>
      {
          ctx.Context.Response.Headers.Append("Cache-Control", "no-cache, no-store, must-revalidate");
          ctx.Context.Response.Headers.Append("Pragma", "no-cache");
          ctx.Context.Response.Headers.Append("Expires", "0");
      }
  });
  

  验证问题解决后，可根据需求调整为更合理的缓存策略（如设置短有效期）。

• 重新部署并核对部署日志
  重新触发Azure DevOps部署，仔细查看部署日志，确认所有静态文件都已成功上传至Web App的wwwroot目录，无文件遗漏或上传失败记录。

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