Angular 2.错误：加载块失败

Question

使用带有延迟加载模块的角度2，我可以从服务器接收（例如）401 HTTP代码

bootstrap 0b40fee ...：101 GET http://localhost:8082/2.chunk.js

Error: Loading chunk 2 failed.
at HTMLScriptElement.onScriptComplete (bootstrap 0b40fee…:91)
at HTMLScriptElement.wrapFn (zone.js:1032)
at ZoneDelegate.invokeTask (zone.js:414)
at Object.onInvokeTask (core.es5.js:4119)
at ZoneDelegate.invokeTask (zone.js:413)
at Zone.runTask (zone.js:181)
at HTMLScriptElement.ZoneTask.invoke (zone.js:476)

如何处理这个错误？

Answer 1

我有同样的问题所以我调查了。我找到了解决方案。当我重新部署到另一台服务器并且块有[哈希]时，这发生在我身上。

您可以在catch中捕获错误，如下所示：

ngOnInit() {
    if (!this.previousRouterErrorHandler) {
        this.previousRouterErrorHandler = this.router.errorHandler;
        let that = this;
        this.router.errorHandler = function (err: any) {
            // Handle here. err.message == "Loading chunk chunk-name failed."

            return that.previousRouterErrorHandler.apply(that.previousRouterErrorHandler, arguments);
        };
    }
}

或直接在导航的链接

click() {
    this.router.navigate(['/lazy-route'])
        .catch(err => {
            // Handle here
        });
}

Answer 2

在部署新代码时会发生这种情况。保存文件和哈希值的manifest.js在没有刷新的情况下不会更新，当它加载一个块时，它显然使用了manifest.js中的旧哈希。

因此，在捕获错误时，我们可以使用给定的URL强制重新加载： -

click() {
      this.router.navigate(['/lazy-route'])
           .catch(err => {
              // Handle here
              // reload with given route
              // window.location.pathname('/lazy-route');

              // OR
              // reset existing route(containing query params) with given route and force reload
               window.history.pushState({}, document.title, '/lazy-route' );
               window.location.reload();
           });
 }

Answer 3

任何环境或路由相关问题都可能引发与块相关的错误，使其难以揭穿。

在我的情况下，我的PWA中移动的数据量太大，无法通过角度路由器处理。它充斥着js块getter的头部，因此引发了bad_request错误。

我建议你查看那些网络调用（像http://localhost:xxxx/158.js这样的chunks.js的getter），以查找当前开发环境中标题和重构粗略内容的任何异常情况，因为这是一个真正的黑洞时间来自己研究错误的来源。

希望这会有所帮助

Answer 4

这可能意味着未处理的异常。你必须以任何你想要的方式处理服务器的错误响应（4xx，5xx状态代码）：在某处显示错误消息，重定向到某个页面，做任何事情，但不要让它处理不当。

例如：

return this.http.get(requestDetails)
          .map(res => res.json())
          .catch(err => {
console.log('server error:', err)
Observable.throw(err);
});