web-dev-qa-db-fra.com

Erreur de chargement paresseux angulaire 5: $$ _ lazy_route_resource paresseux récursif

J'utilise une compilation cli AoT angulaire . Lorsque j'essaie de créer un composant de chargement paresseux après ce didacticiel , le message d'erreur ci-dessous s'affiche:

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)

Voici une partie de mes 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 {}

Je le signale déjà comme un problème Angular-cli. Vous pouvez le trouver ici .

Y at-il quelqu'un qui a connu le même problème et qui a trouvé une solution à ce problème?

Bug lié: Angular 5 avec modules de chargement cli non anguleux dans le routeur (Pas encore résolu).

Solution proposée: https://github.com/gdi2290/angular-starter/issues/1936 :

{ path: 'listes', loadChildren: () => ListModule }
// it doesn't do lazy loading

Une information important:

Angular cli: 1.7.0
Angular: 5.2.0

Mes salutations

angularangular-clilazy-loading
27
Radonirina Maminiaina

J'ai cloné et reproduit le problème en utilisant votre code GitHub posté. Pour résoudre ce problème, vos packages @ angular/cli global et devDependencies doivent être à 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

Le package @ angular/cli de votre devDependencies correspond maintenant à la version globale. Il est défini sur 1.7.2 et le problème est résolu.

29
coderroggie

J'ai le même problème. Je le résous Il suffit d’arrêter le serveur Cli et de le démarrer. L'erreur est partie si vous avez fait votre code correctement. 

47
SURENDRANATH SONAWANE

Il y a un bogue ouvert sur angular-cli 1.7.x: https://github.com/angular/angular-cli/issues/9488#issuecomment-368871510

Déclassement à 1.6.8 résout le problème pour moi.

11
glucas

J'ai le même problème.fixez-le en utilisant

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

S'il vous plaît voir ce commentaire sur le bogue 1.7.x. Le problème semble importer le module chargé paresseux dans AppModule. Supprimer cette importation a résolu le problème pour moi: https://github.com/angular/angular-cli/issues/9488#issuecomment-374037802

4
leachryanb

Selon moi, le problème est que vous pouvez être paresseux lors du chargement de plusieurs modules sur les mêmes itinéraires dans le même fichier de routage. J'ai également rencontré le même problème et j'ai changé le nom de l'un des itinéraires.

0
Geetanshu Gulati