Angular router v3: targeting named outlet

Question

I am trying to route to a named outlet but I am unable to do so. I have modified official angular plunk ( Crisis example to demo). I have created a "detail" named outlet in crisis-center.component and modified the Admin link to rout to this new outlet <a [routerLink]="['/crisis-center/detail:admin']">Crisis Admin</a>

This is not working. It navigate to component admin but in default outlet I have also tried with navigate method but that is also having similar issue.

http://plnkr.co/edit/KXOGwX8bW0AYc86OgVdQ?p=preview

I have tried adding outlet in admin route definition as well but still same issue

 `{
        path: 'admin',
        component: CrisisAdminComponent,
        outlet: 'detail',
        canActivate: [AuthGuard]
      }`,

@angular/router : 3.0.0-alpha.7

=======EDIT:======

@angular/router : 3.0.0-alpha.8

I have update the plunker https://plnkr.co/edit/Kn4yBi5oytNVcFvUvGLR?p=preview . Now i am loading admin component in admin outlet specifed

I am getting below error in console when using navigateByUrl.

`platform-browser.umd.js:2311 EXCEPTION: Error: Uncaught (in promise): Error: Cannot match any routes: 'crisis-center/admin:admin'`

Günter Zöchbauer Günter Zöchbauer · Accepted Answer · 2016-06-24T18:03:32

Update

There is a fix on it's way to land in RC.5

Original

routerLink doesn't yet support named <router-outlet>. With router.navigateByUrl() this can already be achieved but aux routes are not fully supported and have several known issues.

Example:

this._router.navigateByUrl("/crisis-center(aux:chat;open=true)");

See also Angular2 router in one component

Plunker example

Angular router v3: targeting named outlet

1 Answers