如果我对 Angular 应用程序进行更改, block 名称将在构建时更改,旧版本将从 dist 文件夹中删除。部署后,如果用户当前在网站上,然后导航到网站的另一部分,我会收到“加载 block 失败”错误,因为旧文件不再存在。
我的应用是使用 Angular CLI 构建的,并使用 webpack 打包。
有什么办法可以解决这个问题吗?
最佳答案
下面的更新解决方案 首选解决方案是转换为 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();
}
});
}
}
关于angular - 如何克服 Angular 延迟加载模块加载 block 失败的问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49198268/