Geek Answers Handbook

Lazy load Angular 5 error: $$ _ lazy_route_resource lazy recursive

I am using angular cli AoT compilation. When I try to create a lazy download component after this tutorial , I got the following 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)

Here is part of my codes:

application-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 this as Angular-cli Issue . You can find it here .

Does anyone have one problem and find a solution to this?

Associated error: Angular 5 with angular cli non-lazy load modules in the router (Not yet resolved).

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 greetings

+27
angular lazy-loading angular-cli
source share
9 answers

I cloned and reproduced the problem using your hosted GitHub code. To fix this, your global and @ devual-dependent @ angular / cli packages should be in 1.7.2

 npm remove -g @angular/cli npm install -g @angular/ cli@1.7.2 npm remove @angular/cli npm add @angular/ cli@1.7.2 --save-dev

Now the @ angular / cli package in your devDependances corresponds to the global version, and it is installed on 1.7.2, where this problem is solved.

+29
source share

I have the same problem. I solve it. Just stop the cli server and start it. The error went away if you correctly executed your code.

+47
source share

There is an open error on angular-cli : 1.7.x : https://github.com/angular/angular-cli/issues/9488#issuecomment-368871510

Transition to 1.6.8 to solve the problem.

+11
source share

I have the same problem. Fix it using

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

See this comment on error 1.7.x. The problem seems to be to import the lazy loaded module into the AppModule. Removing this import fixed the problem for me: https://github.com/angular/angular-cli/issues/9488#issuecomment-374037802

+4
source share

For me, the problem was importing ChildModule after AppRoutingModule into AppModule. Reordering them fixed my problem.

0
source share

For me, the problem is that you can be lazy to load more than one module on the same routes in the same routing file. I also ran into a similar problem and changed the name of one of the routes

0
source share

I managed to solve this problem so that it works both in development and in production. The trick is to also add your lazily loaded modules to your angular CLI configuration file (angular.json). See my answer here: Angular 5 deferred loading Error: cannot find module

0
source share

In your app.module.ts, have you imported ListModule?

I ran into the same problem and was able to fix it by removing the lazy loaded modules from the import in app.module.ts

-4
source share

More articles:


All Articles