在Angular中,使用array.map()声明路由会导致“无法读取未定义的属性'loadChildren'中的错误”

时间:2019-05-06 08:11:13

标签: angular angular-cli angular7 angular-cli-v7 angular7-router

构建项目时出现错误。

  

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
  • npm 6.4.1
  • @ angular / cli 7.3.8

复制步骤

1)使用路由创建新的角度应用

1.1)ng新的MyApp

1.2。),当系统提示您使用路由时,请说“是”并接受其他默认设置

2)ng g组件首页

3)ng g组件设置

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)

请注意,routesroutes2routes3的结构相同,至少相等。它们都是具有相同属性的对象数组。不确定我在这里缺少什么。

更新:

令人惊讶的是,以下内容也不起作用。

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

但是以下方法可行。

    RouterModule.forRoot( routes3 );

这真的很奇怪。它一定是编译器中的错误。

0 个答案:

没有答案