bug(router) unable to navigate to aux route in nested component

I’m submitting a … (check one with “x”)

[x] bug report
[ ] feature request
[ ] support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question

Current behavior

When defining an aux route in a nested route there is no way to enable this aux-component. Having this config:

[
  {path: 'dashboard', component: DashboardComponent}, 
  ...
  {path: 'tasks',  component: TasksComponent,
    children: [
      {path: '', component: TaskListComponent},
      ...
      {path: 'overview/:id', component: TaskOverviewComponent, outlet: "right"},
    ]
  },

and this code in TasksComponent html:

<div id="left">
  <router-outlet></router-outlet>
</div>

<div id="right">
  <router-outlet name="right"></router-outlet>
</div>

I can’t find a way to activate the right routeroutlet. I tried the following links:

http://localhost:4200/tasks(right:overview/1)
http://localhost:4200/tasks(right:./overview/1)
http://localhost:4200/tasks(right:/tasks/overview/1)

but no matter what I try I get:

Cannot match any routes: 'overview/1'
Cannot match any routes: './overview/1'
Cannot match any routes: '/tasks/overview/1'

What is the expected behavior?

It should be able to activate the aux-route

What is the motivation / use case for changing the behavior?

To be able to define aux-routes in nested routes, to be able to encapsulate all behaviour related to a use-case (“Tasks” in my case) in a dedicated module

Please tell us about your environment:

• Angular version: current master (57473e72ec303e1e5b29cd717287755cd8a725a7)
• Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]
• Language: [all | TypeScript X.X | ES6/7 | ES5 | Dart]

[alpalmerxactware]

This is what I’m doing, and it seems to work.

const routeConfig = [
  { path:'', redirectTo: 'home', pathMatch: 'full'},
  {
    path:'home', component:HomeComponent,
    children: [
      { path:'', component:ContractsComponent },
      { path:'contracts', component:ContractsComponent },
      { path:'research', component:ResearchComponent},

      { path:'', outlet:'right-panel', component:PlanetComponent },
      { path:'contract/:id', outlet:'right-panel', component:ContractComponent }
    ]
   }
];

And my routerLink to use the right-panel which is placed in template of the “contracts” component.

[routerLink]="{outlets: {'right-panel':'contract/'+model.id}}"

Additionally, this also, allows the navigation by path:

import { Component, Input } from '@angular/core';
import { Contract } from '../../../../classes/Contract';
import { Router } from '@angular/router';

@Component({
  selector: 'contract-row',
  templateUrl: './contract-row.component.html',
  styleUrls: ['./contract-row.component.css']
})
export class ContractRowComponent {
  @Input() model: Contract;

  constructor(private router: Router) {}

  viewContract() {
    this.router.navigateByUrl('home/(contracts//right-panel:contract/'+this.model.id+')');
  }
}

Hopefully this his helpful. It was a serious pain in the neck to actually figure out how to get this working. It REALLY needs to be documented somewhere official.

[mikechamberlain]

This has been causing me pain for the last day, so here is a Plunkr demonstrating how to navigate to an auxiliary child route:

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

The important thing to note (because of #10726) is that your parent path cannot be blank.