How to set up the angular child routing correctly

Question

I'm trying to set up child paths, but when navigating, the path turns out to be the wrong one

I have a cabinet module and these are its routers

const routes: Routes = [
  {
    path: '',
    component: CabinetComponent,
    children: [
      {
        path: RouteCabinetPath.DASHBOARD,
        loadChildren: () => import('./pages/dashboard/dashboard.module').then(m => m.DashboardModule)
      },
    ]
  }
];

export enum RouteCabinetPath {
  CABINET = 'cabinet',
  DASHBOARD = 'dashboard',
}

I want to make sure that I have paths to the cabinet itself /cabinet and /cabinet/dashboard

Answer 1

Since this is a feature module that is (probably) lazy loaded, the /cabinet-part of your routes will be located in the AppRoutingModule:

{path: 'cabinet', loadChildren: () => ...CabinetModule }

Here in the CabinetRoutingModule you will need to define two routes:

[
  {path: '', component: CabinetComponent},
  {path: 'dashboard', loadChildren: () => ...DashboardModule}
]

or if you want to embed those two routes into your CabinetComponent you could add a child route with an empty route

{path: '', component: CabinetComponent,
 children: [
    {path: '', component: CabinetDetailsComponent},
    {path: 'dashboard', loadChildren: () => ...DashboardModule
 ]