Angular named router outlet not routed to?-CodePudding

This demo has 2 outlets (Defined in app.module.ts :

<router-outlet></router-outlet>
<router-outlet name="b"></router-outlet>

These routes:

const routes: Routes = [
  { path: 'a', component: HelloComponent },
  { path: 'b', outlet: 'b', component: HelloComponent },
];

And these buttons to test the routes ( In app.component.html ).

<button routerLink="a">router link a</button>
<button routerLink="b">router link b</button>

Route a works. However when clicking route b this error is created:

ERROR
Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'b'
Error: Cannot match any routes.

Thoughts?

CodePudding user response：

routerLink is always using the primary outlet by default, you must specify the outlet in order to navigate to it. In your case:

<a [routerLink]="[{ outlets: { 'b': ['b'] } }]">Component Aux</a>

The error makes sense since there there is no route named a defined for the primary outlet.