Angular 2 routes children with outlets

Question

Currently trying to learn about Angular 2 routing and I've come across an issue that I cannot resolve, it feels like it is some sort of syntax or config that I am simply missing.

I want to have two router outlets on the one page and be able to show two separate sections on the page that a user can individually navigate.

I tried following the code from here - http://onehungrymind.com/named-router-outlets-in-angular-2/

However when I do this I get an error saying it cannot find the route that the child routes are on.

Here's the code:

Routes

{
    path: 'full',
    component: FullComponent,
    children: [
        {
            path: 'list',
            component: ListComponent,
            outlet: 'list'
        }
    ]
}

In the full component:

<div divOne>
    <router-outlet name="list"></router-outlet>
</div>
<div divTwo>
    <router-outlet name="detail"></router-outlet>
</div>

And I navigate like this:

    let navigationExtras: any = {
        queryParams: { reference: 21 },
        outlets: {'list': ['list']}
    };

    this.router.navigate( ['full'], navigationExtras);

This gives me the following error message:

core.umd.js:5995 EXCEPTION: Uncaught (in promise): Error: Cannot match any routes: 'full'

If I take the outlet out of the child route I dont get this error message.

Can anyone point out where I am going wrong?

Günter Zöchbauer Günter Zöchbauer · Accepted Answer · 2016-11-06T14:33:30

The component needs exactly one unnamed router-outlet and can have additional named outlets

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

this.router.navigate( ['full'], navigationExtras);

navigate([{outlets: {route3: 'productPage'}}]);

  navigate() {
    let navigationExtras: any = {
      queryParams: { reference: 21 },
      outlets: {full: 'full']}
    };
    this.router.navigate([navigationExtras]);
  }

Plunker example

Angular 2 routes children with outlets

2 Answers