Lazy load Angular 5 error: $$_lazy_route_resource lazy recursive
Solution 1
I cloned and reproduced the issue using your posted GitHub code. In order to fix, your @angular/cli global and devDependencies packages must be at 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
Now the @angular/cli package in your devDependencies matches the global version and it is set to 1.7.2 where that issue is resolved.
Solution 2
I got the same issue. I solve it Just stopping the cli server and start it. Error is gone if you done your code correctly.
Solution 3
I got the same issue.fix it by using
{path:'listes' ,loadChildren: ()=>ListModule} not {path:'listes' ,loadChildren: 'app/component/list/list.module#ListModule'}
Solution 4
There is an open bug on angular-cli 1.7.x: https://github.com/angular/angular-cli/issues/9488#issuecomment-368871510
Downgrade to 1.6.8 solve the issue for me.
Solution 5
Please see this comment on the 1.7.x bug. The issue seems to be importing the lazy loaded module into the AppModule. Removing that import fixed the issue for me: https://github.com/angular/angular-cli/issues/9488#issuecomment-374037802
Comments
-
Radonirina Maminiaina about 4 years
I'm using angular cli AoT compilation. When I try to make a lazy load component following this tutorial, I got the error below:
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)
Here are part of my codes:
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 {}
I already report it as an Angular-cli Issue. You can find it here.
Is there anyone who experienced with the same issue and found a solution for this?
Related bug: Angular 5 with Angular cli non-lazy loading modules in the router (Not solved yet).
Proposed solution: https://github.com/gdi2290/angular-starter/issues/1936:
{ path: 'listes', loadChildren: () => ListModule } // it doesn't do lazy loading
Important information:
Angular cli: 1.7.0 Angular: 5.2.0
My regards