角2ルーティングショーがモジュールで分割されても機能しない

Question

モジュールが見つからないというエラーが表示されます。

ERROR in ./src/app/userManagement/userManagement.routing.ts 
    Module not found: Error: Can't resolve './unlockUserID/unlockUserId.module' in src/app/userManagement' 
    @ ./src/app/userManagement/userManagement.routing.ts 9:43-94 

モジュール式にするにはこの方法が必要です。これは単一ページアプリケーションです。メニューのようなものは、ツリー形式でドロップし、目的のタブをクリックすると、そのページにコンポーネントがレンダリングされます。ディレクトリuserManagement/unlockUserId/unlockUserID.Routing.tsインサイド

src-- 
    --app 
     --userManagement 
      --unlockedUserId 
      --unlockUserId.component.html 
      --unlockUserId.css 
      --unlockeUserID.module.ts 
      --unlockUser.routing.ts 
     --userManagement.module.ts 
     --userManagement.routing.ts 

私は、次のしている：私は私のuserManagement/unlockUserId/unlockUserID.module.ts

import {SmartadminModule} from "../../shared/smartadmin.module"; 
import {CommonModule} from "@angular/common"; 
import {NgModule} from "@angular/core"; 

import {unlockUserIdcomponent} from "./unlockUserID.component"; 


@NgModule({ 
    imports: [ 
     CommonModule, 
     SmartadminModule, 
     UnlockUserIdModule 
    ], 
    declarations: [unlockUserIdcomponent] 
}) 
export class UnlockUserIdModule { } 

にインポート

import {RouterModule, Routes} from "@angular/router"; 
import {unlockUserIdcomponent} from "./unlockUserID.component"; 
import {NgModule} from "@angular/core"; 

const routes: Routes = [{ 
    path: '', 
    component: unlockUserIdcomponent, 
    data: {pageTitle: 'Unlock User Id'} 
}]; 

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

はその後、親モジュールとルーティングモジュールがで来て、このように使用されています：

userManagement/userManagement.routing.ts

import {RouterModule, Routes} from "@angular/router"; 

export const routes: Routes = [ 
    { 
     path: '', redirectTo: 'unlockUserID', pathMatch: 'full' 
    }, 
    { 
     path: 'unlockUserID', 
     loadChildren:()=> System.import('./unlockUserID/unlockUserId.module') 
      .then((imports: any)=> imports.UnlockUserIdModule) 
    } 
]; 

export const routing = RouterModule.forChild(routes); 

再びアプリの主なルータで今userManagement.module.ts

import {SmartadminModule} from "../shared/smartadmin.module"; 
import {NgModule} from "@angular/core"; 
import {routing} from "./userManagement.routing"; 

@NgModule({ 

    imports: [ 
     SmartadminModule, 
     routing 
    ], 
    providers: [], 
}) 
export class UserManagementModule { 

} 

にインポートされたとき、私はそれをすべて一緒にリンクする次の手順を実行します

export const routes: Routes = [ 
    { 
     path: '', 
     component: MainLayoutComponent, 
     data: {pageTitle: 'Home'}, 
     children: [ 
      { 
       path: '', redirectTo: 'home', pathMatch: 'full' 
      }, 
      { 
       path: 'userManagement', 
       loadChildren: 'app/userManagement/userManagement.module#UserManagementModule', 
       data: {pageTitle: 'UserManagement'} 
      }, 

      {path: 'home', loadChildren: 'app/+home/home.module#HomeModule', data: {pageTitle: 'Home'}}, 
     ] 
    }, 

    {path: '**', redirectTo: 'home'} 

]; 

export const routing: ModuleWithProviders = RouterModule.forRoot(routes, {useHash: true}); 

私は取得していますがエラーメッセージ：

ERROR in ./src/app/userManagement/userManagement.routing.ts 
Module not found: Error: Can't resolve './unlockUserID/unlockUserId.module' in src/app/userManagement' 
@ ./src/app/userManagement/userManagement.routing.ts 9:43-94 

アドバイスをいただければ幸いです。

Answer 1

私が見る最も大きな問題は、あなたが持っているということである2 UnlockUserIdModuleの

あなたのルートは

である必要があります。あなたのモジュール内

import {RouterModule, Routes} from "@angular/router"; 
import {ModuleWithProviders } from "@angular/core"; 

import {unlockUserIdcomponent} from "./unlockUserID.component"; 

const unlockUserRoutes: Routes = [{ 
    path: '', 
    component: unlockUserIdcomponent, 
    data: {pageTitle: 'Unlock User Id'} 
}]; 

export const unlockUserRouting: ModuleWithProviders = RouterModule.forChild(unlockUserRoutes); 

その後：

import {CommonModule} from "@angular/common"; 
import {NgModule} from "@angular/core"; 

import {SmartadminModule} from "../../shared/smartadmin.module"; 
import {unlockUserIdcomponent} from "./unlockUserID.component"; 
import { unlockUserRouting } from './unlockUser.routing'; 


@NgModule({ 
    imports: [ 
    CommonModule, 
    SmartadminModule, 
    unlockUserRouting 
    ], 
    declarations: [unlockUserIdcomponent] 
}) 
export class UnlockUserIdModule { } 

はまた、一般に、読みやすくするためには、グループに最適です、あなたの輸入、彼らが再上部にある（例えば、すべての@angular輸入から来てどこによる、そしてベンダー、その後、あなたのコードのインポート）

Answer 2

私は角張った（とStackOverflow）が新しくて、おそらく私はあなたを助けることができます。

あなたのようにそれを指定することができ、あなたのメインルート（app.routing.js）については

：次に、あなたは（あなたのケースでは、あなたがunlockUserIdそれを呼ばれる）あなたの子供のルートを指定することができます

import {..} from ... 
const APP_ROUTES: Routes = [ 
    { path: '', redirectTo: '/yourpath', pathMatch: 'full' }, 
    { path: 'yourpath', component: SomeComponent }, 
    { path: 'home', component: ComponentWithChildren, children: CHILDREN_ROUTES }, //This specifies the child routes called CHILDREN_ROUTES 

]; 

export const routing = RouterModule.forRoot(APP_ROUTES); 

。

以下の例は、homeパスの子を示しています。

import {...} from ... 
export const CHILDREN_ROUTES : Routes = [ 
    { path: '', component: unlockUserId}, //If the child route is empty, redirect to the "unlockUserIdcomponent" path below 
    { path: 'unlockUserId', component: unlockUserIdcomponent} 
]; 

CHILDREN_ROUTESも（...など）だけAPP_ROUTESのように、自分の子供を持つことができます。

これはあなたの質問にお答えしたいと思います。

Answer 3

私はあなたのスニペットでいくつかの問題を参照してください。

1. UnlockUserIdModuleはimportsセクションで自分自身をインポートします。 未定義のモジュール/サイクルエラー/スタックオーバーフローの原因となる可能性があります

2. 最後に置き換えるために、SystemJS経由またはwebpack経由でプラグインをロードしていますか？、絶対にモジュールパスを交換してみてください：ファイル名に

   userManagement.routing.ts:

   loadChildren: 'app/userManagement/unlockedUserId/unlockUserID.module#UnlockUserIdModule'

3. タイプミス - unlockeUserID.module.ts