Angular-cli: $$_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/[email protected] --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!

[denyo]

Duplicate of #9488.

[coderroggie]

@radonirinamaminiaina ran into your error in step 1 again in a different project and found that https://stackoverflow.com/a/47605359/266426 fixed it. Remove node_modules and package-lock.json and run npm install. Good luck!

[tonychangcheng]

Using -aot I got a more user friendly error message which leaded to the issue quickly.

[kevin192291]

I am working on this issue too. I posted a stackoverflow question about it, but as of now, have no answers:
angular-load-routes
The part that I find most strange is that I have this working on stackblitz just fine: Lazy Load Routes Dynamically
But when I pull it local it fails. I was thinking that it has something to do with the tsconfig.app.json's baseUrl param, but I haven't found the answer yet. Maybe my working stackblitz project could help.

[vrkansagara]

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

Above comment help me a lot.

This is what I have fixed into AppModule

(1) LayoutModule, // Must be before app routing
(2) AppRoutingModule, // Must be after layout module
(3) TranslateModule.forRoot(), // Must be after routing module

this might help someone.

[filipesilva]

Hi all,

This issue is a bit old at at this point and I'm not really sure if this is still a problem. There's a lot of comments with suggestions and users saying they've fixed it one way or another, and also some saying they still have a problem.

If you still suffer from this problem please open a new issue with a reproduction and we'll look at it.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}