Lazy load Angular 5 error: $$_lazy_route_resource lazy recursive

Question

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

Surendranath Sonawane · Accepted Answer · 2018-03-05 13:35:03Z

60

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.

answered Mar 5, 2018 at 13:35

Surendranath Sonawane

1,7772 gold badges20 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Michał Chilczuk Over a year ago

Helped me. While CLI server was running I added dependency to a lazy loaded module (by mistake). After server reboot the error has changed and it turned out there was missing service injector.

sandeep_kosta Over a year ago

didn't believe ur answer at first time but it worked like a charm.... thanks so much

Taylor Hill Over a year ago

This fixed it for me too... derp.

Jesse Moore · Accepted Answer · 2018-08-30 22:22:14Z

32

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.

edited Aug 30, 2018 at 22:22

Jesse Moore

31 bronze badge

answered Mar 8, 2018 at 4:23

coderroggie

91012 silver badges25 bronze badges

1 Comment

userx Over a year ago

thanks, I got this problem before and it works fine, after one week I got it again! is that normal?

glucas · Accepted Answer · 2018-03-07 10:07:07Z

11

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.

answered Mar 7, 2018 at 10:07

glucas

2592 silver badges8 bronze badges

Comments

Gyandeep Sharma · Accepted Answer · 2018-03-30 09:43:45Z

11

I got the same issue.fix it by using

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

edited Mar 30, 2018 at 9:43

Gyandeep Sharma

2,3274 gold badges24 silver badges40 bronze badges

answered Mar 30, 2018 at 5:35

Jor Jule

1193 bronze badges

1 Comment

Adrian Over a year ago

I don't think ListModule will be lazy loaded anymore because doing ()=>ListModule you'll have to touch the class so the module will be eagerly loaded. Please confirm, thank you.

leachryanb · Accepted Answer · 2018-04-16 14:23:56Z

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

answered Apr 16, 2018 at 14:23

leachryanb

1514 bronze badges

Comments

Yaroslav Chapelskyi · Accepted Answer · 2018-03-02 09:02:38Z

0

As for me the problem was in importing ChildModule after AppRoutingModule in AppModule. Reordering them fixed my problem.

answered Mar 2, 2018 at 9:02

Yaroslav Chapelskyi

2102 silver badges6 bronze badges

1 Comment

c97 Over a year ago

Thanks! It really helped, AppRoutingModule should be last in imports array.

Geetanshu Gulati · Accepted Answer · 2018-07-18 08:43:34Z

0

According to me the problem is that you may be lazy loading more than one module on same routes in same routing file. I also faced similar problem and change the name of one of the route

answered Jul 18, 2018 at 8:43

Geetanshu Gulati

8129 silver badges20 bronze badges

Comments

Fredrik_Borgstrom · Accepted Answer · 2019-04-04 20:11:26Z

0

I had the same problem and managed to solve it by adding my lazy loaded modules to my angular CLI config file (angular.json). See my answer here: Angular 5 lazy loading Error: Cannot find module

answered Apr 4, 2019 at 20:11

Fredrik_Borgstrom

3,3261 gold badge32 silver badges39 bronze badges

Comments

domen · Accepted Answer · 2018-03-01 08:32:51Z

-4

In your app.module.ts, did you import ListModule ?

I faced same issue, and was able to fix it by removing lazy loaded modules from imports in app.module.ts

edited Mar 1, 2018 at 8:32

answered Feb 27, 2018 at 16:19

domen

3352 silver badges5 bronze badges

3 Comments

Radonirina Maminiaina Over a year ago

What I want to d is lazy loading. If it is not lazy loading, it works perfectly

domen Over a year ago

Yeah that's why I ask you to remove ListModule from app.module.ts if you imported it. Dunno why you missread my answer

Radonirina Maminiaina Over a year ago

I never import ListModule into app.module.ts

Collectives™ on Stack Overflow

Lazy load Angular 5 error: $$_lazy_route_resource lazy recursive

9 Answers 9

3 Comments

1 Comment

Comments

1 Comment

Comments

1 Comment

Comments

Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

9 Answers 9

3 Comments

1 Comment

Comments

1 Comment

Comments

1 Comment

Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related