@ngtools/webpack should accept useFactory for the DI token ROUTES

[fulls1z3]

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.

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/cli v1.0.0-beta.30 but happens on 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.

[fulls1z3]

Referenced issues:

• Cannot read property 'loadChildren' of undefined #4686
• @ngtools/webpack feature request: support code splitting by third parties #4541

[fulls1z3]

Reposted on @angular repository angular/angular#15305, closing this

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}