web-dev-qa-db-ja.com

Angular：エラー：webpackAsyncContext（./src/$$_lazy_route_resourceで評価）でキャッチ（約束）

Angular 4.0.からAngular 5.2.6にアップグレードしています

遅延モジュールのロードを機能させるために、いくつかの問題に直面しています。

angular 4.0.で正常に動作しますが、今では5.2.6で、リダイレクトボタンをクリックするとこのようなエラーが発生します。

core.js:1448 ERROR Error: Uncaught (in promise): TypeError: undefined is not a function
TypeError: undefined is not a function
    at Array.map (<anonymous>)
    at webpackAsyncContext (eval at ./src/$$_lazy_route_resource lazy recursive (main.bundle.js:27), <anonymous>:13:34)
    at SystemJsNgModuleLoader.loadAndCompile (core.js:6558)
    at SystemJsNgModuleLoader.load (core.js:6542)
    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 Array.map (<anonymous>)
    at webpackAsyncContext (eval at ./src/$$_lazy_route_resource lazy recursive (main.bundle.js:27), <anonymous>:13:34)
    at SystemJsNgModuleLoader.loadAndCompile (core.js:6558)
    at SystemJsNgModuleLoader.load (core.js:6542)
    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 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:4740)
    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)

ルーティングファイルは次のようになります：

const homeRoutes: Routes = [
  {
    path: 'home', component: HomeComponent,
    children: [
        ....
      {
        path: 'admin',
        loadChildren: 'app/home/admin/admin.module#AdminModule',
        canActivate: [AuthGuardAdmin]
      },
    ]
  },
];

@NgModule({
  imports: [
    CommonModule,
    RouterModule.forChild(homeRoutes)
  ],
  exports: [
    RouterModule
  ],
  declarations: []
})
export class HomeRoutingModule { }

提案??

javascriptangularlazy-loadingangular-routingangular-router
31
firasKoubaa

mt angular-cliをdevDependenices（package.json）でローカルに1.2.から1.6.7にアップグレードすることで、この問題を解決しました。

3
firasKoubaa

メインapp.module.ts内に遅延ロードされたモジュールをインポートしないでください。これにより、循環依存関係が発生し、受け取ったエラーがスローされます。

40
jetset

前述のようにapp.module.tsのインポートの順序を変更しました here

そのため、たとえば次のようにする必要があります。

imports: [
  BrowserModule,
  FormsModule,
  HeroesModule,
  AppRoutingModule
]

最も重要なのは、最初のBrowserModuleと最後にAppRoutingModuleを付けることです。

16
Mieszczańczyk S.

ソリューション1

インポートの順序は重要なので、import lazy loaded moduleが最上位に、router moduleが最後の場所になります。レイジーロードを実行しているため、ルーティングを実行する前に、レイジーロードされたモジュールが存在している必要があります。

imports: [
    BrowserModule,       
    HeroModule, // Lazy-loaded module

    AppRoutingModule
  ],

ソリューション2

通常、Angular CLIは、生成時にmoduleをapp-moduleにインポートします。 lazy-loadedモジュールがapp-moduleにインポートされていないことを確認してください

12
Ram Chandra Neupane

同じ問題が発生しています。これは、angular-cliのバグである可能性があります。バグがCLIにあるのか、コードにあるのかはまだわかりません！ Gerrit で述べたように、aot：ng serve --aotでコンパイルすることはまだ可能です

また、angular-cliを1.7.2から1.6.8、これは、今回のケースで機能するように見える最後のCLIバージョンです。

11
Alex T

https://github.com/angular/angular-cli/issues/9488#issuecomment-36887151 で述べたように、それはng serve --aotで動作するようです

10
Gerrit

ng service --aotはコードをコンパイルしている間は解決策ではなく、単なる隠ぺいです。 CLIバージョンではないと判断した場合は、以下の解決策を試してください。

必要なことは、app.module.tsで遅延ロードモジュールをロードしていないことを確認することです。

例えば：

app.module.ts
 imports: [
   ...
   AppRouterModule,
   FormsModule,
   YourFeatureModule, <--- remove this
   ...
 ]

YourFeatureMOduleを介してroutesがロードされていることを確認してください。例：

app-routing.module.ts
 loadChildren: '../app/feature.module#YourFeatureModule'

お役に立てれば

6
Nosniw

同じ問題に直面していた。 angularサーバーng-serveを再起動するとうまくいきました。

3
User0706

私はまったく同じ問題を抱えていましたが、ノードサーバー（ng s）を再起動するだけでうまくいきました。

経験則として：angularの動作がおかしい場合は、まずノードサーバーを再起動してください

2
unkreativ

代わりにng serve --aotを使用してください。通常、生成時にAppModuleに遅延ロードされたAngularモジュールを追加したのはAngular CLIです。

0
user10793582