Use auxiliary routes in nested child components

Question

I'm trying to use Auxiliary Routes within a child-component similar to the problem posted here. Since the posted "solution" is more like a workaround I'm curious how to do it like in the blogpost above.

I'm using Angular 2.1.2 with Router 3.1.2.

parent.module

import { NgModule }             from '@angular/core';
import { RouterModule }         from '@angular/router';
import { BrowserModule }        from '@angular/platform-browser';

import { ParentComponent }      from './parent.component';

import { ChildModule }          from '../child/child.public.module';
import { ChildComponent }       from '../child/child.public.component';

import { OtherModule }          from '../other/other.public.module'


@NgModule({
    imports: [
        ChildModule,
        OtherModule,
        RouterModule.forRoot([
            { path: '', component: ChildComponent }
        ])
    ],
    declarations: [ ParentComponent ],
    bootstrap:    [ ParentComponent ]
}) 

export class ParentModule { }

parent.component

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

    @Component({
        selector: 'my-app',
        template: '<router-outlet></router-outlet>'
    })

export class ParentComponent{ }

child.module

import { NgModule }             from '@angular/core';
import { RouterModule}          from '@angular/router';
import { CommonModule }         from '@angular/common';

import { ChildComponent }       from './child.public.component';

import { OtherComponent }       from '../other/other.public.component'

@NgModule({
    imports: [
        CommonModule,
        OtherModule,
        RouterModule.forChild([
            {path: 'other', component: OtherComponent, outlet: 'child'}
        ])
    ],
    declarations: [ ChildComponent ],
    exports:    [ ChildComponent ],
})
export class ChildModule { }

child.component

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

@Component({

    selector: 'child-view',
    template: '<router-outlet name="child"></router-outlet>',
})

export class ChildComponent{}

So when I try to browse to /(child:other) I get the typical:

error

Cannot find the outlet child to load 'OtherComponent'

score 0 · Answer 1 · answered Nov 21 '16 at 23:24

I think there's a bit of confusion in there.

Let's have a look at the parent route:

the only route available is path:"" which will load the child.component

For the child route

this is in the child.module which is not being loaded at all by the parent module.

A few things I'd try first: - add the named outlet to the parent.component - add a route to the other component in the parent route

See if it works. Once you get it working....

load the child.module by doing this in the main route:

{ path: 'child', loadChildren: 'app/child.module#ChildModule' }
example of the child route:

{ path: 'other', component: OtherComponent, outlet: 'side'}

then you could browse like this:

/child/(side:other)

I've got a working example in here if you want to give it a try: https://github.com/thiagospassos/Angular2-Routing

Cheers

As far as I can see it, it's the same solution as I mentioned above in this thread: http://stackoverflow.com/questions/39893428/auxiliary-router-outlet-inside-primary-router-outlet In fact the route IS loaded by the parent module via the Router Instance (.forChild). Otherwise it would throw an error for a missing route anyways. The major problem is, that the Router has no idea where to find nested router outlets. — Usche, Nov 22 '16 at 15:52

score 0 · Answer 2 · answered Nov 23 '16 at 04:46

0

It can't find the router-outlet because it's not being loaded. Try something like this @usche:

RouterModule.forChild([ {path: '', component: ChildComponent}, {path: 'other', component: OtherComponent, outlet: 'child'} ])

this way the root route of the child will load the ChildComponent where it has the named outlet and the 'other' route will load inside it

answered Nov 23 '16 at 04:46

Thiago Passos

340
3
7

Thats exactly what I tried and as mentioned it throws: Cannot find the outlet child to load 'OtherComponent'. – Usche Nov 23 '16 at 10:33
1

Created a plunker so you can see it working. It's got a second level though: https://plnkr.co/edit/pSKqvH4vf3HinrZZjWDZ – Thiago Passos Nov 25 '16 at 01:48

Use auxiliary routes in nested child components

2 Answers2