Estoy actualizando de Angular 4.0.0 a Angular 5.2.6
Estoy enfrentando un problema para que funcione la carga diferida del módulo.
con angular 4.0.0 , funciona bien, pero ahora, con 5.2.6 , recibo un error de este tipo al hacer clic en mi botón de redireccionamiento:
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)mi archivo de enrutamiento se ve así:
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 { }sugerencias ??
No importe su módulo de carga diferida dentro de su app.module.ts principal. Esto causará una dependencia circular y arrojará el error que está recibiendo.
Cambié el orden de las importaciones en mi app.module.ts como se menciona aquí
Por lo tanto, debe tenerlo, por ejemplo, así:
imports: [ BrowserModule, FormsModule, HeroesModule, AppRoutingModule ] Lo más importante es tener First BrowserModule y al final AppRoutingModule .
Solución 1
El orden de las importaciones importa, así que import lazy loaded module en la parte superior y el router module en el último lugar. Debido a que estamos haciendo una carga diferida, ese módulo con carga diferida tiene que existir antes de que hagamos el enrutamiento.
imports: [ BrowserModule, HeroModule, // Lazy-loaded module AppRoutingModule ],Solución 2
Por lo general, Angular CLI importará el module al módulo de app-module cuando se generó. así que asegúrese de que el módulo lazy-loaded no se haya importado en app-module