angular - recursive - at webpackasynccontext($_ lazy_route_resource lazy namespace object 15

Lazy load Angular 5 error: $$_lazy_route_resource lazy recursive

Question

Estoy usando la compilación angular de cli AoT. Cuando trato de crear un componente de carga diferida siguiendo este tutorial , recibí el siguiente error:

ERROR Error: Uncaught (in promise): TypeError: __webpack_require__.e is not a function
TypeError: __webpack_require__.e is not a function
    at webpackAsyncContext (eval at ./src/$$_lazy_route_resource lazy recursive (main.bundle.js:13), <anonymous>:15:29)
    at SystemJsNgModuleLoader.loadAndCompile (core.js:6554)
    at SystemJsNgModuleLoader.load (core.js:6538)
    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 ScalarObservable._subscribe (ScalarObservable.js:51)
    at webpackAsyncContext (eval at ./src/$$_lazy_route_resource lazy recursive (main.bundle.js:13), <anonymous>:15:29)
    at SystemJsNgModuleLoader.loadAndCompile (core.js:6554)
    at SystemJsNgModuleLoader.load (core.js:6538)
    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 ScalarObservable._subscribe (ScalarObservable.js:51)
    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:4736)
    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)

Aquí están parte de mis códigos:

app-routing.module.ts

import { NgModule } from ''@angular/core'';
import { CommonModule } from ''@angular/common'';
import { RouterModule, Routes } from ''@angular/router'';

const routes: Routes = [
  { path: ''listes'', loadChildren: ''app/component/list/list.module#ListModule''}
];

@NgModule({
  imports: [
    RouterModule.forRoot(routes)
  ],
  declarations: [],
  exports: [ RouterModule ]
})
export class AppRoutingModule { }

list-routing.module.ts

import { NgModule } from ''@angular/core'';
import { Routes, RouterModule } from ''@angular/router'';

import { ListComponent } from ''./list.component'';

const routes: Routes = [] = [
  { path: '''', component: ListComponent }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class ListRoutingModule { }

list.module.ts

import { NgModule } from ''@angular/core'';
import { CommonModule } from ''@angular/common'';

import { ListRoutingModule } from ''./list-routing.module'';

import { ListComponent } from ''./list.component'';

@NgModule({
  imports: [
    CommonModule,
    ListRoutingModule
  ],
  declarations: [ ListComponent ]
})
export class ListModule { }

app.module.ts

import { BrowserModule } from ''@angular/platform-browser'';
import { NgModule } from ''@angular/core'';

import { AppComponent } from ''./app.component'';
import { HeaderComponent } from ''./component/header/header.component'';
import { FooterComponent } from ''./component/footer/footer.component'';
import { AppRoutingModule } from ''./app-routing.module'';
import { DetailModule } from ''./component/detail/detail.module'';
import { HomeComponent } from ''./component/home/home.component'';


@NgModule({
  declarations: [
    AppComponent,
    HeaderComponent,
    FooterComponent,
    HomeComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

Ya lo informo como un problema de Angular-Cli . Puedes encontrarlo here .

¿Hay alguien que haya experimentado con el mismo problema y haya encontrado una solución para esto?

Error relacionado: Angular 5 con Angular cli no perezoso cargando módulos en el enrutador (aún no resuelto).

Solución propuesta: https://github.com/gdi2290/angular-starter/issues/1936 :

{ path: ''listes'', loadChildren: () => ListModule }
// it doesn''t do lazy loading

Información importante:

Angular cli: 1.7.0
Angular: 5.2.0

Mis saludos

Answer 1

Cloné y reproduje el problema usando tu código GitHub publicado. Para arreglarlo, sus paquetes @ angular / cli global y devDependencies deben estar en 1.7.2

npm remove -g @angular/cli
npm install -g @angular/[email protected]
npm remove @angular/cli
npm add @angular/[email protected] --save-dev

Ahora el paquete @ angular / cli en tus devDependencias coincide con la versión global y se establece en 1.7.2 donde se resuelve ese problema.

Answer 2

En cuanto a mí, el problema estaba en importar ChildModule después de AppRoutingModule en AppModule. Reordenarlos solucionó mi problema.

Answer 3

En su app.module.ts, ¿importó ListModule?

Me enfrenté al mismo problema, y ​​pude solucionarlo eliminando los módulos cargados de las importaciones en app.module.ts

Answer 4

Hay un error abierto en angular-cli 1.7.x : https://github.com/angular/angular-cli/issues/9488#issuecomment-368871510

Disminuir a 1.6.8 resolver el problema para mí.

Answer 5

Por favor, vea este comentario en el error 1.7.x. El problema parece ser importar el módulo cargado de forma perezosa en AppModule. Eliminar esa importación solucionó el problema para mí: https://github.com/angular/angular-cli/issues/9488#issuecomment-374037802

Answer 6

Según mi opinión, el problema es que puede ser perezoso al cargar más de un módulo en las mismas rutas en el mismo archivo de enrutamiento. También me enfrenté a un problema similar y cambio el nombre de una de las rutas.

Answer 7

Tengo el mismo problema. Lo soluciono Simplemente deteniendo el servidor cli y arrancándolo. El error desaparece si has hecho tu código correctamente.

Answer 8

Tengo el mismo problema. Solucione usando

 {path:''listes'' ,loadChildren: ()=>ListModule} not {path:''listes'' ,loadChildren: ''app/component/list/list.module#ListModule''}