web-dev-qa-db-ja.com

遅延読み込みAngular 5エラー：$$ _ lazy_route_resource lazy recursive

angular cli AoTコンパイルを使用しています。このtutorialに続いて遅延ロードコンポーネントを作成しようとすると、次のエラーが発生しました。

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)

ここに私のコードの一部があります：

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

私はすでにAngular-cli Issueとして報告しています。あなたはそれを見つけることができます こちら 。

同じ問題を経験し、これに対する解決策を見つけた人はいますか？

関連バグ： Angular 5 with Angular cli laz non-lazy loading module in the router （まだ解決されていません）。

提案されたソリューション： https://github.com/gdi2290/angular-starter/issues/1936 ：

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

重要な情報：

Angular cli: 1.7.0
Angular: 5.2.0

よろしく

angularangular-clilazy-loading
30
Radonirina Maminiaina

投稿されたGitHubコードを使用して、問題を複製して再現しました。修正するには、@ angular/cli globalおよびdevDependenciesパッケージが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

これで、devDependenciesの@ angular/cliパッケージはグローバルバージョンと一致し、その問題が解決される1.7.2に設定されます。

31
coderroggie

同じ問題が発生しました。解決策cliサーバーを停止して起動するだけです。コードを正しく行った場合、エラーはなくなります。

51
SURENDRANATH SONAWANE

Angular-cli1.7.xには未解決のバグがあります： https://github.com/angular/angular-cli/issues/9488＃issuecomment-36887151

1.6.8にダウングレードすると、問題が解決します。

11
glucas

私は同じ問題を取得しました

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

1.7.xバグに関するこのコメントを参照してください。問題は、遅延ロードされたモジュールをAppModuleにインポートしているようです。そのインポートを削除することで問題が解決しました： https://github.com/angular/angular-cli/issues/9488#issuecomment-374037802

5
leachryanb

私によると、問題は、同じルーティングファイルの同じルートに複数のモジュールを遅延ロードする可能性があるということです。私も同様の問題に直面し、ルートの1つの名前を変更します

0
Geetanshu Gulati

私の場合、問題はAppModuleのAppRoutingModuleの後にChildModuleをインポートすることでした。それらを並べ替えることで問題が解決しました。

0
Yaroslav Chapelskyi

同じ問題があり、angular CLI構成ファイル（angular.json）に遅延ロードされたモジュールを追加することで問題を解決できました。ここで私の答えを参照してください： Angular 5 lazy loading Error：モジュールが見つかりません

0
Fredrik_Macrobond