title: Angular 2 router ignoring my child <router-outlet> when creating multilevel child route
body: <p>I'm having issues creating a component which contains a <code>&lt;router-outlet&gt;</code> to show children routes, which is at the same time a children of a parent with its own <code>&lt;router-outlet&gt;</code>.</p>
  
  <p>Here's a plunk showing this behaviour with 4 different routes via <code>&lt;a&gt;</code> tags: <a href="https://plnkr.co/edit/0BNNkv?p=preview" rel="nofollow">https://plnkr.co/edit/0BNNkv?p=preview</a></p>
  
  <p>The plunk has an app root component with empty routes as those are specified in the children and a parent component named <code>NavigatorComponent</code>, which is used to navigate. This 'parent' uses child routes as well as I was expecting to have the root routing module in the app component.</p>
  
  <pre><code>const navigatorRoutingModule: ModuleWithProviders = RouterModule.forChild(ROUTES)
  </code></pre>
  
  <p>I'm trying to do this because I don't want any custom component to be the routing root.</p>
  
  <p>For those proposing me to move the navigator to the parent I'll say that I already thought on this and I'll probably be finally doing it. However, I want to know if the pattern I'm suggesting is possible.</p>
  
  <p><code>AppComponent</code> loads a root routing module, which has no routes and the <code>NavigatorModule</code>.
  <code>NavigatorModule</code> has four routes defined into it:</p>
  
  <ul>
  <li>First child route has a lazy-loading (with <code>loadChildren</code>) of a <code>Child1Component</code> which has no children into. When clicked no error is thrown in the console but nothing is loaded.</li>
  <li>Second child route has a eager-loading route to <code>Child2Component</code> which has at the same time two child routes declared into it. Those routes load with no issues but load in the <code>&lt;router-outlet&gt;</code> of the parent, instead of the one defined in <code>Child2Component</code>.</li>
  <li>Second child-children route has the same structure but it has the children routes defined in the parent <code>NavigatorComponent</code>, inside a <code>children</code> property. This behaves as desired but I was expecting to define nested routes to subchilds (p.e. <code>Subchild21Component</code>) inside <code>Child2Component</code>, instead of <code>NavigatorComponent</code>. I try to keep code uncoupled here. Please let me know if you find this to be exagerated.</li>
  <li>Third child route its similar to the first one (lazy-loading with <code>loadChildren</code>), but in this case it has children. Its behaviour its the same as the second child route.</li>
  <li>Fourth route it's the one that approaches the most to what I'm trying to achieve. It has several routes, declared in <code>Child4Component</code>, and are correctly loaded into its <code>&lt;router-outlet&gt;</code>.</li>
  </ul>
  
  <p>The drawback with the last route is that the <code>Route</code> children have to be imported into a children property in the <code>NavigatorComponent</code>. This wouldn't be that bad (as routes are defined in the child anyway), but at the same time I have to define a <code>ModuleWithProviders</code> (<code>ModuleWithProviders = RouterModule.forChild(EXP_ROUTES)</code>) into <code>Child4Component</code> using those routes and exporting out this module to <code>NavigatorComponent</code> to make this to work. This sounds like boilerplate code to me so I think I may be missing something. Moreover, I do not see how I can do lazy-loading here as I have to import the module into the navigator anyway.</p>
  
  <p>I'm new to Angular (not just angular2, but angular in general) so I would thank any comment you have about the code, besides the question itself.</p>
  
  <p><strong>Root routing</strong></p>
  
  <pre><code>import { ModuleWithProviders } from '@angular/core';
  import { Routes, RouterModule } from '@angular/router';
  
  const ROUTES: Routes = [
  
  ];
  
  export const appRoutingProviders: any[] = [
  
  ];
  
  export const appRoutingModule: ModuleWithProviders = RouterModule.forRoot(ROUTES);
  </code></pre>
  
  <p><strong>Navigator module routes</strong> </p>
  
  <pre><code>const ROUTES: Routes = [
    {
      path: '',
      redirectTo: 'child1',
      pathMatch: 'full'
    },
    { path: 'child1',             loadChildren: () =&gt; Child1Module  },
    { path: 'child2',             component: Child2Component },
    {
      path: 'child2-children',
      component: Child2Component,
      children: [
        { path: '',               redirectTo: 'subchild21'        },
        { path: 'subchild21',     component: Subchild21Component  },
        { path: 'subchild22',     component: Subchild22Component  }
      ]
    },
    { path: 'child3', loadChildren: () =&gt; Child3Module },
    { path: 'child4', component: Child4Component, children: [...EXP_ROUTES ] }
  ];
  
  const navigatorRoutingModule: ModuleWithProviders = RouterModule.forChild(ROUTES);
  </code></pre>
  
  <p><strong>Navigator component/template</strong></p>
  
  <pre><code>@Component({
    selector: 'navigator',
      template:
      `&lt;h5&gt;We navigate here!&lt;/h5&gt;
      &lt;div style="display: inline;"&gt;
          &lt;a routerLink="child1" title="Lazy-loading. No children"&gt;Child1&lt;/a&gt;
          &lt;a routerLink="child2" title="Eager-loading. Children defined in child component"&gt;Child2&lt;/a&gt;
          &lt;a routerLink="child2-children" title="Eager-loading. Children defined in the parent"&gt;Child2-Children&lt;/a&gt;
          &lt;a routerLink="child3" title="Lazy-loading. Children defined in the children"&gt;Child3&lt;/a&gt;
          &lt;a routerLink="child4" title="Eager-loading. Children defined in the parent and the children"&gt;Child4&lt;/a&gt;
      &lt;/div&gt;
      &lt;router-outlet&gt;&lt;/router-outlet&gt;`
  })
  export class NavigatorComponent { }
  </code></pre>
  
  <p><strong>Child1 routes</strong></p>
  
  <pre><code>const ROUTES: Routes = [
    { path: '', component: Child1Component  }
  ];
  
  const child1RoutingModule: ModuleWithProviders = RouterModule.forChild(ROUTES);
  </code></pre>
  
  <p><strong>Child2 component/module</strong></p>
  
  <pre><code>const ROUTES: Routes = [
        { path: 'child2',
          children: [
            { path: 'subchild21', component: Subchild21Component  },
            { path: 'subchild22', component: Subchild22Component  }
          ]
        }
  ];
  
  const child2RoutingModule: ModuleWithProviders = RouterModule.forChild(ROUTES);
  
  @Component({
    selector: 'child2',
      template:
      `&lt;h5&gt;This is child 2!&lt;/h5&gt;
      &lt;div style="display: inline;"&gt;
          &lt;a routerLink="subchild21"&gt;Subchild21&lt;/a&gt;
          &lt;a routerLink="subchild22"&gt;Subchild22&lt;/a&gt;
      &lt;/div&gt;
      &lt;router-outlet&gt;&lt;/router-outlet&gt;`
  })
  export class Child2Component { }
  
  @NgModule({
    imports:      [ child2RoutingModule, Subchild21Module, Subchild22Module ],
    exports:      [ Child2Component ],
    declarations: [ Child2Component ]
  })
  export class Child2Module { }
  </code></pre>
  
  <p><strong>Child3 component/module</strong></p>
  
  <pre><code>const ROUTES: Routes = [
    {
      path: '',
      component: Child3Component,
      children: [
        { path: '',               redirectTo: 'subchild31'        },
        { path: 'subchild31',     component: Subchild21Component  },
        { path: 'subchild32',     component: Subchild22Component  }
      ]
    }
  ];
  
  const child3RoutingModule: ModuleWithProviders = RouterModule.forChild(ROUTES);
  
  @Component({
    selector: 'child3',
    template:
      `&lt;h5&gt;This is child 3!&lt;/h5&gt;
      &lt;div style="display: inline;"&gt;
          &lt;a routerLink="subchild31"&gt;Subchild31&lt;/a&gt;
          &lt;a routerLink="subchild32"&gt;Subchild32&lt;/a&gt;
      &lt;/div&gt;
      &lt;router-outlet&gt;&lt;/router-outlet&gt;`
  })
  export class Child3Component { }
  
  @NgModule({
    imports:      [ child3RoutingModule, ],
    exports:      [ Child3Component, ],
    declarations: [ Child3Component ]
  })
  export class Child3Module { }
  </code></pre>
  
  <p><strong>Child4 component/module</strong></p>
  
  <pre><code>export const EXP_ROUTES: Routes = [
      { path: '', pathMatch: 'full', redirectTo: 'subchild41' },  
      { path: 'subchild41', component: Subchild21Component    },
      { path: 'subchild42', component: Subchild22Component    }
  ];
  
  const child4RoutingModule: ModuleWithProviders = RouterModule.forChild(EXP_ROUTES);
  
  @Component({
    selector: 'child4',
      template:
      `&lt;h5&gt;This is child 4!&lt;/h5&gt;
      &lt;div style="display: inline;"&gt;
          &lt;a routerLink="subchild41"&gt;Subchild41&lt;/a&gt;
          &lt;a routerLink="subchild42"&gt;Subchild42&lt;/a&gt;
      &lt;/div&gt;
      &lt;router-outlet&gt;&lt;/router-outlet&gt;`
  })
  export class Child4Component { }
  
  @NgModule({
    imports:      [ child4RoutingModule, Subchild21Module, Subchild22Module ],
    exports:      [ Child4Component ],
    declarations: [ Child4Component ]
  })
  export class Child4Module { }
  </code></pre>