javascript - Angular Uncaught( promise ): ChunkLoadError: Loading chunk XXXfailed

Question

我正在使用 Angular 12，并且我使用 Service Worker 来部署新版本。
看起来每次我将新版本部署到生产环境(并且由于某种原因不在暂存阶段)。一些用户收到一堆错误，例如

Uncaught (in promise): ChunkLoadError: Loading chunk XXX failed.

关于这个问题有很多帖子，但在我看来，解决方案是个案。
与 stg 相比，我在生产中的区别只是。
我打电话 enableProdMode();我有这样的服务人员设置:

    ServiceWorkerModule.register('ngsw-worker.js', {
      enabled:
        environment.env === Environment.PRODUCTION || environment.env === Environment.STAGING,
      registrationStrategy: 'registerWhenStable:30000',
    }),

我的配置看起来像

{
  "$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": "lazy",
      "resources": {
        "files": ["/assets/**", "/*.(eot|svg|cur|jpg|png|webp|gif|otf|ttf|woff|woff2|ani)"]
      }
    }
  ]
}

这就是我显示更新的方式(基本上是一个可以忽略的横幅):

@Component({
  selector: 'app-live-update-notifier',
  templateUrl: './live-update-notifier.component.html',
  styleUrls: ['./live-update-notifier.component.scss'],
})
export class LiveUpdateNotifierComponent implements OnDestroy {
  hasUpdate = false;
  isIgnored = false;

  private subscription = new SubSink();

  constructor(
    @Inject(DOCUMENT) private document: Document,
    private swUpdate: SwUpdate,
    private appRef: ApplicationRef,
    private changeDetectorRef: ChangeDetectorRef
  ) {
    const appIsStable$ = this.appRef.isStable.pipe(first((isStable) => isStable === true));
    const everySixHours$ = interval(6 * 60 * 60 * 1000);
    const everySixHoursOnceAppIsStable$ = concat(appIsStable$, everySixHours$);

    if (swUpdate.isEnabled) {
      this.subscription.add(
        everySixHoursOnceAppIsStable$.subscribe(() => swUpdate.checkForUpdate()),
        this.swUpdate.available.subscribe((evt) => {
          if (evt.type === 'UPDATE_AVAILABLE') {
            this.hasUpdate = true;
            this.changeDetectorRef.detectChanges();
          }
        })
      );
    }
  }

  ngOnDestroy(): void {
    this.subscription.unsubscribe();
  }

  updateApp() {
    this.document.location.reload();
  }

  skipNotification() {
    this.isIgnored = true;
  }
}

如果您有任何线索可以指导解决方案，谢谢。
编辑 :
我的应用程序中有一堆延迟加载的模块。我认为原因是某些模块在新版本之前没有加载，当用户在部署后导航到它们时，他们会遇到这个 block 问题。但我试图通过

编辑模块 A 和 B

部署

导航到模块 A

编辑模块 A 和 B

部署

从旧 A 导航到旧模块 B，因此无需更新 APP 版本
RES : 旧 B 仍然正常加载

所以我不认为这是这个问题

Answer 1

这可能是由不同的原因造成的。但是由于spock123，我在几个月前使用了一种解决方法。 .
我引用他的话:

We are of course using the Service Worker service swUpdate to get notifications when a new version is available. However, it seems sometimes not all lazy loaded chunks are updated when there is a new SW version.

基本上解决方法是在遇到错误 bundle not found 时重新加载应用程序。导致错误 ChunkLoadError .
您必须在全局范围内监听错误，如果应用程序遇到此错误，您只需重新加载页面。
Instructions to set global error handler

更新:
我来自 angular.io :
处理不可恢复的状态
在某些情况下，服务 worker 用来为客户端提供服务的应用程序版本可能处于损坏状态，如果不重新加载整个页面，就无法恢复。
例如，想象以下场景:

用户第一次打开应用，Service Worker 缓存了应用的最新版本。假设应用程序的缓存 Assets 包括 index.html , main.<main-hash-1>.js和 lazy-chunk.<lazy-hash-1>.js .

用户关闭应用程序并暂时不打开它。

一段时间后，将应用程序的新版本部署到服务器。这个较新的版本包括文件 index.html , main.<main-hash-2>.js和 lazy-chunk.<lazy-hash-2>.js (请注意，现在哈希值不同了，因为文件的内容发生了变化)。服务器上不再提供旧版本。

与此同时，用户的浏览器决定驱逐lazy-chunk.<lazy-hash-1>.js。从它的缓存中。浏览器可能决定从缓存中逐出特定(或所有)资源以回收磁盘空间。

用户再次打开应用程序。 Service Worker 提供目前已知的最新版本，即旧版本( index.html 和 main.<main-hash-1>.js )。

稍后，应用程序请求惰性捆绑包 lazy-chunk.<lazy-hash-1>.js .

服务 worker 无法在缓存中找到 Assets (请记住浏览器已将其驱逐)。它也不能从服务器检索它(因为服务器现在只有更新版本的 lazy-chunk.<lazy-hash-2>.js)。

在前面的场景中，服务 worker 无法为通常会被缓存的 Assets 提供服务。 该特定应用程序版本已损坏，并且无法在不重新加载页面的情况下修复客户端状态。 在这种情况下，Service Worker 通过发送 UnrecoverableStateEvent 通知客户端。事件。订阅 SwUpdate#unrecoverable得到通知并处理这些错误。
处理不可恢复状态.service.ts:

@Injectable()
export class HandleUnrecoverableStateService {
  constructor(updates: SwUpdate) {
    updates.unrecoverable.subscribe(event => {
      notifyUser(
        'An error occurred that we cannot recover from:\n' +
        event.reason +
        '\n\nPlease reload the page.'
      );
    });
  }
}