compiler-cli: ngtools should accept useFactory (lazy routes) #15305

Bug Report or Feature Request (mark with an x)

- [X] bug report -> please search issues before submitting
- [ ] feature request

Versions.

@angular/cli: 1.0.0-rc.2
node: 6.9.1
os: win32 x64
@angular/common: 4.0.0-rc.5
@angular/compiler: 4.0.0-rc.5
@angular/core: 4.0.0-rc.5
@angular/forms: 4.0.0-rc.5
@angular/http: 4.0.0-rc.5
@angular/platform-browser: 4.0.0-rc.5
@angular/platform-browser-dynamic: 4.0.0-rc.5
@angular/router: 4.0.0-rc.5
@angular/compiler-cli: 4.0.0-rc.5

Repro steps.

I'm reposting this issue to @angular repository, because I've found out that the issue is more related to compiler-cli than angular-cli itself.

First of all, I'd like to let you know that there were already two discussions related to this topic (#4686 and #4541), however #4686 was closed by @filipesilva due to the similarities with #4541.

Actually, #4541 points to slightly different topic (it's a feature request), which could potentially cause ignoring the issue that I'm trying to report.

In order to reproduce this error, first install the @nglibs/i18n-router package (which is aimed to be a route internationalization solution for Angular v2.x.x and v4.x.x), and then set up the module configuration in app.module.ts.

I'll not copy the whole code here, as solution files are located on angular-cli branch of @nglibs/example-app. The solution depends on @angular v2.4.7 & @angular/cli v1.0.0-beta.30 but the issue occurs on @angular v4.0.0-rc.5 &@angular/cli v1.0.0-rc.2 as well.

Then, in a feature module (here used AboutModule as an example), use the @nglibs/i18n-router by importing I18NRouterModule and replace the RouterModule.forChild(routes) import with I18NRouterModule.forChild(routes, 'about') - which provides ROUTES and ANALYZE_FOR_ENTRY_COMPONENTS to Angular the same way that the router module does (see below):

• https://github.com/angular/angular/blob/master/packages/router/src/router_module.ts#L209

about.module.ts

import { I18NRouterModule } from '@nglibs/i18n-router';

@NgModule({
  imports: [
    CommonModule,
    // RouterModule.forChild(routes)
    I18NRouterModule.forChild(routes, 'about')
  ],
  declarations: [
    AboutComponent,
    AboutUsComponent,
    AboutBananaComponent,
    AboutApplePearComponent
  ]
})

The log given by the failure.

Error: Cannot read property 'loadChildren' of undefined

Mention any other details that might be useful.

First of all, this issue does not occur when compiling the app on JiT. Also, using ngc from the command line, and ng-router-loader in webpack configuration results with success on AoT.

The issue occurs only with @ngtools/webpack.

The solution files to repro this issue are located on angular-cli branch of @nglibs/example-app.

After some research, and in-depth digging of @ngtools/webpack source code, I've found the lines of code which is responsible for the issue.

Passing a factory method (useFactory) for the DI token ROUTES causes the discovery of lazy-routes to fail:

i18n-router.ts

static forChild(routes: Routes, moduleKey: string): ModuleWithProviders {
  return {
    ngModule: I18NRouterModule,
    providers: [
      provideRoutes([]),

      ...

      {
          provide: ROUTES,
          useFactory: (provideChildRoutes),
          deps: [I18NRouterService, RAW_ROUTES, MODULE_KEY],
          multi: true
        },
        {
          provide: ANALYZE_FOR_ENTRY_COMPONENTS,
          useValue: routes,
          multi: true
        }
      ]
  }
}

However, if I provide child routes unprocessed (simply pass useValue: routes instead of useFactory: ..., deps: ...), then the @ngtools/webpack can find the lazy routes.

Analyzing the issue line-by-line, I came across with the @ngtools/webpack, the listLazyRoutesOfModule function.

• https://github.com/angular/angular/blob/4.0.0-rc.5/packages/compiler-cli/src/ngtools_impl.ts#L57

Desired functionality.

The listLazyRoutesOfModule function of @ngtools/webpack should be able to discover lazy routes supplied by a factory method (useFactory) for the DI token ROUTES.