Lazy-Laoded模块的Angular 9-子路由不起作用(无法匹配任何路由)

Question

im正在尝试为我的应用程序后端实现延迟加载。现在它告诉我没有这样的路线。

我的应用程序路由模块

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

当我转到路由/hdv时，HdvPageComponent与HdvPageComponent中的Dashboardcomponent正确加载，就像我所期望的那样。但当我转到/hdv/bookings时，我得到错误Cannot match any routes. URL Segment: 'hdv/bookings'

知道吗？

Answer 1

您在HdvRoutingModule中使用pathMatch时发生冲突。您只需要删除该属性。

我写了一些代码，你可以在这里看到解决方案。

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