web-dev-qa-db-ja.com

Angular 4-ルーティング用のサブモジュールを解決できませんでした

Angular 4.を使用してwebappを構築しています。トップレベルのルーティングモジュールと、サブモジュールごとに個別のルーティングモジュール（HomeModuleなど）があります。

これは私のトップレベルのルーティング構成です：

export const ROUTES: Routes = [
  {path: '', loadChildren: './home#HomeModule'},
  {path: '**', component: NotFoundComponent},
];

ng serverを実行すると、そのモジュールhomeが見つかりませんという奇妙なエラーが表示されます。アプリはブラウザで動作しません。

奇妙な部分は次のとおりです。ファイルが変更され、webpackがプロジェクトを再コンパイルすると、すべてが正常に機能し、ルーティングが機能します。
エラーは、ng serveを実行しているときにのみ表示されます。

これは、ファイルの変更によりプロジェクトが再コンパイルされたときではなく、ng serveを実行しているときに表示されるエラーです。

ERROR in Error: Could not resolve module ./home relative to /path/to/my/project/src/app/app.module.ts
    at StaticSymbolResolver.getSymbolByModule (/path/to/my/project/node_modules/@angular/compiler/bundles/compiler.umd.js:31884:30)
    at StaticReflector.resolveExternalReference (/path/to/my/project/node_modules/@angular/compiler/bundles/compiler.umd.js:30350:62)
    at parseLazyRoute (/path/to/my/project/node_modules/@angular/compiler/bundles/compiler.umd.js:28616:55)
    at listLazyRoutes (/path/to/my/project/node_modules/@angular/compiler/bundles/compiler.umd.js:28578:36)
    at visitLazyRoute (/path/to/my/project/node_modules/@angular/compiler/bundles/compiler.umd.js:29995:47)
    at AotCompiler.listLazyRoutes (/path/to/my/project/node_modules/@angular/compiler/bundles/compiler.umd.js:29963:20)
    at AngularCompilerProgram.listLazyRoutes (/path/to/my/project/node_modules/@angular/compiler-cli/src/transformers/program.js:157:30)
    at Function.NgTools_InternalApi_NG_2.listLazyRoutes (/path/to/my/project/node_modules/@angular/compiler-cli/src/ngtools_api.js:44:36)
    at AngularCompilerPlugin._getLazyRoutesFromNgtools (/path/to/my/project/node_modules/@ngtools/webpack/src/angular_compiler_plugin.js:247:66)
    at Promise.resolve.then.then (/path/to/my/project/node_modules/@ngtools/webpack/src/angular_compiler_plugin.js:538:50)
    at <anonymous>
    at process._tickCallback (internal/process/next_tick.js:188:7)

前もって感謝します。

angularangular-ui-router
29
Martin Fink

私は絶対パス規則を使用していました：app/home#HomeModuleおよびそれは機能しませんでした。

次に、relativeパス規則を試してみました：./home#HomeModuleそして、それは機能しました。

... CLIでは、遅延ルートへのパスは、現在のファイルからの相対パスである必要があります

ソース

私はこれに従いました Tutorial そして、それは絶対パス規則を使用して、それは働きました。

なぜ矛盾があるのか​​知りたいです...

UPDATE：

Friedrich前述 のように、絶対パスを使用して動作させるには、src/tsconfig.app.jsonを次のように更新します。

{
  ...,
  "compilerOptions": {
    ...,
    baseUrl: "./"
  }
}
78
spottedmahn

私は同じ問題を抱えていましたが、上記の答えはどれもうまくいきませんでした、私が見つけた最終的な解決策は、モジュールの絶対パスと「＃」の後のモジュールクラス名を使用することでした.

    export const ROUTES: Routes = [
       {path: '', loadChildren: 'src/app/pathToYourModule/home.module#HomeModule'},
       {path: '**', component: NotFoundComponent}
     ];

「src」からパスを開始しましたが、モジュールパスから「.ts」を削除することを忘れないでください。

12
Sksaif Uddin

モジュールファイルへの参照から.tsサフ​​ィックスを削除する必要があります：{path： ''、loadChildren： 'app/pathToYourModule/home.module＃HomeModule'}、

8
Michael Benoit

同様の問題に直面し、モジュール名から拡張子の削除を追加し、相対パスを追加することで解決しました。

エラーを投げていたコード：

const routes: Routes = [
    {
        path: 'settings',
        loadChildren: 'app/setting/setting.module.ts#SettingsModule'
    }
];

作業コード：

const routes: Routes = [
    {
        path: 'settings',
        loadChildren: './setting/setting.module#SettingsModule'
    }
];

それが役に立てば幸い！

注： On Angular version-7.0.0

4
Vikash Kumar Choudhary

次のように、モジュールの絶対パスとモジュールファイル名を使用してみてください。

export const ROUTES: Routes = [
  {path: '', loadChildren: 'app/pathToYourModule/home.module.ts#HomeModule'},
  {path: '**', component: NotFoundComponent},
];
2
Carlos Rincones

ソリューションが見つからない場合は、loadChildren行から「.ts」拡張子を削除するだけです。

 {path: '', loadChildren: './home.ts#HomeModule'},

に

{path: '', loadChildren: './home#HomeModule'},
1
Sagar Khatri

この問題に出くわしました。私にとっては、ファイル名に.moduleを追加するのを忘れていました。

私はこれを持っていました：

const routes: Routes = [
  /* ... */
  {
    path: 'page-not-found',
    loadChildren: './modules/page-not-found/page-not-found#PageNotFoundModule' // <- page-not-found missing .module
  },
  {
    path: '',
    redirectTo: 'home',
    pathMatch: 'full'
  },
  {
    path: '**',
    redirectTo: 'page-not-found'
  }
];

する必要があります：

const routes: Routes = [
  /* ... */
  {
    path: 'page-not-found',
    loadChildren: './modules/page-not-found/page-not-found.module#PageNotFoundModule'
  },
  {
    path: '',
    redirectTo: 'home',
    pathMatch: 'full'
  },
  {
    path: '**',
    redirectTo: 'page-not-found'
  }
];
0
Wayne