CODEWITHSUNDEEP
angularangular-routing
qwfrjk
qwfrjk

Reputation: 71

How to set up the angular child routing correctly

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

Upvotes: 1

Views: 51

Answers (2)

jSebestyén
jSebestyén

Reputation: 1816

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
 ]

Upvotes: 1

Zrelli Majdi
Zrelli Majdi

Reputation: 1270

You should change path: '' to path: 'cabinet',

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

Upvotes: 0

Related Questions