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

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.

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.

@cjrosa Seems your problem is related to the issue https://github.com/angular/angular/issues/10726 I opened over a month ago. Sadly there is no reaction in this ticket either.

//edit: linked correct issue

A slight difference is/was my empty-path route… I changed it to be non-empty (e.g. ‘home’), adjusted my URL and it worked when using the following URL (only!):

http://localhost:32532/csr/home/(search//zzz:xxx) // WORKS! http://localhost:32532/csr/home/search(zzz:xxx) // DOES NOT WORK!

With:

{
    path: 'home',
    component: HomeComponent,
    children: [
        { path: 'xxx', component: SearchWidgetComponent, outlet: 'zzz' },
        { path: csrSearchRoutePart, component: SearchComponent },
    ]
},

@vsavkin Thanks for the reply, but for me that leads to another error:

Error: Uncaught (in promise): Error: Cannot find the outlet right to load 'TaskOverviewComponent'BrowserDomAdapter.logError @ browser_adapter.ts:82BrowserDomAdapter.logGroup @ browser_adapter.ts:93ExceptionHandler.call @ exception_handler.ts:58(anonymous function) @ application_ref.ts:467schedulerFn @ async.ts:148SafeSubscriber.__tryOrUnsub @ Subscriber.ts:240SafeSubscriber.next @ Subscriber.ts:192Subscriber._next @ Subscriber.ts:133Subscriber.next @ Subscriber.ts:93Subject._finalNext @ Subject.ts:154Subject._next @ Subject.ts:144Subject.next @ Subject.ts:90EventEmitter.emit @ async.ts:133NgZone._zoneImpl.ng_zone_impl_1.NgZoneImpl.onError @ ng_zone.ts:142NgZoneImpl.inner.inner.fork.onHandleError @ ng_zone_impl.ts:95ZoneDelegate.handleError @ zone.js:327Zone.runGuarded @ zone.js:233_loop_1 @ zone.js:487drainMicroTaskQueue @ zone.js:494ZoneTask.invoke @ zone.js:426

I already tried to add the outlet on each level of the tree (app.component.html, tasks.component.html and task-list.component.html) but for me its just not possible to get the scenario working. Any idea about that?

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

This is why:

http://localhost:4200/tasks(right:overview/1) is the same as http://localhost:4200/(tasks//right:overview/1).

Because your aux route is the child of tasks you need to express it in the url by putting it after the slash http://localhost:4200/tasks/(right:overview/1).

I finally found out how to work with outlets in children. I think the main problem was that I had to create an template where the primary and child-outlets are located.

I attached some files

my route looks like this:

{path: 'countries', component: CountryListComponent},
        {
            path: 'countries/:id', component: CountryComponent, children:[
                    {path: '',component: CountryDetailsComponent}, //primary-outlet
                    {path: 'cities', component: CitiesComponent, outlet: 'cities-outlet'}
            ]
        }

the CountryComponent is only there to display the outlets

<router-outlet></router-outlet>
cities-outlet:
<router-outlet name="cities-outlet"></router-outlet>

the template-links looks like this:

<div [routerLink]="['/countries/1', {outlets: {'cities-outlet': ['cities']}}]">Germany</div>
<div [routerLink]="['/countries/2', {outlets: {'cities-outlet': ['cities']}}]">USA</div>

here an example how to get the countryid from the parent

import {Component, OnInit, Injectable, ViewChild, ElementRef} from '@angular/core'

import { ActivatedRoute,Router } from '@angular/router';

@Component({

    moduleId: module.id,
    selector: 'country-details',
    templateUrl: './country-details.component.html'

})

export class CountryDetailsComponent implements OnInit{

    CountryId:number=-1;

    constructor(private route: ActivatedRoute, private router: Router){

    }

    ngOnInit(){
        this.CountryId = this.route.parent.snapshot.params["id"];
    }
}

and one last thing: If you have multiple outlets on the same Level and you want to load the Content of another outlet you have to use the URL of the parent!!

f.e. If you would have multiple outlets below “/countries/:id” and you want to load These outlets via JavaScript, you have to use the /countries/:id to load the outlets.

this.router.navigate(['/countries/1', {outlets: {'cities-outlet': []}}]);

test.zip

thanks man! this worked like a charm!

I finally found out how to work with outlets in children. I think the main problem was that I had to create an template where the primary and child-outlets are located.

I attached some files

my route looks like this:

{path: 'countries', component: CountryListComponent},
        {
            path: 'countries/:id', component: CountryComponent, children:[
                    {path: '',component: CountryDetailsComponent}, //primary-outlet
                    {path: 'cities', component: CitiesComponent, outlet: 'cities-outlet'}
            ]
        }

the CountryComponent is only there to display the outlets

<router-outlet></router-outlet>
cities-outlet:
<router-outlet name="cities-outlet"></router-outlet>

the template-links looks like this:

<div [routerLink]="['/countries/1', {outlets: {'cities-outlet': ['cities']}}]">Germany</div>
<div [routerLink]="['/countries/2', {outlets: {'cities-outlet': ['cities']}}]">USA</div>

here an example how to get the countryid from the parent

import {Component, OnInit, Injectable, ViewChild, ElementRef} from '@angular/core'

import { ActivatedRoute,Router } from '@angular/router';

@Component({

    moduleId: module.id,
    selector: 'country-details',
    templateUrl: './country-details.component.html'

})

export class CountryDetailsComponent implements OnInit{

    CountryId:number=-1;

    constructor(private route: ActivatedRoute, private router: Router){

    }

    ngOnInit(){
        this.CountryId = this.route.parent.snapshot.params["id"];
    }
}

and one last thing: If you have multiple outlets on the same Level and you want to load the Content of another outlet you have to use the URL of the parent!!

f.e. If you would have multiple outlets below “/countries/:id” and you want to load These outlets via JavaScript, you have to use the /countries/:id to load the outlets.

this.router.navigate(['/countries/1', {outlets: {'cities-outlet': []}}]);

test.zip

Hi @vsavkin,

I’m facing the same issue as @choeller and your response was very encouraging. However, something appears to be off (at least) in my configurations/usage that is preventing the aux/named router-outlet from being populated. Any insight would be greatly appreciated!

I’m at RC6 w/ Router RC3

Your original response:

Because your aux route is the child of tasks you need to express it in the url by putting it after the slash http://localhost:4200/tasks/(right:overview/1).

Given the following route config:

Note: This routing snippet is from within a dynamically loaded module activated by ‘/csr’ and where HomeComponent is rendered within the App’s router-outlet.

{ path: ‘’, component: HomeComponent, canActivate: [CsrAuthGuard], children: [ { path: ‘xxx’, component: SearchWidgetComponent, outlet: ‘zzz’ } { path: csrSearchRoutePart, component: SearchComponent }, ] },

where csrSearchRoutePart = ‘search’

Given the following URL:

http://localhost:32532/csr/search/(zzz:xxx)

The app simply redirects to http://localhost:32532/csr/search and the named router-outlet is never populated.

Other url variants produce the following error(s):

http://localhost:32532/csr/search(zzz:/csr/xxx) Cannot match any routes: ‘csr/xxx’ http://localhost:32532/csr/search(zzz:xxx) Cannot match any routes: ‘xxx’

Etc…