web-dev-qa-db-ja.com

Angular2遅延読み込みモジュールエラー 'モジュールが見つかりません'

私はこのエラーの解決策を見つけようとしていましたが、何もうまくいきません。 Angular-CLIで作成した簡単なAngular2アプリがあります。ブラウザでこのアプリを提供すると、次のエラーが表示されます：EXCEPTION: Uncaught (in promise): Error: Cannot find module '/app/test.module'. loadChildrenで別のパスを使用しようとしました：

'/app/test.module'
'./app/test.module'
'./test.module'
'/src/app/test.module'

フォルダー

src/
  app/
    app-routing.module.ts
    app.component.ts
    app.module.ts
    test.component.ts
    test.module.ts

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

import { RoutingModule } from './app-routing.module';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    RoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';


const routes: Routes = [
  { path: '', loadChildren: '/app/test.module' }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
  providers: []
})
export class RoutingModule { }

test.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { CommonModule } from '@angular/common';
import { TestComponent } from './test.component';

export const routes: Routes = [
  { path: '', component: TestComponent }
];

@NgModule({
  imports: [
    CommonModule,
    RouterModule.forChild(routes)
  ],
  exports: [TestComponent],
  declarations: [TestComponent]
})
export default class TestModule { }

スタックトレース

    error_handler.js:45EXCEPTION: Uncaught (in promise): Error: Cannot find module '/app/test.module'.ErrorHandler.handleError @ error_handler.js:45next @ application_ref.js:273schedulerFn @ async.js:82SafeSubscriber.__tryOrUnsub @ Subscriber.js:223SafeSubscriber.next @ Subscriber.js:172Subscriber._next @ Subscriber.js:125Subscriber.next @ Subscriber.js:89Subject.next @ Subject.js:55EventEmitter.emit @ async.js:74onError @ ng_zone.js:120onHandleError @ ng_zone_impl.js:64ZoneDelegate.handleError @ zone.js:207Zone.runGuarded @ zone.js:113_loop_1 @ zone.js:379drainMicroTaskQueue @ zone.js:386
2016-10-08 14:22:50.612 error_handler.js:50ORIGINAL STACKTRACE:ErrorHandler.handleError @ error_handler.js:50next @ application_ref.js:273schedulerFn @ async.js:82SafeSubscriber.__tryOrUnsub @ Subscriber.js:223SafeSubscriber.next @ Subscriber.js:172Subscriber._next @ Subscriber.js:125Subscriber.next @ Subscriber.js:89Subject.next @ Subject.js:55EventEmitter.emit @ async.js:74onError @ ng_zone.js:120onHandleError @ ng_zone_impl.js:64ZoneDelegate.handleError @ zone.js:207Zone.runGuarded @ zone.js:113_loop_1 @ zone.js:379drainMicroTaskQueue @ zone.js:386
2016-10-08 14:22:50.613 error_handler.js:51Error: Uncaught (in promise): Error: Cannot find module '/app/test.module'.
    at resolvePromise (zone.js:429)
    at zone.js:406
    at ZoneDelegate.invoke (zone.js:203)
    at Object.onInvoke (ng_zone_impl.js:43)
    at ZoneDelegate.invoke (zone.js:202)
    at Zone.run (zone.js:96)
    at zone.js:462
    at ZoneDelegate.invokeTask (zone.js:236)
    at Object.onInvokeTask (ng_zone_impl.js:34)
    at ZoneDelegate.invokeTask (zone.js:235)ErrorHandler.handleError @ error_handler.js:51next @ application_ref.js:273schedulerFn @ async.js:82SafeSubscriber.__tryOrUnsub @ Subscriber.js:223SafeSubscriber.next @ Subscriber.js:172Subscriber._next @ Subscriber.js:125Subscriber.next @ Subscriber.js:89Subject.next @ Subject.js:55EventEmitter.emit @ async.js:74onError @ ng_zone.js:120onHandleError @ ng_zone_impl.js:64ZoneDelegate.handleError @ zone.js:207Zone.runGuarded @ zone.js:113_loop_1 @ zone.js:379drainMicroTaskQueue @ zone.js:386
