$$_lazy_route_resource lazy recursive

[radonirinamaminiaina]

Note: for support questions, please use one of these channels: Chat: AngularClass.slack or Twitter: @AngularClass

• I'm submitting a ...
  [x] bug report
  [ ] feature request
  [ ] question about the decisions made in the repository

• What is the current behavior?
  I got TypeError: __webpack_require__.e is not a function after trying to make a lazy load module.

• My Code

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 {}

• Please tell us about your environment:

• Angular version: 5.2.0
• Browser: all
• Angular cli:

@angular/cli: 1.7.0
@angular-devkit/build-optimizer: 0.3.1
@angular-devkit/core: 0.3.1
@angular-devkit/schematics: 0.3.1
@ngtools/json-schema: 1.2.0
@ngtools/webpack: 1.10.0
@schematics/angular: 0.3.1
@schematics/package-update: 0.3.1
typescript: 2.5.3
webpack: 3.11.0

• Other information
  

[itprodavets]

I have the same problem

[filipesilva]

This seems like a bug but we'll need to look at a reproduction to find and fix the problem. Can you setup a minimal repro please? The content of those 3 files is not enough to reproduce.

You can read here why this is needed. A good way to make a minimal repro is to create a new app via ng new repro-app and adding the minimum possible code to show the problem. Then you can push this repository to github and link it here.

[ydomenjoud]

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

I faced same issue, and was able to fix it by reordering imports

From the doc, imports order matter : https://angular.io/guide/router#module-import-order-matters

[vannhi]

@ydomenjoud you are not supposed to import ListModule, as the module will be lazy-loaded.

[Herzenkin]

i removed all imports of "lazy-loading" modules from AppModule and it fixed the problem! Thnx @ydomenjoud

[ydomenjoud]

@vannhi yeah you right, it was just to get if the issue was about wrong import.
A lazy module imported is not a lazy module :)

[rlipovscek]

I have the same problem, but thats happen when i run the project without the option --aot, if i build the project or run ng serve --aot that not happen

[Schmitda]

For now downgrading the Angular-CLI to version 1.6 works
npm install @angular/cli@1.6 --save

Looking forward to see a better solution.

[sidthesloth92]

I'm having the same issue. Using ng serve --aot seems to solve the problem for now.

[sidthesloth92]

@slavik-chapelskyi When lazy loading a module, you SHOULD NOT DECLARE them in the app module, otherwise it becomes eagerly loaded.

[radonirinamaminiaina]

@filipesilva
This is the repro repository: https://github.com/radonirinamaminiaina/bug-lazy-loading:
Step 1:

When I do ng serve at the first time, it generate the following error:

When I add minimal edition (Add a blank space for instance) for my code, this error disappear.

Step 2:

When I click on go to survey, it generate the big issue of this topic.

[cuiliang]

update cli to 1.7.2 seems can solve this problem.

[coderroggie]

@radonirinamaminiaina See https://stackoverflow.com/questions/48947314/lazy-load-angular-5-error-lazy-route-resource-lazy-recursive/49165399#49165399 for steps to fix this issue. @cuiliang is correct, 1.7.2 fixes your primary issue. I'm not sure what your issue is in step 1, but i'd be willing to wager some sort of project setup issue. Hope that helps!