角度ルーティング怠惰な荷重子供の子供

Question

私は現在、角度ルーティングの仕組みに立ち往生しており、何か助けが必要です。基本的に私のプロジェクトで、私はすべてのルートのルートをロードするために使用一つのコアモジュールを持って、家は以下の通りです：

const routes: Routes = [ 
    {path: '', redirectTo: '/login', pathMatch: 'full'}, 
    {path: 'user', loadChildren: 'app/userManagement#UserModule', pathMatch: 'full',canActivate: [AuthGaurd] }, 
    {path: '**', component: PageNotFoundComponent} 
]; 

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


export class AppRoutingModule {} 

アプリ/ userManagementフォルダに、私は輸入品のために使用さindex.tsを持っており、すべての宣言しますモジュール：

@NgModule({ 
    imports: [ 
    SharedModule, 
    UserManagementRoutingModule 
    ], 
    declarations: [UserHomeComponent, UserListComponent, UserDetailsComponent] 
}) 
export class UserModule { 
} 

そして、私の子供のルーティングがUserManagementRoutingModuleの内側に置く：

const routes: Routes = [ 
    { 
    path: '', 
    component: UserHomeComponent, 
    }, 
    { 
    path: 'userDetails', 
    component: UserDetailsComponent 
    } 
]; 

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

このように、私はhttp://hostname/userに行くとき、それはトンを指示しますo私のUserHomeComponentコンポーネント。ただし、http://hostname/user/userDetailsに行った場合、Angularはそのページにリダイレクトしませんでした。 userDetailsComponentにアクセスできるようにコードを編集するにはどうすればよいですか？

おかげ

Answer 1

遅延ロード、ベストプラクティスは、すべての子供のように空白のパスの下に配線を定義することです。また、@ngModuleにCommonModuleまたはBrowserModuleを必ずインポートする必要があります（あなたの場合は、あなたがよく使う子であるため）。

@NgModule({ 
    imports: [ 
    CommonModule, 
    SharedModule, 
    UserManagementRoutingModule 
    ], 
    declarations: [UserHomeComponent, UserListComponent, UserDetailsComponent] 
}) 
export class UserModule { 
} 

上記は、コンポーネントが正しくロードされていることを保証します。以下では、ベストプラクティスルーティングを提供します。

const routes: Routes = [ 
    { 
    path: '', 
    children: [ 
     { path: '', component: UserHomeComponent }, 
     { path: 'userDetails', component: UserDetailsComponent } 
    ] 
    } 
]; 

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