Angular 9 - Lazy Laded Module 的子路由不起作用（无法匹配任何路由）

Question

im trying to implement lazy loading for my backend of the app. Now it tells me there are no such routes.

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

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

When I go to the route /hdv The HdvPageComponent loads correctly with the Dashboardcomponent in the of HdvPageComponent like I would it expect to do. But when I go to /hdv/bookings I get the error Cannot match any routes. URL Segment: 'hdv/bookings' Cannot match any routes. URL Segment: 'hdv/bookings'

Any idea?

Answer 1

You are having conflicts using the pathMatch in your HdvRoutingModule . You only need to remove that property.

I write some code and you can see the solution here .

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