0

UPDATE: You can now try this in a minimal sample on Stackblitz.

The first button navigates to the route without specifying an outlet and it works.

The second button navigates to the same route as above, while specifying an outlet, but here, an exception is thrown implying that the route is unknown.

I am looking at some code for an Angular 14 application. Its main component contains, among other content, this line:

<router-outlet></router-outlet>

A "button" component shown somewhere in the application has a click handler that culminates in the following instruction:

this.router.navigate([targetRoute]);

Once I click said "button", the area represented by <router-outlet> above is replaced with the component associated with targetRoute, while the other content in the main component remain visible. (targetRoute is a string of the form 'abc/def'.)

So far, so good.

What I'd like to do now (for reasons irrelevant to this question) is, convert the router outlet into a named router outlet.

For a start, I have decided to add a named router outlet. Hence, I have extended the main component to contain an additional, named, router:

<router-outlet></router-outlet>
<router-outlet name="contentArea" style="width: 200px; height: 200px;"></router-outlet>

I can see this new router outlet as a blank area next to the first one, and clicking on the "button" still causes the first area to be filled with the component associated with targetRoute.

Now, inspired by questions such as this one or this one, I have modified the instruction in the "button" to target the new named router outlet, all else equal (or is it?):

this.router.navigate([{
    outlets: {
        contentArea: [targetRoute]
    }
}]);

With this change, I expect the component associated with targetRoute to appear in the new named router outlet.

Instead, nothing happens in the browser window and the console shows an exception:

ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'abc%2Fdef'

I have also tried passing targetRoute without being wrapped in an array above:

this.router.navigate([{
    outlets: {
        contentArea: targetRoute
    }
}]);

But this just yields the same error, just without URL-escaping the route:

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

What am I doing wrong?

F-H
  • 663
  • 1
  • 10
  • 21

1 Answers1

1

Have you added the following to your router?

{
    path: 'home',  // you can keep it empty if you do not want /home
    component: 'appComponent',
    children: [
        {
            path: '',
            component: childOneComponent,
            outlet: 'child1'
        },
        {
            path: '',
            component: childTwoComponent,
            outlet: 'child2'
        }
    ]
}

See the following answers from Jigar Gala / Tomer Almog ==> Angular2 multiple router-outlet in the same template

Iter8
  • 31
  • 3
  • I'm not sure how to apply that to my example. Would `home` and `child1` / `child2` be my `abc` and `def`, respectively? In that case, the route is found when I do not specify the target outlet - hence I figure I must have correctly registered it (?) – F-H Aug 04 '22 at 11:45