Question

所以我的问题是我想预加载我所有的子路由模块。我在根路由模块中有以下内容

RouterModule.forRoot(appRoutes, { preloadingStrategy: AppCustomPreloader })

AppCustomPreloader如下所示

export class AppCustomPreloader implements PreloadingStrategy {

preload(route: Route, load: Function): Observable<any> {
    try {
        return route.data && route.data.preload ? load() : Observable.of(null);
    }
    catch (ex) {
        console.log('error');
    }

}
}

对于我的嵌套路由模块中的每个路由，我给每个路由一个数据属性：“true”，如下所示

{
    path: 'somepage',
    loadChildren: './somedirectory/somemodule.module#SomeModule',
    data: { preload: true }
}

所有内容都正确预加载但我在Chrome中出现“最大调用堆栈大小超出”错误，在Firefox中出现“太多递归”。

我有大约10个预加载的模块，它们都相对较小。问题是堆栈大小实际上是太大还是我错过了某种无限路由模块负载的问题。调试这两种可能性的好方法是什么？

Answer 1

如果不发布您的路线，很难说。以下是帮助我构建一个非常复杂的路由器的一些步骤：

您可以尝试将您的RouterModule导入更改为RouterModule.forRoot(appRoutes, { preloadingStrategy: AppCustomPreloader, enableTracing: true })，以便更深入地了解正在发生的事情。
查看Augury，它是Chrome扩展程序，可帮助调试Angular应用程序。适合您情况的关键工具是路由树的直观表示。

Angular 2 Eager加载最大调用堆栈大小超过

1 个答案: