How to set up the angular child routing correctly

May 12, 2022

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

>Solution :

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
 ]