小编ang*_*eor的帖子

如何处理angular2延迟加载路由失败

我正在使用角度2懒惰路由.客户端使用AOT和angular-router-loader捆绑webpack2到延迟加载子级.当浏览器连接时,一切都按预期工作,即我可以成功地将路由器导航到延迟加载的模块,块成功加载,我可以查看组件等.

但是,如果我模拟断开连接(例如,通过使用脱机chrome开发人员工具选项)路由失败,正如预期的那样,因为它无法加载相关的块.错误是'加载块[块号]失败'

之后没有路由命令工作,就像路由器坏了.

我试图使用全局ErrorHandler处理错误.我的想法是,也许我可以在它破坏路由器之前捕获错误,但似乎到时候已经太晚了.当我发现错误时,路由器无法正常工作.

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

import { Router } from '@angular/router';

@Injectable()
export class CustomErrorHandler extends ErrorHandler {
    constructor(private injector: Injector) {
        super(false);
    }

    private get router(): Router {
        return this.injector.get(Router, null);
    }

    public handleError(error: Error) {
        if (/Loading chunk [\d]+ failed/.test(error.message)) {
            console.info('Offline mode');
            let router = this.router;
            if (router) {
                router.navigateByUrl('/offline').then(t => console.debug(t+'')).catch(t=> console.debug(t));
            } else {
                window.location.href = '/';
            }
        }
    }
}

Run Code Online (Sandbox Code Playgroud)

自定义错误处理程序有效,因为打印了"脱机模式"消息.注入也有效,路由器不为空,但是路由器导航不起作用,路由器承诺未解决也没有被拒绝.

我想要完成的是处理错误(例如向用户显示信息性消息)并同时使路由器处于工作状态,以便用户可以稍后导航(当恢复互联网连接时)没有重新加载整个页面.