Use auxiliary routes in nested child components
<p>I'm trying to use <a href="http://blog.angular-university.io/angular2-router/" rel="noreferrer">Auxiliary Routes</a> within a child-component similar to the problem posted <a href="https://stackoverflow.com/questions/39893428/auxiliary-router-outlet-inside-primary-router-outlet">here</a>. Since the posted "solution" is more like a workaround I'm curious how to do it like in the blogpost above.</p>

<p>I'm using Angular 2.1.2 with Router 3.1.2.  </p>

<p><strong>parent.module</strong></p>

<pre><code>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 { }
</code></pre>

<p><strong>parent.component</strong></p>

<pre><code>import {Component} from '@angular/core';

    @Component({
        selector: 'my-app',
        template: '&lt;router-outlet&gt;&lt;/router-outlet&gt;'
    })

export class ParentComponent{ }
</code></pre>

<p><strong>child.module</strong></p>

<pre><code>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 { }
</code></pre>

<p><strong>child.component</strong></p>

<pre><code>import { Component } from '@angular/core';

@Component({

    selector: 'child-view',
    template: '&lt;router-outlet name="child"&gt;&lt;/router-outlet&gt;',
})

export class ChildComponent{}
</code></pre>

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

<p><strong>error</strong></p>

<pre><code>Cannot find the outlet child to load 'OtherComponent'
</code></pre>