web-dev-qa-db-ja.com

angular6機能モジュール遅延読み込みスローエラーTypeError：undefinedは関数ではありません

angularの新しいドキュメントによると、このコードはapp-routing.module.tsにありますが、まだ機能していないメソッドを実行しましたが、理解できないエラーをスローします。

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule, Routes } from "@angular/router";
import { HomeComponent } from "./home/home.component";
import { AdminModule } from "./admin/admin.module";

const routes: Routes = [
  {
    path: 'admin',
    loadChildren: './admin/admin.module#AdminModule'
  },
  { path: '', redirectTo: '/home', pathMatch: 'full' },
  { path: 'home', component: HomeComponent },
];

@NgModule({
  imports: [
    CommonModule,
    RouterModule.forRoot(routes)
  ],
  exports: [
    RouterModule
  ],
  declarations: []
 })
 export class AppRoutingModule { }

このようなエラーをスローしています。

また、この'app/admin/admin.module#AdminModule'のようなloadchildrenの古い方法も試しました。しかし、まだ機能していません。

core.js:1601 ERROR Error: Uncaught (in promise): TypeError: undefined is not a function
TypeError: undefined is not a function
    at Array.map (<anonymous>)
    at webpackAsyncContext ($_lazy_route_resource lazy namespace object:18)
    at SystemJsNgModuleLoader.Push../node_modules/@angular/core/fesm5/core.js.SystemJsNgModuleLoader.loadAndCompile (core.js:5569)
    at SystemJsNgModuleLoader.Push../node_modules/@angular/core/fesm5/core.js.SystemJsNgModuleLoader.load (core.js:5561)
    at RouterConfigLoader.Push../node_modules/@angular/router/fesm5/router.js.RouterConfigLoader.loadModuleFactory (router.js:3294)
    at RouterConfigLoader.Push../node_modules/@angular/router/fesm5/router.js.RouterConfigLoader.load (router.js:3282)
    at MergeMapSubscriber.project (router.js:1479)
    at MergeMapSubscriber.Push../node_modules/rxjs/_esm5/internal/operators/mergeMap.js.MergeMapSubscriber._tryNext (mergeMap.js:117)
    at MergeMapSubscriber.Push../node_modules/rxjs/_esm5/internal/operators/mergeMap.js.MergeMapSubscriber._next (mergeMap.js:107)
    at MergeMapSubscriber.Push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next (Subscriber.js:93)
    at Array.map (<anonymous>)
    at webpackAsyncContext ($_lazy_route_resource lazy namespace object:18)
    at SystemJsNgModuleLoader.Push../node_modules/@angular/core/fesm5/core.js.SystemJsNgModuleLoader.loadAndCompile (core.js:5569)
    at SystemJsNgModuleLoader.Push../node_modules/@angular/core/fesm5/core.js.SystemJsNgModuleLoader.load (core.js:5561)
    at RouterConfigLoader.Push../node_modules/@angular/router/fesm5/router.js.RouterConfigLoader.loadModuleFactory (router.js:3294)
    at RouterConfigLoader.Push../node_modules/@angular/router/fesm5/router.js.RouterConfigLoader.load (router.js:3282)
    at MergeMapSubscriber.project (router.js:1479)
    at MergeMapSubscriber.Push../node_modules/rxjs/_esm5/internal/operators/mergeMap.js.MergeMapSubscriber._tryNext (mergeMap.js:117)
    at MergeMapSubscriber.Push../node_modules/rxjs/_esm5/internal/operators/mergeMap.js.MergeMapSubscriber._next (mergeMap.js:107)
    at MergeMapSubscriber.Push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next (Subscriber.js:93)
    at resolvePromise (zone.js:814)
    at resolvePromise (zone.js:771)
    at zone.js:873
    at ZoneDelegate.Push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:421)
    at Object.onInvokeTask (core.js:4062)
    at ZoneDelegate.Push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:420)
    at Zone.Push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:188)
    at drainMicroTaskQueue (zone.js:595)
    at ZoneTask.Push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask [as invoke] (zone.js:500)
    at invokeTask (zone.js:1540)
angularangular6
28
Abinash Mohapatra

私は同じ問題を抱えていました、私のための原因は、私がアプリモジュールに遅延ロードされたモジュールをインポートしていたことでした。

39
yoerideschrijver

このエラーは、ng serveの実行中に再コンパイルした後に発生し、その後は常に表示されます。 ng serveの再起動-この問題を解決しました。

重要！

関数としてloadChildrenを使用する-Not遅延読み込み：

{path: 'admin', loadChildren:() => AdminModule } //not lazy loading

ルーティングモジュールに遅延モジュールをインポートする必要があります。

遅延読み込みの場合、遅延モジュールへのパスを送信する必要があります-String！

{path: 'admin', loadChildren:'app/admin/admin.module#AdminModule'} // This is lazy loading
8
Ester Kaufman

Angular-7およびAngular CLI：7.1.3を使用しているときにも同じ問題に直面し、解決策を見つけようとしました。 app.moduleファイルから遅延読み込みモジュールのimportステートメントを削除することで解決します。

// remove this from app.module and app-routing.module file and it will work fine
import { AdminModule } from "./admin/admin.module";

参照用のプロジェクト構成

7
sharad jain

私は同じ問題を次のように解決しました：-

  1. 実行=> ng serve --aot
  2. ルートモジュールのインポートからモジュールを削除しました。これは、loadChildrenセクションのルーティングで既にモジュールを使用していたためです。

両方の方法を使用して、アプリケーションを実行できました。したがって、これらのいずれかを試すことができます。

1
Shashikant Pandit

AdminModuleをapp.moduleにインポートする必要はありませんでした

これをapp.moduleおよびapp-routing.moduleファイルから削除すると、正常に機能します。

import { AdminModule } from "./admin/admin.module";
0
Tri Vo