In Angular, using array.map() in declaring routes causes "ERROR in Cannot read property 'loadChildren' of undefined"

Question

I'm getting an error when building the project.

ng build --prod

The following Is the error showing on the console.

Date: 2019-05-06T07:11:31.860Z
Hash: 86bc6833bfe9e981c890
Time: 12080ms
chunk {0} runtime.26209474bfa8dc87a77c.js (runtime) 1.41 kB [entry] [rendered]
chunk {1} es2015-polyfills.c5dd28b362270c767b34.js (es2015-polyfills) 56.4 kB [initial] [rendered] chunk {2} main.fa4681da67b0e16d34dc.js (main) 128 bytes [initial] [rendered]
chunk {3} polyfills.41559ea504b9f00b6dea.js (polyfills) 130 bytes [initial] [rendered]
chunk {4} styles.3ff695c00d717f2d2a11.css (styles) 0 bytes [initial] [rendered]

**ERROR in Cannot read property 'loadChildren' of undefined**

Setup

Windows 10
node v10.15.3
npm 6.4.1
@angular/cli 7.3.8

Repro steps

1) create new angular app with routing

1.1) ng new MyApp

1.2.) when prompted to use routing, say yes and accept the other defaults

2) ng g component Home

3) ng g component Settings

4) And modify the app-routing.module.ts with following.

    import { NgModule } from '@angular/core';
    import { Routes, RouterModule } from '@angular/router';
    import { HomeComponent } from './home/home.component';
    import { SettingsComponent } from './settings/settings.component';

    const routes: Routes = [
      {
        path: "home",
        component: HomeComponent
      },
      {
        path: "settings",
        component: SettingsComponent
      }
    ];

    const routes2 = routes.map( e => ({ path: e.path, component: e.component}) );

    const routes3 = [];
    routes.forEach( e => ( routes3.push({ path: e.path, component: e.component})) );

    @NgModule({
      imports: [
        // RouterModule.forRoot(routes2), // **this doesn't work**
        RouterModule.forRoot(routes3) // but this one works just fine
      ],
      exports: [RouterModule]
    })
    export class AppRoutingModule { }

5) ng build --prod

Error should appear in the console

The question

Looking at step 4, my question really is why is that the following works?

    RouterModule.forRoot(routes3)

whereas the following doesn't work?

    RouterModule.forRoot(routes2)

Note that routes, routes2, and routes3 are all the same, at least equivalent, looking at their structure. They are all just arrays of objects with the same attributes. Not sure what I'm missing here.

UPDATE:

The following surprisingly doesn't work too.

    RouterModule.forRoot( routes3.concat([]) );

But the following works.

    RouterModule.forRoot( routes3 );

This is really strange. It must be a bug in the compiler.

First you say `RouterModule.forRoot(routes3)` doesn't work and at the end you say it works. Typo in the number? — jowey, May 08 '19 at 11:17
@jowey, thanks for spotting that! Updated the question. Yes, it is typo. `routes3` works, `routes2` doesn't. `routes3.concat([])` doesn't work too despite being just the same as `routes3`. — supertonsky, May 08 '19 at 16:59
paths should not start with slash, at least that is what router usually tells me. Might be the complier trips when you do it this way. — mchl18, May 08 '19 at 17:07
That's a good question but here should be no surprises after reading the section in Angular docs about Ahead of time compilation https://angular.io/guide/aot-compiler. Shortly, Angular static analyzer can't recognize your calls but does recognizes `const routes3 = [];` since it's a simple array. You can also write `let routes = []; routes2 = routes.map(...)` and it will also work but compiler won't recognize any routes with loadChildren property — yurzui, May 08 '19 at 19:37
@yurzui thank you for pointing out the problem with loadChildren. After rethinking it seems quite obvious that this doesn't work (different usecase than in the question, but the case why I was interested in the overall problem of dynamic route generation). — jowey, May 09 '19 at 14:20

In Angular, using array.map() in declaring routes causes "ERROR in Cannot read property 'loadChildren' of undefined"

0 Answers0