Solvedangular Angular5.x lazyLoad problem, undefined is not a function

when I update the angular version form 4.x to 5.x, tell me the error:

core.js:1449 ERROR Error: Uncaught (in promise): TypeError: undefined is not a function
TypeError: undefined is not a function
    at Array.map ()
    at webpackAsyncContext (eval at ./src/$$_lazy_route_resource lazy recursive (main.bundle.js:formatted:17), :657:34)
    at SystemJsNgModuleLoader.loadAndCompile (core.js:6570)
    at SystemJsNgModuleLoader.load (core.js:6554)
    at RouterConfigLoader.loadModuleFactory (router.js:4595)
    at RouterConfigLoader.load (router.js:4575)
    at MergeMapSubscriber.eval [as project] (router.js:2061)
    at MergeMapSubscriber._tryNext (mergeMap.js:128)
    at MergeMapSubscriber._next (mergeMap.js:118)
    at MergeMapSubscriber.Subscriber.next (Subscriber.js:95)
    at Array.map ()
    at webpackAsyncContext (eval at ./src/$$_lazy_route_resource lazy recursive (main.bundle.js:formatted:17), :657:34)
    at SystemJsNgModuleLoader.loadAndCompile (core.js:6570)
    at SystemJsNgModuleLoader.load (core.js:6554)
    at RouterConfigLoader.loadModuleFactory (router.js:4595)
    at RouterConfigLoader.load (router.js:4575)
    at MergeMapSubscriber.eval [as project] (router.js:2061)
    at MergeMapSubscriber._tryNext (mergeMap.js:128)
    at MergeMapSubscriber._next (mergeMap.js:118)
    at MergeMapSubscriber.Subscriber.next (Subscriber.js:95)
    at resolvePromise (zone.js:814)
    at resolvePromise (zone.js:771)
    at eval (zone.js:873)
    at ZoneDelegate.invokeTask (zone.js:421)
    at Object.onInvokeTask (core.js:4751)
    at ZoneDelegate.invokeTask (zone.js:420)
    at Zone.runTask (zone.js:188)
    at drainMicroTaskQueue (zone.js:595)
    at 

my code:

import {ModuleWithProviders} from '@angular/core';
import {Routes, RouterModule} from '@angular/router';
import {RbacService} from './rbac/rbac.service';
const routes: Routes = [
  {
    path: '',
    redirectTo: '/page/index/main',
    pathMatch: 'full'
  },
  {
    path: 'page',
    component: MitLayoutComponent,
    canActivate: [RbacService],
    children: [
      {path: 'index', 
      loadChildren: 'app/modules/index/index.module#IndexModule', 
     canActivate: [RbacService]}, 
    ];
   export const AppRoutes: ModuleWithProviders = RouterModule.forRoot(routes, {useHash: true});
Angular CLI: 1.7.4
Node: 8.9.4
OS: win32 x64
Angular: 5.2.10
... animations, common, compiler, compiler-cli, core, forms
... http, platform-browser, platform-browser-dynamic, router

@angular/cli: 1.7.4
@angular-devkit/build-optimizer: 0.3.2
@angular-devkit/core: 0.4.9
@angular-devkit/schematics: 0.3.2
@ngtools/json-schema: 1.2.0
@ngtools/webpack: 1.10.2
@schematics/angular: 0.3.2
@schematics/package-update: 0.3.2
typescript: 2.4.2
webpack: 3.11.0
21 Answers

✔️Accepted Answer

For others that find this issue via Google as i did: I had the same problem when trying to lazy load modules and no other answers helped. I realized that i had imported my lazy-loaded module into my app-module by mistake:

NgModule({
  ....
  imports: [
    .....
    MyCustomModule,    //<--- This needs to be removed if you lazy load!
    AppRoutingModule,
  ],
  bootstrap: [AppComponent],

})

Hope it helps someone....

Other Answers:

I fixed my issue with ng serve --aot

@ThomasEg Thanks a lot, this really saved my bacon! Seems like the docs need to put a "heads up" about this, and be very clear about this. Man... spent so much time.

For others that find this issue via Google as i did: I had the same problem when trying to lazy load modules and no other answers helped. I realized that i had imported my lazy-loaded module into my app-module by mistake:

NgModule({
  ....
  imports: [
    .....
    MyCustomModule,    //<--- This needs to be removed if you lazy load!
    AppRoutingModule,
  ],
  bootstrap: [AppComponent],

})

Hope it helps someone....

Thanks! Note, this also applies to child modules as well as the root. Rule of thumb, if lazing loading a module, do not include it in any modules. This can be a hard habit to break if you are used to adding child modules to parent modules, or have not worked with lazy loading modules in the past!

More Issues: