wake-up-neo.com

Lazy load Winkelfehler 5: $$ _ lazy_route_resource faul rekursiv

Ich verwende die winklige cli-AoT-Kompilierung ... Wenn ich versuche, eine Lazy-Load-Komponente nach diesem -Tutorial zu erstellen, habe ich den folgenden Fehler:

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)

Hier sind ein Teil meiner 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 {}

Ich berichte es bereits als Angular-cli-Problem. Sie finden es hier .

Gibt es jemanden, der das gleiche Problem hatte und eine Lösung dafür fand?

Zugehöriger Fehler: Angular 5 mit Angular-Cli-Modulen zum Laden im Router (Noch nicht gelöst).

Vorgeschlagene Lösung: https://github.com/gdi2290/angular-starter/issues/1936 :

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

Wichtige Informationen:

Angular cli: 1.7.0
Angular: 5.2.0

Schöne Grüße

27

Ich habe das Problem mit Ihrem veröffentlichten GitHub-Code geklont und reproduziert. Um dies zu beheben, müssen sich Ihre @ angle/cli-Pakete für global und devDependencies auf 1.7.2 befinden

npm remove -g @angular/cli
npm install -g @angular/[email protected]
npm remove @angular/cli
npm add @angular/[email protected] --save-dev

Nun stimmt das @ angle/cli-Paket in Ihren devDependencies mit der globalen Version überein und ist auf 1.7.2 gesetzt, wo das Problem behoben wurde.

29
coderroggie

Ich habe das gleiche Problem. Ich löse es. Einfach den Cli-Server anhalten und starten. Wenn Sie Ihren Code richtig gemacht haben, ist ein Fehler verschwunden. 

47

Es gibt einen offenen Fehler in angle-cli 1.7.x: https://github.com/angular/angular-cli/issues/9488#issuecomment-368871510

Downgrade auf 1.6.8 löst das Problem für mich.

11
glucas

Ich habe das gleiche Problem

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

Bitte lesen Sie diesen Kommentar zum 1.7.x-Fehler. Das Problem scheint das Importieren des Lazy-Load-Moduls in das AppModule zu sein. Durch das Entfernen dieses Imports wurde das Problem behoben: https://github.com/angular/angular-cli/issues/9488#issuecomment-374037802

4
leachryanb

Meiner Meinung nach besteht das Problem darin, dass Sie möglicherweise faul sind, mehrere Module auf denselben Routen in derselben Routing-Datei zu laden. Ich hatte auch ein ähnliches Problem und änderte den Namen einer Route

0

Was mich betrifft, bestand das Problem darin, ChildModule nach AppRoutingModule in AppModule zu importieren. Die Neuordnung hat mein Problem behoben.

0

Ich hatte das gleiche Problem und konnte es lösen, indem ich meine faul geladenen Module zu meiner angular CLI-Konfigurationsdatei (angular.json) hinzufügte. Siehe meine Antwort hier: Angular 5 faul laden Fehler: Modul kann nicht gefunden werden

0