title: Use auxiliary routes in nested child components
body: <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>