Creating ROUTES with custom factory function ends up with "Cannot read property 'loadChildren' of undefined" error #9913
Description
Versions
node 6.11.5
npm 5.6.0
angular 5.2.8
@ngtools/webpack 1.10.2
Repro steps
We have a custom webpack setup that uses @ngtools/webpack . Everything has been working good for us so far, in both JiT and AoT. Right now we are trying to setup lazy routes.
We wanted to implement them using the standard way (loadChildren: '../features/dashboard/dashboard.module#DashboardFeatureModule'), but it just didn't work. (We tried and checked everything.) Anyways, it doesn't matter, because loadChildren can accept a function returning a promise with ngModule. So we decided to load the module ourselves.
Example:
import { NgModule, NgModuleFactory, Compiler } from '@angular/core';
import { Routes, RouterModule, ROUTES } from '@angular/router';
export function MainRoutingLazyRoutesFactory(compiler: Compiler): Routes {
return [
{
path: 'dashboard',
loadChildren: () => {
return <any>System.import('../features/dashboard/dashboard.module')
.then(({ DashboardFeatureModule }) => DashboardFeatureModule)
.then(ngModule => {
if (ngModule instanceof NgModuleFactory) {
return ngModule;
} else {
return compiler.compileModuleAsync(ngModule);
}
});
},
},
];
}
@NgModule({
imports: [RouterModule],
exports: [RouterModule],
providers: [
{
provide: ROUTES,
multi: true,
deps: [Compiler],
useFactory: MainRoutingLazyRoutesFactory,
},
],
})
export class MainRoutingModule {}Observed behavior
It fails with the following error during the first compilation in JiT and in any compilation in AoT:
ERROR in Cannot read property 'loadChildren' of undefined
webpack: Failed to compile.
(It leaves no stacktrace).
In JiT with webpack-dev-server, if you trigger a recompilation (by changing any file), it compiles correctly since the 2nd compilation and on every following one.
Seems like angular's compiler has some trouble while trying to parse our factory function. Should it parse it at all? I think we don't need the compiler to parse it all. Do you know any workaround, so we can fix the error, so the compiler parses it correctly or just doesn't try to parse it at all?
Desired behavior
Defining routes with a custom FactoryProvider should just work.
It lets you to easily implement lazy loaded modules with a custom way.
Additional note
If we downgrade to angular 5.2.5 and ngtools/webpack 1.10.0, then it behaves in the same way, but the error includes a stacktrace as well:
ERROR in TypeError: Cannot read property 'loadChildren' of undefined
at _collectLoadChildren (/Users/jtomaszewski/src/recruitee/rails/admin_app/node_modules/@angular/compiler/bundles/compiler.umd.js:29034:20)
at listLazyRoutes (/Users/jtomaszewski/src/recruitee/rails/admin_app/node_modules/@angular/compiler/bundles/compiler.umd.js:29009:49)
at AotCompiler.listLazyRoutes (/Users/jtomaszewski/src/recruitee/rails/admin_app/node_modules/@angular/compiler/bundles/compiler.umd.js:31150:51)
at AngularCompilerProgram.listLazyRoutes (/Users/jtomaszewski/src/recruitee/rails/admin_app/node_modules/@angular/compiler-cli/src/transformers/program.js:156:30)
at AngularCompilerPlugin._listLazyRoutesFromProgram (/Users/jtomaszewski/src/recruitee/rails/admin_app/node_modules/@ngtools/webpack/src/angular_compiler_plugin.js:304:38)
at Promise.resolve.then.then (/Users/jtomaszewski/src/recruitee/rails/admin_app/node_modules/@ngtools/webpack/src/angular_compiler_plugin.js:583:50)
at process._tickCallback (internal/process/next_tick.js:109:7)
webpack: Failed to compile.