Lazy load Angulaire 5 erreur: $$ paresseux route de ressources paresseux récursive
j'utilise la compilation de cliaot angulaire. Quand j'essaie de faire un composant de charge paresseux suivant ce tutoriel , j'ai eu l'erreur ci-dessous:
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-routage.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 { }
liste de routage.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 { }
liste.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 l'ai déjà signaler comme un Angulaires-cli Question . Vous pouvez le trouver ici .
Est-il quelqu'un qui a connu le même problème et trouvé une solution pour cela?
bug associé: Angulaire 5 Angulaire de la cli de non-paresseux modules de chargement dans le routeur (Pas encore résolus).
solution proposée: https://github.com/gdi2290/angular-starter/issues/1936 :
{ path: 'listes', loadChildren: () => ListModule } // it doesn't do lazy loading
informations importantes:
Angular cli: 1.7.0
Angular: 5.2.0
mes salutations
8 réponses
j'ai cloné et reproduit le numéro en utilisant votre code GitHub posté. Afin de corriger, vos paquets @angular/cli global et devDependencies doivent être au 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
maintenant le paquet @angular/cli dans votre devDependencies correspond à la version globale et il est défini à 1.7.2 où ce problème est résolu.
j'ai eu le même problème. Je le résous en arrêtant le serveur cli et en le démarrant. L'erreur disparaît si vous avez fait votre code correctement.
il y a un bug ouvert sur angular-cli 1.7.x : https://github.com/angular/angular-cli/issues/9488#issuecomment-368871510
rétrograde à 1.6.8 résolvez la question pour moi.
j'ai eu le même problème.fixez-le en utilisant
{path:'listes' ,loadChildren: ()=>ListModule} not {path:'listes' ,loadChildren: 'app/component/list/list.module#ListModule'}
s'il vous Plaît voir ce commentaire sur le 1.7.x bug. Le problème semble être l'importation du module chargé paresseux dans L'AppModule. Supprimer cette importation a fixé la question pour moi: https://github.com/angular/angular-cli/issues/9488#issuecomment-374037802
selon moi le problème est que vous pouvez être paresseux chargeant plus d'un module sur les mêmes routes dans le même fichier de routage. J'ai également fait face à un problème similaire et changer le nom de l'une des routes
comme pour moi le problème était dans l'importation ChildModule après AppRoutingModule dans AppModule. La réorganisation de remédier à mon problème.
Dans votre application.module.ts, as-tu importé ListModule ?
j'ai fait face à la même question, et a été en mesure de le corriger en retirant les modules chargés paresseux des importations dans app.module.ts