What could be causing the Angular router outlet to not route properly?

Question

Check out this demo showcasing 2 outlets (Defined in app.module.ts):

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

The specified routes are:

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

In addition, there are buttons provided to test the routes (found in app.component.html).

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

While route a functions properly, clicking on route b results in the following error:

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

Any insights on resolving this issue?

Answer 1

Answer №1

routerLink always defaults to the primary outlet, so you need to specify the outlet in order to navigate to it. For example:

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

The error is understandable since there is no route named b defined for the primary outlet.

Answer 2

routerLink always defaults to the primary outlet, so you need to specify the outlet in order to navigate to it. For example:

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

The error is understandable since there is no route named b defined for the primary outlet.