angular how to use nested child routing?

Question

In my app-routing.module.ts I load my children

  {
    path: 'account',
    loadChildren: () => import('./components/account/account.module').then((esm) => esm.AccountModule)
  },

then I have my child account-routing.module.ts

const routes: Routes = [
  {
    path: '',
    children: [
      {
        path: '',
        component: AccountComponent,
      },
      {
        path: ':accountname',
        component: ViewAccountComponent,

        children: [
          {
            path: ':userid',
            component: ViewUserComponent
          }
        ]
      },
    ]
  }
];

Whenever I call for exmaple account/testaccountName/123I my ViewUserComponent won´t be called, instead my ViewAccountComponent will be called even though ViewUserComponent is a child of ViewAccountComponent. A solution would be to put my ViewUserComponent on the same level as the ViewAccountComponent (without children[]) like this

{
    path: ':accountid',
    component: ViewAccountComponent
},
{
    path: ':accountid/:userid',
    component: ViewUserComponent
}

but I would like to keep my children [].

Fabian Strathaus · Accepted Answer · 2022-11-22 12:16:14Z

Nested routes are a way to render data hierarchically. This means first the parent will be rendered in the router-outlet and afterwards the corresponding child route will be rendered in the router-outlet contained in the parent component. This is the reason why there are child routes at all.

If you don't want to have this hierarchical view in your DOM, you should not use routes defined as children in your route config. They should then be at the same level.

You now have two options to get the matching work correctly. Either you change the routes order, so that for the more specific route the matching will be done before the less specific route like in the following example:

{
    path: ':accountid/:userid',
    component: ViewUserComponent
},
{
    path: ':accountid',
    pathMatch: 'full',
    component: ViewAccountComponent
}

Or you can set pathMatch: 'full' in order to only match if no path segments are following the less specific route:

{
    path: ':accountid',
    pathMatch: 'full',
    component: ViewAccountComponent
},
{
    path: ':accountid/:userid',
    component: ViewUserComponent
}

Fabian Gomez · Accepted Answer · 2024-03-11 14:55:09Z

I think the easiest solucion to keep it as child is set the ViewAccountComponent as a child too. What i mean is if you want :accountname to be the parent, don't set a component to it and set the component to '' as a child. Like this:

const routes: Routes = [
  {
    path: '',
    children: [
      {
        path: '',
        component: AccountComponent,
      },
      {
        path: ':accountname',
        children: [
          {
            path: '',
            component: ViewAccountComponent
          }
          {
            path: ':userid',
            component: ViewUserComponent
          }
        ]
      },
    ]
  }
];

Collectives™ on Stack Overflow

angular how to use nested child routing?

2 Answers 2

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Related