Angular: How can I use a named router outlet for component-less child routes

Given the following routes:

export const routes: Routes = [
{ path: "test-1/:name", component: TestComponent, title: "Main 1" },
{ path: "test-2/:name", component: TestComponent, title: "Main 2" },
{ path: "test-aux-1/:name", component: TestComponent, title: "Aux 1", outlet: "aux" },
{ path: "test-aux-2/:name", component: TestComponent, title: "Aux 2", outlet: "aux" },
{ path: "nested", children: [
{ path: "n-test-1/:name", component: TestComponent, title: "Nested Main 1" },
{ path: "n-test-2/:name", component: TestComponent, title: "Nested Main 2" },
{ path: "n-test-aux-1/:name", component: TestComponent, title: "Nested Aux 1", outlet: "aux" },
{ path: "n-test-aux-2/:name", component: TestComponent, title: "Nested Aux 2", outlet: "aux" },
]}
];


How can I navigate to the two nested routes that use the 'aux' outlet (Nested Aux 1/2) in the same way that the non-nested routes work?

These router links work for the non-nested parts (each route changes it's own part - the generated router links contain the full URL so the unaffected parts do not change):

<a [routerLink]="['test-1', 'Main-1']">Main 1</a>
<a [routerLink]="['test-2', 'Main-2']">Main 2</a>
<a [routerLink]="[{ outlets: { aux: ['test-aux-1', 'Aux-1'] }}]">Aux 1</a>
<a [routerLink]="[{ outlets: { aux: ['test-aux-2', 'Aux-2'] }}]">Aux 2</a>


And I expected these to work for their nested counterparts, but the last two give errors:

<a [routerLink]="['nested', 'n-test-1', 'Nested-Main-1']">Nested Main 1</a>
<a [routerLink]="['nested', 'n-test-2', 'Nested-Main-2']">Nested Main 2</a>

<!-- Cannot match any routes. URL Segment: 'nested/n-test-aux-1/Nested-Aux-1' -->
<a [routerLink]="[{ outlets: { aux: ['nested', 'n-test-aux-1', 'Nested-Aux-1'] }}]">Nested Aux 1</a>

<!-- Cannot match any routes. URL Segment: 'nested/n-test-aux-2/Nested-Aux-2' -->
<a [routerLink]="[{ outlets: { aux: ['nested', 'n-test-aux-2', 'Nested-Aux-2'] }}]">Nested Aux 2</a>


Stackblitz: https://stackblitz.com/edit/stackblitz-starters-yrrm5iul?file=src/app.routes.ts

Background:

The actual problem I'm trying to solve is for routes lazy-loaded from a module:

export const routes: Routes = [
...
{ path: "nested", loadChildren: () => import("./features/nested.module").then(m => m.NestedModule) },
]


So I don't think I can easily change the structure - I'm trying to add an aux outlet to an existing app and really do not want to refactor all the routes.

Also, I think the lazy-loading, and even the sub-module, is a diversion. I spent a heap of time looking at lazy-loading problems (https://github.com/angular/angular/issues/10981 and similar), but then I came back from a lazy module to an eager module, and then finally to the problem above. I think the core of the problem is why the last two routes above don't work - and even if that is not the actual problem with the module I'd love to understand enough about the router to know why they don't.

The only partial success I've had was from this example (https://github.com/angular/angular/issues/10981#issuecomment-301787482), using a main route with a pathless child:

{ path: "nested-3", children: [
{ path: "n3-test-aux-1/:name", children: [
{ path: "", component: TestComponent, title: "Nested 3 Aux 1", outlet: "aux" },
]},
]},

<a [routerLink]="['nested-3', 'n3-test-aux-1', 'Nested-3-Aux-1']">Nested 3 Aux 1</a>


But whilst that does set the aux output correctly, it includes a primary route so clears whatever is in the primary output.

So I'm completely stuck. Seems a simple thing to try to do, so would be great if someone counl point the way...

Cheers

Continue reading...