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 ??
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.
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.
Solution 1
Imports order does matter so import lazy loaded module in top and router module in the last place. Because we are doing lazy loading, that lazy-loaded module has to exist before we do routing.
imports: [
BrowserModule,
HeroModule, // Lazy-loaded module
AppRoutingModule
],
Solution 2
Usually Angular CLI will import the module to app-module when it was generated. so make sure lazy-loaded module was not imported in app-module