Angular : Error: Uncaught (in promise) at webpackAsyncContext (eval at ./src/$$_lazy_route_resource

Question

I'm upgrading from Angular 4.0.0 to Angular 5.2.6

i'm facing some problem to get lazy module loading working.

with angular 4.0.0 , it works fine , but now , with 5.2.6 , i getting such an error when clicking my redirecting button :

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:27), <anonymous>:13: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:27), <anonymous>:13: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 ZoneTask.invokeTask [as invoke] (zone.js:500)     at invokeTask (zone.js:1517) 

my routing file looks like this :

const homeRoutes: Routes = [   {     path: 'home', component: HomeComponent,     children: [         ....       {         path: 'admin',         loadChildren: 'app/home/admin/admin.module#AdminModule',         canActivate: [AuthGuardAdmin]       },     ]   }, ];  @NgModule({   imports: [     CommonModule,     RouterModule.forChild(homeRoutes)   ],   exports: [     RouterModule   ],   declarations: [] }) export class HomeRoutingModule { } 

suggestions ??

Answer 1

Do not import your lazy loaded module within your main app.module.ts. This will cause a circular dependency and throw the error you are receiving.

Answer 2

I have changed the order of imports in my app.module.ts as mentioned here

So you need to have it for example like this:

imports: [   BrowserModule,   FormsModule,   HeroesModule,   AppRoutingModule ] 

The most important is to have First BrowserModule and at the end AppRoutingModule.