angular-cli: Cannot read property 'loadChildren' of undefined

Please provide us with the following information:

OS?

Windows 10

Versions.

@angular/cli: 1.0.0-beta.30 node: 6.9.1 os: win32 x64 @angular/common: 2.4.7 @angular/compiler: 2.4.7 @angular/core: 2.4.7 @angular/forms: 2.4.7 @angular/http: 2.4.7 @angular/platform-browser: 2.4.7 @angular/platform-browser-dynamic: 2.4.7 @angular/router: 3.4.7 @angular/cli: 1.0.0-beta.30 @angular/compiler-cli: 2.4.7

Repro steps.

feature.module.ts Using @nglibs/i18n-router to provide route translations for feature modules (lazy loaded).

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

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

The whole solution is located on github: angular-cli branch of @nglibs/example-app.

The log given by the failure.

Can’t talk about a stack trace, but hope it will be helpful:

$ ng serve
** NG Live Development Server is running on http://localhost:4200. **
Hash: ddefd75abb9ca8b82bd4                                                      Time: 18958ms
chunk    {0} polyfills.bundle.js, polyfills.bundle.map (polyfills) 222 kB {4} [initial] [rendered]
chunk    {1} main.bundle.js, main.bundle.map (main) 8.61 kB {3} [initial] [rendered]
chunk    {2} styles.bundle.js, styles.bundle.map (styles) 10 kB {4} [initial] [rendered]
chunk    {3} vendor.bundle.js, vendor.bundle.map (vendor) 3.49 MB [initial] [rendered]
chunk    {4} inline.bundle.js, inline.bundle.map (inline) 0 bytes [entry] [rendered]

ERROR in Cannot read property 'loadChildren' of undefined
webpack: Failed to compile.

Mention any other details that might be useful.

@nglibs/i18n-router does not work with @angular-cli (yet), and giving the following error during [AoT compilation]:

ERROR in Cannot read property 'loadChildren' of undefined

I suppose @angular-cli uses @ngtools/webpack for [AoT compilation], expecting RouterModule.forChild(...) to resolve lazy-loaded modules (with loadChildren), which is replaced by I18NRouterModule.forChild(...) - providing routes for feature modules instead.

Here’s the piece of code from i18n-router module line 72, which provides child routes.

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

It 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/modules/%40angular/router/src/router_module.ts#L170
• https://github.com/angular/angular/blob/master/modules/%40angular/router/src/router_module.ts#L204

However, angular-cli seems insisting ignoring the provided child routes and firing errors.

To resolve this issue temporarily, I switched using [ng-router-loader]. Hence @angular-cli doesn’t allow modifying the webpack configuration, I need to manually configure build tools (dev/prod sever, task runners, webpack, etc).

I think loadChildren should be able to recognize routes provided with ROUTES and ANALYZE_FOR_ENTRY_COMPONENTS.