2016-10-08 14:22:50.614 zone.js:355Unhandled Promise rejection: Cannot find module '/app/test.module'. ; Zone: angular ; Task: Promise.then ; Value: Error: Cannot find module '/app/test.module'.(…) Error: Cannot find module '/app/test.module'.
    at webpackEmptyContext (http://localhost:4200/main.bundle.js:49550:8)
    at SystemJsNgModuleLoader.loadAndCompile (http://localhost:4200/main.bundle.js:57952:40)
    at SystemJsNgModuleLoader.load (http://localhost:4200/main.bundle.js:57945:60)
    at RouterConfigLoader.loadModuleFactory (http://localhost:4200/main.bundle.js:22354:128)
    at RouterConfigLoader.load (http://localhost:4200/main.bundle.js:22346:81)
    at MergeMapSubscriber.project (http://localhost:4200/main.bundle.js:61105:111)
    at MergeMapSubscriber._tryNext (http://localhost:4200/main.bundle.js:32515:27)
    at MergeMapSubscriber._next (http://localhost:4200/main.bundle.js:32505:18)
    at MergeMapSubscriber.Subscriber.next (http://localhost:4200/main.bundle.js:7085:18)
    at ScalarObservable._subscribe (http://localhost:4200/main.bundle.js:48555:24)consoleError @ zone.js:355_loop_1 @ zone.js:382drainMicroTaskQueue @ zone.js:386
2016-10-08 14:22:50.620 zone.js:357Error: Uncaught (in promise): Error: Cannot find module '/app/test.module'.(…)consoleError @ zone.js:357_loop_1 @ zone.js:382drainMicroTaskQueue @ zone.js:386
angularmodulelazy-loading
43
arthurr

ng serveの再起動は私のために働いた

59
James Salamon

この同じ問題に直面しました。次の2つのことを実行して解決しました。

ルートモジュールのルート構成では、loadChildrenを使用して、遅延読み込みangularモジュールへの相対パスを指定します。文字列は＃で区切られ、splitの右側は遅延読み込みモジュールのクラス名です。

loadChildren文字列にプレフィックスとして./を追加しました。

{ path:'user', loadChildren:'./app/user/user.module#UserModule'}

Webpack 2を使用していますが、Angular 2のローダーが必要です。これにより、Angularルーターで文字列ベースのモジュールをロードできます。これをプロジェクトに追加します

yarn add angular-router-loader -D

次に、angular-router-loaderをTypeScriptローダーに追加します

loaders: [
  {
    test: /\.ts$/,
    loaders: [
    'awesome-TypeScript-loader',
    'angular-router-loader'
    ]
  }
]

そしてそれは私のために働いています。

32
Jasnan

Angular 4.4.5およびwebpackを使用して同様の問題に遭遇し、文字列を使用せずに修正できましたが、モジュールタイプの参照（記述しやすく、エラーが発生しにくい）：

const routes: Routes = [
  { path: '', loadChildren: () => TestModule }
];

この構文をサポートするAngular（ローダー）の最小バージョンが見つかりませんでした。

AOTで機能する方法は、ラムダ構文を通常の構文に置き換えることです。

export function getTestModule() { return TestModule; }

const routes: Routes = [
  { path: '', loadChildren: getTestModule }
];

また、 この問題 （rey_coderに感謝）を確認してください。

20
Alexei

最後に、ルーティング設定で遅延ロードされたモジュールをこの方法でインポートする必要があることがわかりました。

const routes: Routes = [
   { path: '', loadChildren: 'app/test.module' }
];

モジュールパスの前に/または./なし。

11
arthurr

私はちょうど私が引き継いだプロジェクトで数時間これをトラブルシューティングしてきました。上記のソリューションはどれも機能していませんでしたが、レイジーロードされたすべてのモジュールに.ts拡張子が付いていることに気付きました。

他の誰かが問題を抱えている場合は、loadChildren: 'app/example.module.ts'をloadChildren: 'app/example.module'に変更する必要があるかどうかを確認してください。

2
Runny Yolk

それを使用して私のために働いた。

../app/

VSコードの提案ポップアップを使用して、この問題を解決しました。それに従うこともできます。どこに行く必要もありません。 （パスはプロジェクトごとに異なると思います。）

2
Roney Francis

同様の問題がありました。サーバーを再起動しただけで機能しました。 :)

1
Ankita P.

私は自分の問題を解決しました。パス名に.tsを入れないでください。 'path/to/my/module.ts#MyModuleClass'を使用するのではなく、'path/to/my/module#MyModuleClass'を使用します

1
alaboudi

「@ angular/router」からのインポート{Routes、RouterModule}を必ず含めてください。モジュールで怠laにロードする

1
da45

変更する必要があります

export default class TestModule { }

に

export class TestModule { }

これで問題が解決するはずです

0
Wambua Makenzi

私の場合、パスは相対パスであると仮定して、他の場所で宣言したものと同じルートを共有しました。以下のような

動作していません

管理モジュール

    {
    path: 'organisation',
    canActivate: [AuthGuard],
      loadChildren: './organisation/organisation.module#AdminOrganisationModule',
    },

ユーザーモジュール

    {
    path: 'organisation',
    canActivate: [AuthGuard],
      loadChildren: './organisation/organisation.module#UserOrganisationModule',
    },

個別に、1つだけが宣言されたとき、これらは正常に機能していましたが、。/ organisation/organisation.moduleパスについて不平を言っていたため、一緒に動作しませんでした。

作業中

管理モジュール

    {
    path: 'organisation',
    canActivate: [AuthGuard],
      loadChildren: '../admin/organisation/organisation.module#AdminOrganisationModule',
    },

ユーザーモジュール

        {
    path: 'organisation',
    canActivate: [AuthGuard],
      loadChildren: '../user/organisation/organisation.module#UserOrganisationModule',
    },
0
Ray_Hack

異なる機能（test.module.tsなど）をルートアプリケーション（app.module.ts）から遅延ロードモジュールを介して分離するユースケースシナリオでは、テストモジュールとそのコンポーネントをサブで作成できます。 -folder（例：src/app/test /）。 test-routing.moduleは次のように構成できます。

//test-routing.module.ts
//routes to test.component.ts as an example

import { Routes, RouterModule } from '@angular/router';
import { TestComponent } from './test.component';

const feature_test_routes: Routes = [

    { 
        path: '',
        component: TestComponent
    }

];

export const TestRoutingModule = RouterModule.forChild(feature_test_routes);

「親」モジュール（app-routing.module.ts）には、次のようなルートがあります。

//app-routing.module.ts
//routes to http://localhost:4200/test

import { Routes, RouterModule } from '@angular/router';
import { AppComponent } from './app.component';
const root_routes: Routes = [

    { 
        path: '',
        component: AppComponent, 
        children: [
            {
                path: 'test',
                loadChildren: './test/test.module#TestModule'
            }
        ]
    }

];

export const AppRoutingModule = RouterModule.forChild(root_routes);

これにより、必要に応じてルートアプリケーションとエントリコンポーネントが強制的にロードされ、その後、test.module.tsから子として遅延ロードされます。

0
Pageii Studio

これを変える

{
            path: 'test',
            loadChildren: 'app/tests/test.module#TestModule'

}

このため

   {
        path: 'test', loadChildren: () => new Promise(resolve => {
            (require as any).ensure([], require => {
                resolve(require('app/tests/test.module').TestModule);
            })
        })
    },

そして私の問題を解決しました。

0
Ruby Junior Dev