Angular5懒加载问题undefined is not a function

Question

最近将angular4项目升级到angular5之后遇到了一个问题，loadChildren对应的路由都无法跳转
编译正常，浏览器运行报错：

core.js:1448 ERROR Error: Uncaught (in promise): TypeError: undefined is not a function
TypeError: undefined is not a function
    at Array.map (<anonymous>)
    at webpackAsyncContext (eval at ./src/$$_lazy_route_resource lazy recursive (main.bundle.js:13), <anonymous>:19:34)
    at SystemJsNgModuleLoader.loadAndCompile (core.js:6558)
    at SystemJsNgModuleLoader.load (core.js:6542)
    at RouterConfigLoader.loadModuleFactory (router.js:4543)
    at RouterConfigLoader.load (router.js:4523)
    at MergeMapSubscriber.eval [as project] (router.js:2015)
    at MergeMapSubscriber._tryNext (mergeMap.js:128)
    at MergeMapSubscriber._next (mergeMap.js:118)
    at MergeMapSubscriber.Subscriber.next (Subscriber.js:92)
    at Array.map (<anonymous>)
    at webpackAsyncContext (eval at ./src/$$_lazy_route_resource lazy recursive (main.bundle.js:13), <anonymous>:19:34)
    at SystemJsNgModuleLoader.loadAndCompile (core.js:6558)
    at SystemJsNgModuleLoader.load (core.js:6542)
    at RouterConfigLoader.loadModuleFactory (router.js:4543)
    at RouterConfigLoader.load (router.js:4523)
    at MergeMapSubscriber.eval [as project] (router.js:2015)
    at MergeMapSubscriber._tryNext (mergeMap.js:128)
    at MergeMapSubscriber._next (mergeMap.js:118)
    at MergeMapSubscriber.Subscriber.next (Subscriber.js:92)
    at resolvePromise (zone.js:809)
    at resolvePromise (zone.js:775)
    at eval (zone.js:858)
    at ZoneDelegate.invokeTask (zone.js:421)
    at Object.onInvokeTask (core.js:4740)
    at ZoneDelegate.invokeTask (zone.js:420)
    at Zone.runTask (zone.js:188)
    at drainMicroTaskQueue (zone.js:595)
    at <anonymous>

代码：

{
  path: 'set',
  loadChildren: 'app/setting/setting.module#SettingModule'
},

// setting.module.ts
@NgModule(
  {
    imports:
      [
        CommonModule,
        FormsModule,
        SettingRouteModule,
        SystemModule,
        PopupModule
      ],
    declarations:
      [
        SettingComponent,
        ScannerHelpComponent
      ],
    exports:
      [],
    providers:
      [],
    entryComponents: [
      ScannerHelpComponent
    ]
  }
)
export class SettingModule
{
}

// setting.route.module.ts
@NgModule({
  imports:
    [
      RouterModule.forChild([
        {
          path: 'set',
          component: SettingComponent
        }
      ])
    ]
})
export class SettingRouteModule
{
}

当我把loadChildren注释掉不用懒加载的时候，路由就可以跳转，这是什么问题

Answer 1

已经解决，在app.module.ts的imports里面删除进行懒加载的模块

// 懒加载
{
  path: 'set',
  loadChildren: 'app/setting/setting.module#SettingModule'
},

// app.module.ts
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    FormsModule,
    // 非懒加载模块
    PopupModule,
    CoreModule,
    PipeModule,
    RoutesModule,
    CashRegisterModule,
    // 懒加载模块
    // SettingModule
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

同时，在setting.route.module.ts里面path写空:

// setting.route.module.t
@NgModule({
  imports:
    [
      RouterModule.forChild([
        {
          // path: 'set',
          path: '',
          component: SettingComponent
        }
      ])
    ],

  exports:
    [
      RouterModule
    ],

  providers:
    []
})
export class SettingRouteModule
{
}

原来的写法其实并没有实现懒加载，但是angular4不是出错，但是在angular5就会提示懒加载的错误

Answer 2

我也遇到了 那你解决了吗？

Answer 3

我也遇到同样的错误，有可能是你没引入RouterModule模块(@angular/router下)。或者直接重新npm install一下，把模块重新下一遍