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

编程问答 2022-12-04

问题描述

我的应用程序加载后运行流畅。但是，一段时间后我第一次尝试加载应用程序时，我得到了一个白页。控制台显示错误： 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","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": "^\\/(?:.+\\/)?[^/]*\\.[^/]*$"
      },"regex": "^\\/(?:.+\\/)?[^/]*__[^/]*$"
      },"regex": "^\\/(?:.+\\/)?[^/]*__[^/]*\\/.*$"
      }
    ]
  }

从this tutorial来看，我认为配置

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

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

解决方法

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();
        }
      });
    }
angularangular-service-worker