Angular Routing Lazy Load Enfants Enfants

Question

Je suis actuellement bloqué sur le fonctionnement du routage angulaire et j'ai besoin d'aide. En gros, dans mon projet, j'ai un module de base qui sert à charger les toutes les routes de la racine, la maison suit:

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 {} 

Et dans app/UserManagemeNT J'ai un index.ts utilisé pour les importations et déclarer tous les modules:

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

Et mon cheminement de l'enfant mis à l'intérieur du UserManagementRoutingModule:

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

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

de cette façon, quand je vais à http://hostname/user il t diriger o mon composant UserHomeComponent, cependant si je vais à http://hostname/user/userDetails Angular n'a pas redirigé vers cette page. Comment dois-je modifier mon code pour pouvoir accéder à userDetailsComponent?

Merci

Answer 1

Une fois le chargement paresseux, les meilleures pratiques consiste à définir tous acheminés sous un chemin vide comme les enfants. En outre, vous devez être sûr d'importer CommonModule ou BrowserModule dans votre @ngModule s (dans votre cas, puisque c'est un enfant que vous utiliserez commun). Ce qui précède permettra de s'assurer que les composants sont correctement chargés, et ce qui suit fournira les meilleures pratiques de routage.

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

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