Angular 缓存加载过时的 index.html 文件

Question

我的应用程序在加载后运行顺畅。但是，一段时间后我第一次尝试加载应用程序时，我得到一个白页。控制台显示错误： Failed to load resource: the server responded with a status of 404 () main.hash2.js:1

（hashX 将被替换为常规哈希）

当我在服务器上查看时，主文件名为 main.hash3.js，这解释了请求失败的原因（main.hash2.js 是应用程序先前版本的主文件的名称）。我的问题是：为什么我的应用程序尝试获取过时的主文件而不是新的主文件？

我的 ngsw.json 看起来像这样：

{
    "configVersion": 1,
    "index": "/index.html",
    "assetGroups": [
      {
        "name": "app",
        "installMode": "prefetch",
        "updateMode": "prefetch",
        "urls": [
          "/favicon.ico",
          "/index.html"
        ],
        "patterns": []
      },
      {
        "name": "assets",
        "installMode": "lazy",
        "updateMode": "prefetch",
        "urls": [
          "/assets/android-chrome-192x192.png",
          "/assets/apple-touch-icon.png",
          "..."
        ],
        "patterns": []
      }
    ],
    "dataGroups": [],
    "hashTable": {
      "/favicon.ico": "zerzeraezrazerazerz",
      "/index.html": "sqdfdezqreqqefrdddwfsfzqeff",
      "...": "..."
    },
    "navigationUrls": [
      {
        "positive": true,
        "regex": "^\\/.*$"
      },
      {
        "positive": false,
        "regex": "^\\/(?:.+\\/)?[^/]*\\.[^/]*$"
      },
      {
        "positive": false,
        "regex": "^\\/(?:.+\\/)?[^/]*__[^/]*$"
      },
      {
        "positive": false,
        "regex": "^\\/(?:.+\\/)?[^/]*__[^/]*\\/.*$"
      }
    ]
  }

从this tutorial来看，我认为配置了

我尝试在“资产”组中将“懒惰”模式更改为“预取”，然后将我的 dist 文件夹推送到类似 prod 的环境中。但是当我尝试在 Firefox 上加载我的页面时，我再次收到错误消息。当我比较浏览器和服务器上的 index.html 文件时，它们是不同的。

我不明白如何确保我的浏览器每次都加载最新版本。

Answer 1

1.import serverice worker 并在发生更改时强制重新加载站点

2.app.component.ts

import { SwUpdate } from '@angular/service-worker';

constructor(
    updates: SwUpdate
  ) {
   
    if (updates.isEnabled) {
      updates.available.subscribe(() => {
        if (confirm('New version available. Load New Version?')) {
          window.location.reload();
        }
      });
    }