В Angular использование array.map () при объявлении маршрутов приводит к ошибке «ERROR в Cannot read свойстве loadChildren of undefined» - PullRequest
Новая
       31

В Angular использование array.map () при объявлении маршрутов приводит к ошибке «ERROR в Cannot read свойстве loadChildren of undefined»

2 голосов
/ 06 мая 2019

Я получаю ошибку при сборке проекта.

ng build --prod

Следующее сообщение об ошибке отображается на консоли. 

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**

Настройка

  • Windows 10
  • узел v10.15.3
  • нпм 6.4.1
  • @ angular / cli 7.3.8

Репро шаги

1) создать новое угловое приложение с маршрутизацией

1.1) ng new MyApp

1.2.) Когда будет предложено использовать маршрутизацию, скажите «да» и примите другие значения по умолчанию

2) нг г компонент Home

3) Настройки компонента

4) И измените app-routing.module.ts следующим образом. 

    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

Ошибка должна появиться в консоли

Вопрос

Глядя на шаг 4, мой вопрос на самом деле: почему работает следующее? 

    RouterModule.forRoot(routes3)

тогда как следующее не работает? 

    RouterModule.forRoot(routes2)

Обратите внимание, что routes, routes2 и routes3 одинаковы, по крайней мере, эквивалентны, глядя на их структуру. Все они являются просто массивами объектов с одинаковыми атрибутами. Не уверен, что мне здесь не хватает.

UPDATE:

Следующее на удивление тоже не работает. 

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

Но работает следующее. 

    RouterModule.forRoot( routes3 );

Это действительно странно. Это должно быть ошибка в компиляторе.

...