Can child route path(s) work in an Auxiliary / Secondary route in Angular 9 routing?

Question

I'm having problems with child route path(s) in combination with Auxiliary / Secondary / Named router-outlet with Angular 9.

I did setup an example in stackblitz: https://stackblitz.com/edit/angular9-routing-aux?file=src/app/app-routing.module.ts

To be brief the following normal / primary routes work:

// For Primary outlet child routes work fine
{
  path: 'phome1',
  children: [
    {
      path: '',
      pathMatch: 'full', 
      component: PrimaryHome1Component
    },
    {
      path: 'pitem1',
      component: PItem1Component
    }
  ]
},

But if I try to use the same setup for Auxiliary / Secondary routes it doesn't work:

// For Auxiliary / Secondary outlet child routes don't seem to work
{
  path: 'cases',
  outlet: 'aux',
  children: [{
    path: '',
    pathMatch: 'full',
    component: CasesComponent,
    outlet: 'aux'
  },{
    path: ':id',
    component: EditCaseComponent,
    outlet: 'aux'
  }]
},

The error I'm getting is that the route doesn't match or nothing happends.

Am I doing something wrong?

Thanks in advance for any help!

Answer 1

The issue was the naming in the app-routing file. Once you declare a route to use a named outlet at the top level you don't need to continue specify it anymore:

{
  path: 'cases',
  outlet: 'aux',
  children: [{
    path: '',
    pathMatch: 'full',
    component: CasesComponent,
    // outlet: 'aux'   // remove this<<<<
  },{
    path: ':id',
    component: EditCaseComponent,
  }]
},