Nearly impossible to get a correct URL with routerLink between aux siblings

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

[x] bug report => search github for a similar issue or PR before submitting
[x] 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 The only way to get a correct URL with routerLink between aux sibling components is by defining a whole absolute path. But this is not practicable, since feature module components can be mounted on any ancestors path.

Let’s assume a ‘searchView.component’ that contains 3 sibling router-outlets (search, nav, main). Within the searchView the dialog flows as follows:

• search: -> nav: -> main:

In order to control the access, the ‘searchView.component’ it is mounted as a child of a canActivate controlled path named ‚/user’. The router config looks as follows:

RouterModule.forRoot([
            { path: 'user', canActivate: [AuthGuard], children: [
                { path: 'searchView', component: SearchViewComponent, children: [
                    { path: 'find/:keyword', component: SearchComponent, outlet: 'search' },
                    { path: 'obj/:id', component: NavComponent, outlet: 'nav' },
                    { path: 'obj/:id', component: MainComponent, outlet: 'main' }
                ] },

            ] },
            {
                path: '',
                redirectTo: '/user',
                pathMatch: 'full'
            }
        ])
}

The following routerLink examples shows the applied [routerLink] and the corresponding URL obtained in the ‘search:find/n’ component.

[routerLink]="['/user/searchView', { outlets: { nav: 'obj/1'} }]“  
--> user/searchView/(nav:obj/1//search:find/1) 

Note: This is the only version that produces a valid URL, but it’s impracticable, since the whole absolute path '/user/searchView‘ was defined in a feature module component.

[routerLink]="[{ outlets: { nav: 'obj/2'} }]“ and [routerLink]="['./', { outlets: { nav: 'obj/2'} }]"
--> /user/searchView/(search:find/1/(nav:obj/2))

Note: Outlet ‘nav’ is appended as child of outlet ‘search’. Possible improvement: The [routerLink] could analyze the router config and find out that the ‘nav’ outlet is a sibling of the ‘search’ outlet and produce a URL: user/searchView/(nav:obj/2//search:find/1)

[routerLink]="['../', { outlets: { nav: 'obj/4'} }]"
--> /user/searchView/(search:find/(1//nav:obj/4))

Note: ‘…/’ causes that the ‘nav’ outlet is applied one level up within the ‘search’ outlet. The produced URL can’t be used and doesn’t exists in the config.

[routerLink]="['/', { outlets: { nav: 'obj/5'} }]"
--> /user/searchView/(search:find/1)(nav:obj/5)

Note: ‘/’ causes that the ‘nav’ outlet is additionally applied a (root?) sibling of the current path. The produced URL can’t be used and doesn’t exists in the config.

Expected behavior There must be way to obtain a correct aux sibling URLs with routerLink without without defining an absolute path.

Minimal reproduction of the problem with instructions

See: http://plnkr.co/edit/Cf9Gmdk3vyl5NJf4mmMe?p=info

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

Please tell us about your environment: Windows, angular-cli-1.0.0-beta.20-4

• Angular version: 2.0.X @angular/common@~2.1.0

• Browser: [Chrome Version 54.0.2840.99 m ]

• Language: [TypeScript “~2.0.3”] { “compilerOptions”: { “baseUrl”: “”, “declaration”: false, “emitDecoratorMetadata”: true, “experimentalDecorators”: true, “lib”: [“es6”, “dom”], “mapRoot”: “./”, “module”: “es6”, “moduleResolution”: “node”, “outDir”: “…/dist/out-tsc”, “sourceMap”: true, “target”: “es5”, “typeRoots”: [ “…/node_modules/@types” ] } }

• Node (for AoT issues): node --version = v6.9.1

[zerouno62]

I have updated the issue description an provided a Plunker: http://plnkr.co/edit/Cf9Gmdk3vyl5NJf4mmMe?p=info

[atscott]

Closing as resolved by https://github.com/angular/angular/commit/112324a614df3bd33ead86d2305b5545e5e226f0#diff-27e12be267a9b28a76357eaae5688524dfff5aed7034fcde784c77803be7035f

RouterLink uses the current ActivatedRoute as the relativeTo by default. When in an aux outlet, you need to “escape” that outlet first so you can add commands for a sibling named outlet in the parent.

<li><a [routerLink]="[{ outlets: { nav: 'obj/6'} }]" [relativeTo]="route.parent">nav-6</a> // OK</li> and <li><a [routerLink]="[{ outlets: { main: 'obj/3'} }]" [relativeTo]="route.parent">main-3</a> // OK</li>

stackblitz link: https://stackblitz.com/edit/angular-ivy-nfhhpn?file=src%2Fapp%2Fnav.component.ts