如何克服Angular延迟加载模块失败的加载块 [英] How to overcome loading chunk failed with Angular lazy loaded modules

问题描述

如果我更改了我的角度应用程序，则块名称将在构建时更改，并且旧版本将从dist文件夹中删除。一旦部署完毕，如果用户当前在该站点上，然后导航到该站点的另一部分，由于旧文件已不存在，我会收到加载块失败错误。

If I make changes to my angular app the chunk names will change on build and the old version will be remove from the dist folder. Once deployed if a user is currently on the site and then navigated to another part of the site I get a loading chunk failed error as the old file is no longer there.

我的应用是使用angular cli构建的，因此使用webpack打包。

My app is built using angular cli so it's packaged using webpack.

无论如何，这是可以克服的。

Is there anyway this can be overcome.

推荐答案

我遇到了同样的问题，发现了一个非常简洁的解决方案，其他答案中没有提到。

I had the same problem and found a pretty neat solution that is not mentioned in the other answers.

您使用全局错误处理，如果块失败，则强制应用重新加载。

You use global error handling and force app to reload if chunks failed.

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

这是一个简单的解决方案， 此处（ Angular Lazy Routes和加载块失败）是我从中得到的文章。

It is a simple solution and here (Angular Lazy Routes & loading chunk failed) is the article I got it from.

这篇关于如何克服Angular延迟加载模块失败的加载块的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！