Cannot read property 'loadChildren' of undefined

[fulls1z3]

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.

[Meligy]

That's where the lazy route discovery is happening:

https://github.com/angular/angular/blob/master/modules/%40angular/compiler-cli/src/ngtools_impl.ts#L56

I wasn't even aware there're other alternatives to this, but to start with, it seems to be considering the ROUTES bit:

// We cannot depend directly to @angular/router.
type Route = any;
const ROUTER_MODULE_PATH = '@angular/router/src/router_config_loader';
const ROUTER_ROUTES_SYMBOL_NAME = 'ROUTES';

...

  const ROUTES = reflector.findDeclaration(ROUTER_MODULE_PATH, ROUTER_ROUTES_SYMBOL_NAME);

No idea about ANALYZE_FOR_ENTRY_COMPONENTS (maybe the core team of the CLI has better idea).

I wouldn't expect focus on this one from the core team before v1.0 final (could be wrong). Would you have any idea extending the above file to cater for your case?

[filipesilva]

I think this is essentially the same issue as #4541, please have a look.

[fulls1z3]

Hi @filipesilva, I've read #4541 and @christopherthielen talks about more or less a similar functionality.

Currently waiting for updates, and many thanks for your attention 👍

[fulls1z3]

First of all I'd like to say thanks to @christopherthielen, for all the details he provided on #4541. This information was very helpful while analyzing the issue with @nglibs/i18n-router.

As far as I can progress, I've found out that if I provide child routes unprocessed, then the @ngtools/webpack can find the lazy routes.

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

Now, the challenge is to get the @ngtools/webpack identify routes provided by useFactory.

[bevlison]

I had the error. Found the cause in my case, want to share
in the TS app-routes module (of angular 5 project) I made a syntax error :

const routes: Routes = [
{ path: '', redirectTo:'/', pathMatch: 'full' }
, { path: 'a', component : aComponent }
, { path: 'a/detail/:id', component: aDetailComponent },
, { path: 'b', component : bComponent }
, { path: 'b/detail/:id', component : bDetailComponent }
];

The error is the

,

at the end of the 4th line, which delivers an empty element in the Routes array, which delivers the loadChildren error.

[akash-potdar7]

I had the same error as well, but the problem was I had move the app-router.module.ts outside app folder.

[tomsaleeba]

I had the same error but yet another cause. I was dynamically assigning a key to the routes object:

const routes: Routes = [{
  path: '',
  component: SomeComponent,
  children: [{
    path: 'blah',
    component: BlahCreateComponent,
    resolve: {
      [SOME_CONSTANT]: SomeResolver, // <-- you can't do this
    },
  }],
}]

I was only able to track down the issue by doing ng build --prod --aot which gave me an more descriptive error.

[thiagofrancisquete]

@tomsaleeba and how you fixed it? you just deleted the resolve part?

[skorenb]

@tomsaleeba
thank you for this clue.
i did similar thing: i set a constant as key

{
    path: 'feature',
    loadChildren: '...path-to-module...',
    data: {
        'menu-bar': MenuBar.Show,
        [AFTER_LOGIN_PRELOADING_STRATEGY]: true
    }
}

it's properly to set a key as direct definition or instant string value like data: { YEAR: 2018, 'month-text': 'August' }

[tomsaleeba]

@thiagofrancisquete as @KorenB mentioned, it seems like you can't dynamically set the key of the object (using that syntax with the square braces [SOME_KEY]. Instead, you need to directly define the key.

As a concrete example, assume I was trying to assing the dynamic key like this

const SOME_CONSTANT = 'theKey'
...
    resolve: {
      [SOME_CONSTANT]: SomeResolver,
    },
...

...to fix it, you need to do this:

...
    resolve: {
      theKey: SomeResolver,
    },
...

[vsagar9944]

I had faced same issue. In My case I had not included my Route resolver in provider property of NgModule.
After declaring in provider this issue get fixed.