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

Question

У меня есть приложение, в котором мне нужно, чтобы при запуске была доступна только функция входа в систему, и весь оставшийся код должен загружаться с отложенной загрузкой после аутентификации пользователя.

Я создал ядро ​​.модуль с core-routing.module и core.component , чтобы справиться с этим, но дочерние компоненты (например, DashboardComponent) отображаются в элементе router-outlet наapp.component.html, а не в core.component.html, поэтому заголовок не отображается.

Я уже искал и много, но не смог найти, как это работает.

app-routing.module.ts

const routes: Routes = [
  { path: '', redirectTo: 'signin', pathMatch: 'full' },
  { path: 'signin', component: SigninComponent },
  { path: 'app', loadChildren: './core/core.module#CoreModule', canLoad: [AuthGuard] },
  { path: '**', redirectTo: 'signin' }
];

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

app.component.html

<router-outlet></router-outlet>

core-routing.module.ts

const routes: Routes = [
  { path: '', redirectTo: 'dashboard', pathMatch: 'full' },
  { path: 'dashboard', loadChildren: './dashboard/dashboard.module#DashboardModule', canLoad: [AuthGuard] },
  { path: '**', redirectTo: 'dashboard' }
];

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

core.component.html

<div id="header">
  <app-header></app-header>
</div>
<main id="content">
  <router-outlet></router-outlet>
</main>

dashboard-routing.module.ts

const dashboardRoutes: Routes = [
  { path: '',  component: DashboardComponent, pathMatch: 'full' }
];

@NgModule({
imports: [
  CommonModule,
  MaterialModule,
  SharedModule,
  RouterModule.forChild(dashboardRoutes)
],

Answer 1

После того, как я попробовал его по-разному, для меня сработало изменение core-routing.module.ts, чтобы он имел единый маршрут, и включал лениво загруженные модули как дочерние элементы внутри него:

const routes: Routes = [
  {
    path: '',
    component: CoreComponent,
    children: [
      { path: '', redirectTo: 'dashboard', pathMatch: 'full' },
      { path: 'dashboard', loadChildren: '../dashboard/dashboard.module#DashboardModule', canLoad: [AuthGuard] },
      { path: 'customers', loadChildren: '../customers/customers.module#CustomersModule', canLoad: [AuthGuard] },
      { path: 'history', loadChildren: '../history/history.module#HistoryModule', canLoad: [AuthGuard] },
      { path: 'processing', loadChildren: '../processing/processing.module#ProcessingModule', canLoad: [AuthGuard] },
      { path: '**', redirectTo: 'dashboard' }
    ]
  }
];

Надеюсьэто может помочь кому-то, пытающемуся реализовать ту же функциональность.

Answer 2

Ну, я опаздываю на вечеринку, но только что провел последние 5 дней с той же проблемой.Публикация здесь на случай, если это поможет.

Преамбула, не путайте именованные выходы в ответе @Asanka с вложенными выходами.Мои первые чтения из-за переполнения стека. Я не осознавал разницу, поэтому ошибочно пытался назвать торговые точки и понять, как их направить.

Я нашел ответ, просматривая эту прекрасную статью (я не авторили связаны с ними):

https://medium.com/@shairez/angular-routing-a-better-pattern-for-large-scale-apps-f2890c952a18

Особый интерес представляет связанный проект Stackblitz (см. choose-address-routing.module.ts строка № 9, в которой показан ленивый загруженный модуль второго уровня. Маршрут требуетполностью определенный маршрут ).

Я также потратил день на то, чтобы прочитать каждую строку этой статьи (целую ветку), чтобы уточнить мое понимание:

https://blog.angularindepth.com/the-three-pillars-of-angular-routing-angular-router-series-introduction-fb34e4e8758e

Сложность решения моей ошибки была из 2проблемы:

1. У меня была ссылка на мой лениво загруженный модуль в другой части моего приложения.Модуль lazy-load самого низкого уровня имел перенаправление маршрута.Поскольку он уже был загружен, перенаправление отслеживалось на корневом уровне дерева маршрутизации, устанавливая содержимое самого верхнего выхода маршрутизатора (в вашем примере это выход в app.component.html) вместо вложенного выхода (вашего ядра)..component.html).Это выглядело так, как будто оно работало, но имело проблему с таргетингом на правильную розетку, но нет, это не так!
2. Вторым было то, что мой модуль маршрутизатора с отложенной загрузкой самого низкого уровня не использовал полностью определенный маршрутзатем, когда я решил точку № 1, я получил пустую вложенную розетку, но не обнаружил ошибки, сообщив мне, что не существует никакого маршрута.

В соответствии с моим решением ваш dashboard-routing.module.ts будет выглядеть так:

const dashboardRoutes: Routes = [
  { path: '',  , pathMatch: 'full', redirectTo: 'dashboard/child-view' },
  { path: 'dashboard/child-view',  component: DashboardComponent, pathMatch: 'full' }
];

Посмотрите, что 'dashboard/child-view' выше!Вот что я имею в виду под полностью определенным маршрутом к выходу маршрутизатора второго уровня (заполненного лениво загруженным модулем второго уровня).

Я хочу вернуть свои 5 дней!Я приму Шираз.Хотелось бы услышать, поможет ли это вам!

Answer 3

Это из-за того, что вы использовали 2 выхода маршрутизатора.поэтому вам нужно назвать маршрутизаторы для отображения компонента, чтобы исправить один

<router-outlet name="secondRouterOutlet"></router-outlet>

{path: '/examplePath', component: secondComponentComponent, outlet: 'secondRouterOutlet'}

этот ответ stackoverflow может помочь