Angular-cli: Using function with Routes - AOT error - Cannot read property 'loadChildren' of undefined

[wilker7ribeiro]

Bug Report or Feature Request (mark with an x)

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

Versions.

clean project using 1.1.3

Repro steps.

Create a function to process some routes, then concat with Route array to use with RouterModule.forRoot();
When first time ng serve runs, compilation fails due to AOT error:
"Cannot read property 'loadChildren' of undefined"

The log given by the failure.

Hash: 65d3fc8e5c37db4aefe7
Time: 9450ms
chunk    {0} polyfills.bundle.js, polyfills.bundle.js.map (polyfills) 160 kB {4} [initial] [rende
red]
chunk    {1} main.bundle.js, main.bundle.js.map (main) 12.5 kB {3} [initial] [rendered]
chunk    {2} styles.bundle.js, styles.bundle.js.map (styles) 10.5 kB {4} [initial] [rendered]
chunk    {3} vendor.bundle.js, vendor.bundle.js.map (vendor) 2.47 MB [initial] [rendered]
chunk    {4} inline.bundle.js, inline.bundle.js.map (inline) 0 bytes [entry] [rendered]

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

Desired functionality.

I need to use prepare some of my routes, and I want to make it simple, using a function.
What want to pass to the function:
{path: 'some/path', component: 'SomeCrudComponent', service: 'CrudService'}

Then, it returns me

{path: 'some/path', component: 'OtherComponent', data:{..}, children: [
      {path: 'list', component: 'Other1Component', data:{..}},
      {path: 'edit/:id', component: 'Other2Component', data:{..}, resolve: {item : CrudService}},
      {path: 'new', component: 'Other3Component', data:{..}}
      ...
]}

And then:

const export appRoutes: Routes = [
    {path: 'some/normal/component', component: 'NormalComponent'}
].concat(processRoutesThatNeedIt([
    {path: 'some/path', component: 'SomeCrudComponent', service: 'CrudService'}
]))
...
RouterModule.forRoot(appRoutes)

Mention any other details that might be useful.

Sample project error:
https://github.com/wilker7ribeiro/loadChildrenError

[deebloo]

your routes need to be declared statically. I don't think any sort of dynamically created routes will work. The cli needs to be able to statically analyze your routes so that it can create lazy loadable chunks

[Brocco]

@deebloo is correct, your routes need to be analyzable, closing.

[michaelbromley]

Just as an additional note - I ran into the same error but none of my routes were being dynamically assembled using .concat() or anything similar. In the end it turned out to be due to an anonymous arrow function in a route's data property:

Before

 {
    path: ':id',
    component: ProductDetailComponent,
    data: {
        breadcrumb: (data: any, params: any) => {
            let id = params['id'];
            return id === 'create' ? 'New Product' : data.product.ShortDescription;
        }
    }
}

After:

{
    path: ':id',
    component: ProductDetailComponent,
    data: { breadcrumb: getBreadcrumb }
}

export function getBreadcrumb(data: any, params: any): string {
    let id = params['id'];
    return id === 'create' ? 'New Product' : data.product.ShortDescription;
}

[angular-automatic-lock-bot[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._}