bug(router) unable to navigate to aux route via router dsl #10351
Description
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 enable the right-outlet next to the task-list by manually entering the url:
http://localhost:4200/tasks/(right:overview/3)
Nevertheless I can't find a way to activate this route via Router-DSL. I found this commit:
But none of the provided examples works for me, when trying to activate the aux-route when being on URL:
http://localhost:4200/tasks
I tried:
<a [routerLink]="['/tasks', {outlets: {'right': ['overview',task.id]}}]">
Show task overview
</a>this creates the following URL:
http://localhost:4200/tasks;outlets=%5Bobject%20Object%5D
trying to use a relative link is even worse:
<a [routerLink]="['./', {outlets: {'right': ['overview',task.id]}}]">
Show task overview
</a>this leads to an exception:
Uncaught EXCEPTION: Error in package:841 class TaskItemComponent - inline template:2:5
ORIGINAL EXCEPTION: TypeError: Cannot read property 'path' of undefined
ORIGINAL STACKTRACE:
TypeError: Cannot read property 'path' of undefined
at createNewSegment (http://localhost:4200/main.bundle.js:68910:58)
at updateSegment (http://localhost:4200/main.bundle.js:68850:16)
at Object.createUrlTree (http://localhost:4200/main.bundle.js:68708:9)
at Router.createUrlTree (http://localhost:4200/main.bundle.js:16882:34)
at RouterLinkWithHref.updateTargetUrlAndHref (http://localhost:4200/main.bundle.js:36241:36)
at RouterLinkWithHref.ngOnChanges (http://localhost:4200/main.bundle.js:36228:74)
at DebugAppView._View_TaskItemComponent0.detectChangesInternal (TaskItemComponent.ngfactory.js:215:58)
at DebugAppView.AppView.detectChanges (http://localhost:4200/main.bundle.js:62841:14)
at DebugAppView.detectChanges (http://localhost:4200/main.bundle.js:62946:44)
at DebugAppView.AppView.detectViewChildrenChanges (http://localhost:4200/main.bundle.js:62867:19)
One other strange fact is, that when I first activate one aux route manually with the correct URL (smth. like http://localhost:4200/tasks/(right:overview/3) ) afterwards both versions seem to create the correct link in the navigation preview of the browser but when clicking on the link I get:
Error: Uncaught (in promise): Error: Cannot match any routes: 'tasks'
at resolvePromise (zone.js:538)
at zone.js:515
at ZoneDelegate.invoke (zone.js:323)
at Object.NgZoneImpl.inner.inner.fork.onInvoke (ng_zone_impl.js:53)
at ZoneDelegate.invoke (zone.js:322)
at Zone.run (zone.js:216)
at zone.js:571
at ZoneDelegate.invokeTask (zone.js:356)
at Object.NgZoneImpl.inner.inner.fork.onInvokeTask (ng_zone_impl.js:44)
at ZoneDelegate.invokeTask (zone.js:355)
Expected/desired behavior
It should be possible to enable aux-routes by Router-DSL
What is the motivation / use case for changing the behavior?
Being able to use aux-routes ;)
Please tell us about your environment:
- Angular version: 2b63330
- Browser: [all]
- Language: [TS]