部署新版本后，即使在清除缓存后，浏览器也会看到Angular应用程序的旧版本

我有一个Angular 11应用程序，我正在构建该应用程序，以便在生产环境中使用以下命令进行部署：

npm install
npm run build -- --prod --outputHashing=all

我遇到的问题是，一旦部署，当我使用浏览器访问应用程序的URL时，仍然会看到应用程序的旧版本

我最初认为这是一个缓存问题，尽管我是使用

--outputHashing=all

选项编译的（据我所知，dist文件夹中的输出文件似乎有随机文件名）。情况似乎是这样的：如果我在禁用Chrome开发选项中的缓存后刷新页面，它现在会显示更新的应用程序

然而，问题是：如果我关闭浏览器并再次打开它。。。我又去看旧的应用程序了！因此，清除缓存似乎是一个临时解决方案

经过进一步调查，我怀疑这与angular的

服务人员

有关，因为当我打开Chrome的开发工具加载页面时，我可以看到很多网络呼叫被标记为服务人员提供的

然而，我不是一个足够的角度专家，不知道如何进一步诊断。我已经在angular的网站上阅读了关于服务人员的文档，但它并没有帮助我弄清楚问题到底出在哪里。谁能给我指出正确的方向吗？这是我的service worker配置文件，它是在创建应用程序时自动生成的。如果我还需要提供其他文件，请告知我：

{
  "$schema": "./node_modules/@angular/service-worker/config/schema.json",
  "index": "/index.html",
  "assetGroups": [
    {
      "name": "app",
      "installMode": "prefetch",
      "resources": {
        "files": [
          "/favicon.ico",
          "/index.html",
          "/manifest.webmanifest",
          "/*.css",
          "/*.js"
        ]
      }
    },
    {
      "name": "assets",
      "installMode": "lazy",
      "updateMode": "prefetch",
      "resources": {
        "files": [
          "/assets/**",
          "/*.(eot|svg|cur|jpg|png|webp|gif|otf|ttf|woff|woff2|ani)"
        ]
      }
    }
  ]
}

如果有什么不同的话，该应用程序托管在一个运行嵌入式Katana Web服务器的.NET核心服务中，但它看不出这会有什么不同，它只是为文件提供服务，没有进一步的操作。
即使文件名都是散列的，也帮不了什么忙。唯一的方法是执行Ctrl+Shift+R进行硬刷新，或者执行任何硬刷新操作，在javascript中，
location.reload（）
是唯一的方法

好消息是，我们有PWA（服务人员）可以在您的浏览器上检测到您站点的所有更改

只需添加
ng add@angular/pwa
，您就可以与服务人员集成

然后用它来检测变化

将此代码添加到
app.component.ts

  hasUpdate = false;

  constructor(
    private swUpdate: SwUpdate,
  ) {
  }

  ngOnInit(): void {
    // check for platform update
    if (this.swUpdate.isEnabled) {
      interval(60000).subscribe(() => this.swUpdate.checkForUpdate().then(() => {
        // checking for updates
      }));
    }
    this.swUpdate.available.subscribe(() => {
      this.hasUpdate = true;
    });
  }

  reloadSite(): void {
    location.reload();
  }


当有
hasUpdate
is
true
时，您可以向用户显示一些警报消息，当用户选择该消息时，您可以调用函数
location.reload

<div *ngIf="hasUpdate">
  <button (click)="reloadSite()">Reload</button>
</div>


重新加载

这是处理此缓存问题的最佳方法