What does a valid [routerLink] look like for a relative aux route?

Question

Let's say I got this route config:

{ path: 'contact', component: ContactComponent, children: [
    { path: ':id', component: ContactDetailComponent },
    { path: 'chat', component: ContactChatComponent, outlet: 'chat' }
]}

If I navigate to

/contact/7

I arrive at contact detail, but how do I get to the aux route from there? That is, what do I need to put in my [routerLink]?

I know I can easily get there with an absolute URL such as

/contact/(7//chat:chat)

but what if I need to use a relative link here? What form does that have to take? I've tried

[routerLink]="['chat:chat']"
[routerLink]="['//chat:chat']"
[routerLink]="['(7//chat:chat)']"

and so on, but none of those creates the link that actually works (see above).

I'm on RC4 with router 3.0.0-beta2.

I know it would be extra work for you but a [plunker](https://angular.io/resources/live-examples/toh-1/ts/plnkr.html) or [jsfiddle](https://jsfiddle.net/) might be good to reproduce this so that we can fiddle with it as well — Jarod Moser, Jul 12 '16 at 14:41
Seems plnkr can't deal with these kinds of URL, `GET http://run.plnkr.co/contact/(7//aux:chat) 400 (Bad Request)` - for what it's worth, the plnkr is here: http://plnkr.co/edit/OwS5RR6dBeKzh31HeE3G — Thorsten Westheider, Jul 12 '16 at 15:30
yea... plnkr does need some work on angular 2 apps... But on your question, you say that navigating to `/contact/(7//aux:chat)` loads everything properly? — Jarod Moser, Jul 12 '16 at 17:13
Yes it should, my actual setup is somewhat different though (I use these auxiliary routes to navigate to modal dialogs and sure enough, they pop up). See also this question http://stackoverflow.com/q/38223710/370935 — Thorsten Westheider, Jul 12 '16 at 17:41
After banging the keyboard a little, I decided to look into the open issues on github and found this - https://github.com/angular/angular/issues/9957 — Jarod Moser, Jul 12 '16 at 18:06

score 0 · Answer 1 · answered Jul 13 '16 at 14:52

Ok, so there appears to be a bug or two in [routerLink], so I had to come up with a workaround. As I already hinted at in a comment to my original question I use these auxiliary routes in order to navigate to a modal dialog, e.g.

/contacts

will display a list of contacts and

/(contacts//aux:new)

is supposed to open a modal dialog on top of the list of contacts instead of rendering inside that same container and hiding the list.

I achieved the same effect by introducing a dummy component

import { Component } from '@angular/core';

@Component({
    selector: 'aux-route-workaround',
    template: ''
})
export class AuxRouteWorkaroundComponent { }

The routing configuration then takes the form

export const ContactsComponentRoutes = [
    { 
        path: 'contacts', 
        component: ContactsComponent,
        children: [
            { path: '', component: AuxRouteWorkaroundComponent },
            { path: 'new', component: NewContactComponent }
        ]
    } 
];

and the template for ContactsComponent becomes

template: `
    <contacts-list></contacts-list>
    <router-outlet></router-outlet>
`

So if now I navigate to

/contacts

the '' is activated, that is ContactListComponent is rendered, as is the workaround component (the template of which is empty, so it adds nothing to the view).

Using

[routerLink]="['new']"

I can then navigate (relatively) to

/contacts/new

and this time the dialog component is rendered for the <router-outlet>, showing both components, ContactsListComponent and NewContactComponent inside the same parent component - as they would using auxiliary routes.

Mission accomplished.

What does a valid [routerLink] look like for a relative aux route?

1 Answers1