Угловая маршрутизация ленивая нагрузка дети детей

В настоящее время я застрял на том, как работает угловая Маршрутизация, и мне нужна помощь. В основном в моем проекте, у меня есть один основной модуль, который используется для загрузки всех корневых маршрутов, главная следующая: 

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

И в папке app / userManagement у меня есть индекс.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 оно направит к моему UserHomeComponent component, однако, если я перейду к http://hostname/user/userDetails Angular не перенаправлял на эту страницу. Как мне отредактировать код, чтобы получить доступ к компоненту userDetailsComponent?

Спасибо

1 3
lazy-loading angular-routing

1 ответ:

При ленивой загрузке рекомендуется определять все маршрутизируемые по пустому пути как дочерние элементы. Кроме того, вы должны быть уверены, что импортируете CommonModule или BrowserModule в вашем @ngModules (в вашем случае, поскольку это ребенок, вы будете использовать common).

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