angular - 如何克服 Angular 延迟加载模块加载 block 失败的问题

Question

如果我对 Angular 应用程序进行更改， block 名称将在构建时更改，旧版本将从 dist 文件夹中删除。部署后，如果用户当前在网站上，然后导航到网站的另一部分，我会收到“加载 block 失败”错误，因为旧文件不再存在。

我的应用是使用 Angular CLI 构建的，并使用 webpack 打包。

有什么办法可以解决这个问题吗？

Answer 1

下面的更新解决方案首选解决方案是转换为 PWA

---

我遇到了同样的问题，并找到了其他答案中未提及的非常简洁的解决方案。

您使用全局错误处理并在 block 失败时强制应用重新加载。

import {ErrorHandler, Injectable} from '@angular/core';

@Injectable()
export class GlobalErrorHandler implements ErrorHandler {
  
  handleError(error: any): void {
   const chunkFailedMessage = /Loading chunk [\d]+ failed/;

    if (chunkFailedMessage.test(error.message)) {
      window.location.reload();
    }
    console.error(error);
  }
}

这是一个简单的解决方案并且here (Angular Lazy Routes & loading chunk failed)是我从中得到的文章。

---

编辑:转换为 PWA

另一种解决方案是将您的 Angular 站点转换为 PWA (渐进式 Web 应用程序)。它所做的是添加一个可以缓存所有 block 的服务 worker 。每次网站更新时，都会从后端加载一个新的 list 文件，如果有更新的文件，服务人员将获取所有新 block 并通知用户更新。

Here是关于如何将您当前的 Angular 网站转换为 PWA 的教程。通知用户新的更新非常简单:

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

@Injectable()
export class PwaService {
  constructor(private swUpdate: SwUpdate) {
    swUpdate.available.subscribe(event => {
      if (askUserToUpdate()) {
        window.location.reload();
      }
    });
  }
}