Skip to content

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

Closed
@fulls1z3

Description

@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):

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.

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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions