Navigating to the current URL of a named (nested) router nests the route call

I have a base ClazzComponent, ClazzModule and ClazzRouting Module. The ClazzComponent is rendered through the primary <router-outlet> in my AppComponent.

The ClazzComponent has a SlideOverComponent that has a named router, <router-outlet name="slideover">.

The SlideOverComponent has tab list in a nav to navigate to each of the tab pages in the slideover. Per the docs, each <a> tag has [routerLink]="[{outlets: { slideover: ['overview'] } }] to route each component to the nested named router. I've omitted a significant amount of code to make it as readable as possible.

The initial navigation to a tab works just fine. Here is the log from the router.events subscription.

url: '/clazz/(slideover:overview)'

However, once navigated the the above route, if I click on any of the tabs, the router tries to navigate to the following.

url: '/clazz/(slideover:/(overview//slideover:overview))'

Clearly this is incorrect. What am I doing wrong here?

app-routing.module.ts

Here I registered the ClazzComponent in the root of the application using lazy loading.

export const appRoutes: Route[] = [
  {
    path: '',
    pathMatch: 'full',
    redirectTo: 'clazz',
  },
  {
    path: 'clazz',
    loadChildren: () =>
      import('./features/clazz/clazz.module').then((m) => m.ClazzModule),
  },
  {
    path: 'model',
    loadChildren: () =>
      import('./features/model/model.module').then((m) => m.ModelModule),
  },
  {
    path: '**',
    redirectTo: 'clazz',
    pathMatch: 'full',
  },
];

clazz-routing.module.ts

Here I registered all of the child routes for the named router outlet.

const routes: Routes = [
  {
    path: '',
    component: ClazzComponent,
    children: [
      {
        path: 'overview',
        component: OverviewTabComponent,
        outlet: 'slideover',
      },
      {
        path: 'classes',
        component: ClassesTabComponent,
        outlet: 'slideover',
      },
      {
        path: 'context',
        component: ContextTabComponent,
        outlet: 'slideover',
      },
      {
        path: 'relation-library',
        component: RelationLibraryTabComponent,
        outlet: 'slideover',
      },
      {
        path: 'manage',
        component: ManageTabComponent,
        outlet: 'slideover',
      },
    ],
  },
];

clazz.component.html

The ClazzComponent contains the SlideOverComponent.

<app-slide-over></app-slide-over>

slide-over.component.html

There's a lot more HTML code here that I've omitted that makes the slide over work. Here is the relevant code to the angular router. The router outlet is named `slideover` .

<app-slide-over-tabs></app-slide-over-tabs>
<router-outlet name="slideover"></router-outlet>

slide-over-tabs.component.html

<a [routerLink]="[{outlets: { slideover: ['overview'] } }]">Overview</a>
<a [routerLink]="[{outlets: { slideover: ['classes'] } }]">Classes</a>
<a [routerLink]="[{outlets: { slideover: ['context'] } }]">Context</a>
<a [routerLink]="[{outlets: { slideover: ['relation-library'] } }]">Relation Library</a>
<a [routerLink]="[{outlets: { slideover: ['manage'] } }]">Manage</a>

Your current declaration is called relative route
<a [routerLink]="[{outlets: { slideover: ['context'] } }]">Context</a>

Because it's a relative route, it's the correct behavior to append to the current url.

You need to add the wanted route to the a tag such as <a [routerLink]="['/clazz',{outlets: { slideover: ['context'] } }]">Context</a>