How do aux routes work in Angular2 RC5/Router3 RC1?

Question

There is hardly any information regarding auxiliary routes on the web, even less so for RC5/RC1, I hope someone here on SO managed to get them to work (they are supposed to have been fixed or so I heard, but that's about it).

I got the following routing declaration:

import {
    RouterModule,
    Routes
} from '@angular/router';

import { ContactsComponent } from './contacts.component';
import { NewContactComponent } from './new-contact.component';

const contactsRoutes: Routes = [
    { path: '', component: ContactsComponent },
    { path: 'new', component: NewContactsComponent, outlet: 'form' }
];

export const contactsRouting = RouterModule.forChild(contactsRoutes);

Here's the routerLink and outlet on ContactsComponent:

<a [routerLink]="['.', 'form:new']"> 
    <button md-fab class="md-fab">
        <md-icon class="md-24">add</md-icon>
    </button>
</a>
<router-outlet name="form"></router-outlet>

However, this only leads to error messages such as

Error: Cannot match any routes: 'contacts/form%3Anew'

Does anyone have a working example for Angular2 RC5/Router3 RC1?

score 2 · Answer 1 · answered Aug 18 '16 at 16:45

I finally got this to work (use the source, Luke), with a twist for now, but I'll keep on investigating until I find the complete solution.

Given this routing setup

const appRoutes: Routes = [
    { path: '', redirectTo: 'welcome', pathMatch: 'full' },
    { path: 'welcome', component: WelcomeComponent },
    { path: 'employee/:id', component: EmployeeDetailComponent }
    { path: 'chat', component: ChatComponent, outlet: 'aux' }
];

that is, with the aux route in the root path (this is the twist I mentioned), I can write

<a [routerLink]="['/', { outlets: { primary: 'employee/14', aux: 'chat' } }]"

and it translates to this route:

/employee/14(aux:chat)

Clicking on this link then actually renders the component in the outlet,

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

@Component({
    selector: 'my-app',
    template: '<router-outlet></router-outlet><router-outlet name="aux"></router-outlet>'
})
export class AppComponent {}

The full plnkr can be found here.

Once I get this to work for child components I'll update this answer.

I have it working for child routes, all I do is this: [routerLink]="['/parent', {outlet: {aux: 'child'}}]" unfortunately when clicking, the odd looking url appears in the address bar, and refresh produces an error... let us know of updates — Ayyash, Dec 04 '16 at 09:13

Günter Zöchbauer · Answer 2 · 2016-08-18T12:46:22.523

1

As far as I know it should be something like

<a [routerLink]="[{ outlets: { 'aux': ['/employee/14/chat'] } }]">

See also https://angular.io/docs/ts/latest/api/router/index/RouterLink-directive.html

edited Aug 18 '16 at 12:46

answered Aug 18 '16 at 11:04

Günter Zöchbauer

623,577
216
2,003
1,567

Nope, that pretty much amounts to the same error message. I got a plnkr here http://plnkr.co/edit/aey1jTdc72vN5voqkVFZ?p=preview but it's a bit different from the code in my question; anyway, works as far as tinkering with `routerLink` goes. – Thorsten Westheider Aug 18 '16 at 11:49
I found your routes configuration a bit confusing. Haven't experiemented with routes in RC.5 (with modules) yet. I updated my answer. The generated URL seems fine, I don't know what exact path it requires in your configuration (instead of `/employee/14/` in my answer). See also the Plunkers in https://github.com/angular/angular/issues/10726 – Günter Zöchbauer Aug 18 '16 at 12:47
Yeah, the plnkr was a bit confusing, I've tested a couple of things there already. Anyway, cleaned it up, added your suggestion and get `Cannot match any routes: 'employee/14/chat;outlets=%5Bobject%20Object%5D'` - looks promising, but I'm not quite there yet, see updated plnkr here http://plnkr.co/edit/aey1jTdc72vN5voqkVFZ?p=preview – Thorsten Westheider Aug 18 '16 at 14:02
1

I investigated a while but I'm not able to make this work. `employee/14/chat;outlets=%5Bobject%20Object%5D` doesn't look right. It should be something like `employee/14/chat(aux:chat)`. – Günter Zöchbauer Aug 18 '16 at 15:34
1

Thanks for your help anyway, much appreciated! – Thorsten Westheider Aug 18 '16 at 15:43

How do aux routes work in Angular2 RC5/Router3 RC1?

2 Answers2