Angular 14缓存刷新问题：Azure部署后用户仍显示旧版本

你已经启用了--output-hashing=all但仍存在缓存问题，核心原因通常是入口文件index.html被缓存，或是Angular Service Worker的缓存机制未正确配置，再加上Azure平台的默认缓存策略放大了这个问题。以下是针对性的解决步骤：

1. 强制index.html不被缓存 #

Angular的哈希机制只处理js/css等静态资源，但index.html作为入口文件，如果被浏览器或Azure CDN缓存，用户会一直加载旧的index，进而请求旧的资源。

在Azure中配置缓存策略 #

如果是部署到Azure静态网站，创建staticwebapp.config.json文件放在项目根目录（构建后会被打包到dist），添加以下规则：

{
  "routes": [
    {
      "route": "/*",
      "serve": "/index.html",
      "statusCode": 200
    }
  ],
  "responseOverrides": {
    "/*.html": {
      "headers": {
        "Cache-Control": "no-cache, no-store, must-revalidate"
      }
    },
    "/*.js": {
      "headers": {
        "Cache-Control": "public, max-age=31536000, immutable"
      }
    },
    "/*.css": {
      "headers": {
        "Cache-Control": "public, max-age=31536000, immutable"
      }
    },
    "/assets/*": {
      "headers": {
        "Cache-Control": "public, max-age=31536000, immutable"
      }
    }
  }
}

这个配置让index.html完全不缓存，而带哈希的静态资源可以长期缓存（因为哈希变了就会是新文件）。

2. 配置Angular Service Worker的更新策略 #

你启用了Angular Service Worker，默认情况下SW会缓存资源，需要确保它能检测到新版本并自动更新：

修改ngsw-config.json #

确保你的配置包含更新检查：

{
  "index": "/index.html",
  "assetGroups": [
    {
      "name": "app",
      "installMode": "prefetch",
      "updateMode": "prefetch",
      "resources": {
        "files": [
          "/favicon.ico",
          "/index.html",
          "/manifest.webmanifest",
          "/*.css",
          "/*.js"
        ]
      }
    },
    {
      "name": "assets",
      "installMode": "lazy",
      "updateMode": "prefetch",
      "resources": {
        "files": [
          "/assets/**"
        ]
      }
    }
  ]
}

设置updateMode: "prefetch"让SW在后台自动检查并下载新版本。

在AppComponent中监听SW更新 #

在app.component.ts中添加代码，主动检查更新并提示用户：

import { Component, OnInit } from '@angular/core';
import { SwUpdate } from '@angular/service-worker';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
  constructor(private swUpdate: SwUpdate) {}

  ngOnInit(): void {
    if (this.swUpdate.isEnabled) {
      this.swUpdate.checkForUpdate().then((available) => {
        if (available) {
          this.swUpdate.activateUpdate().then(() => {
            window.location.reload();
          });
        }
      });

      this.swUpdate.versionUpdates.subscribe(event => {
        if (event.type === 'VERSION_READY') {
          if (confirm('新版本已发布，是否立即刷新？')) {
            window.location.reload();
          }
        }
      });
    }
  }
}

这段代码会自动检查更新，发现新版本后提示用户刷新，或者直接自动刷新（根据需求调整）。

3. 验证构建产物 #

确认构建后的dist目录中，js/css等文件的文件名带有哈希值（比如main.7f9d2.js），如果没有，检查：

• 确保构建命令正确使用了--output-hashing=all，你的package.json和angular.json配置已经正确，重新执行构建命令验证。
• 检查是否有构建脚本覆盖了默认配置，比如是否有额外的webpack配置修改了输出文件名。

4. Azure部署时的清理步骤 #

每次部署前，确保Azure静态网站的旧资源被正确替换：

• 如果使用Azure DevOps或GitHub Actions部署，确保部署任务是完全替换dist目录的内容，而不是增量上传。
• 可以手动在Azure门户的静态网站管理中，清除CDN缓存（如果启用了CDN）。

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