Angular2 Router: Cannot find the outlet XOutlet to load YComponent

Question

I'm having trouble when using named router outlets on Angular2 2.1.2.

I'm getting the error:

Cannot find the outlet XOutlet to load 'YComponent'

The error is pretty clear itself, but I'm stuck and can't find a way around it.

The HTML looks like this:

<router-outlet name="XOutlet"></router-outlet>
<!-- Main content -->
<div class="content-wrapper">
    <router-outlet></router-outlet>
</div>

The Routes file:

{
    path: 'other', 
    component: OtherComponent, 
    children: [
        {
            path: 'list',
            component: YComponent,
            outlet: 'XOutlet'
        }
    ]
},

The link

 <a [routerLink]="['other', {outlets: {'XOutlet': 'list'}}]"><span>Other</span></a>

What am I missing?

Thanks

EDIT: Based on the comment by Oleg Barinov, the HTML provided is part of the base HTML, not from the OtherComponent HTML.

Answer 1

Use <a [routerLink]="['/', {outlets: {'XOutlet': 'list'}}]"><span>Other</span></a> for this kind of implementation.