Angular 2 Eager Loading Maximum Call Stack Size Exceeded

So my issue is that i would like to preload all of my child route modules. I have the below in my root routing module

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

AppCustomPreloader looks like the following

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

}
}

For each of the routes in my nested routing module, i have given each one an attribute of data: "true" like below

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

Everything preloads correctly but i am getting "Maximum Call Stack Size Exceeded" error in chrome and "Too much recursion" in Firefox.

I have about 10 modules that get preloaded and they are all relatively small. Is the issue that the stack size is actually too big or is the issue that i am missing some sort of infinite routing module load. What is a good way to debug the 2 possibilities?

Solution

Without posting your routes it's hard to say. Here's some steps that helped me build a very complex router:

You could try changing your RouterModule import to RouterModule.forRoot(appRoutes, { preloadingStrategy: AppCustomPreloader, enableTracing: true }) for more insight on what is happening.
Check out Augury, it is a Chrome extension that helps debugging with Angular apps. The key tool for your situation is a visual representation of your routing tree.