Angular 9 - дочерние маршруты Lazy Laoded Module не работают (не могут совпадать ни с какими маршрутами)

Question

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

Мой AppRoutingModule

const routes: Routes = [
  {
    path: '',
    component: StartPageComponent,
    pathMatch: 'full',
  },
  {
    path: 'schulungen/:name',
    component: StartPageComponent,
  },
  {
    // ToDo: AuthGuard
    path: 'hdv',
    loadChildren: () => import('./pages/hdv-page/hdv-page.module').then(m => m.HdvPageModule),
  },
];

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

Мой HdvRoutingModule

const hdvRoutes: Routes = [
  {
    path: '', component: HdvPageComponent, pathMatch: 'full', children: [
      {path: '', component: DashboardComponent, pathMatch: 'full'},
      {path: 'bookings', component: RegistrationsComponent},
      {path: 'bookings/:id', component: SingleRegistrationComponent},
      {path: 'dimensions', component: EventsComponent},
      {path: 'dimensions/create', component: CreateEventComponent},
      {path: 'dimensions/edit/:id', component: EditEventComponent},
      {path: 'dimensions/:id', component: SingleEventComponent},
      {path: 'settings', component: SettingsComponent},
    ]
  },
];

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

Когда я go к маршруту / hdv The HdvPageComponent загружается правильно с Dashboardcomponent в HdvPageComponent, как я и ожидал. Но когда я go до /hdv/bookings получаю ошибку Cannot match any routes. URL Segment: 'hdv/bookings'

Есть идеи?

Answer 1

У вас возникли конфликты с использованием pathMatch в вашем HdvRoutingModule. Вам нужно только удалить это свойство.

Я пишу некоторый код, и вы можете увидеть решение здесь .

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { DashboardComponent } from './dashboard/dashboard.component';
import { HdvPageComponent } from './hdv-page/hdv-page.component';
import { RegistrationsComponent } from './registrations/registrations.component';

const hdvRoutes: Routes = [
  {
  path: '', 
  component: HdvPageComponent,
  children: [
      {
        path: '',
        component: DashboardComponent
      },
      {
        path: 'bookings',
        component: RegistrationsComponent
      },
    ]
  },
];

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

hdv-page.component.html

<router-outlet></router-outlet> <!-- outer outlet in hdv-page component to see its children -->