title: Using angular-router to navigate views within a page
body: <p>I'm creating a web application with multiple pages, and within each page there are dynamic sections. I'd like each of these sections to use the angular router.</p>
  
  <p>I've tried simply putting a named router-outlet inside the components, but it doesn't seem to work... Any thoughts?</p>
  
  <p>Here's my general setup.</p>
  
  <p><strong>App template</strong></p>
  
  <pre><code>&lt;main&gt;
    &lt;router-outlet&gt;&lt;/router-outlet&gt;
  &lt;/main&gt;
  </code></pre>
  
  <p><strong>App module</strong></p>
  
  <pre><code>const routes: Routes = [
   { 
    path: 'page', 
    component: PageModule
   }
  ];
  
  @NgModule({
    imports: [PageModule, RouterModule.forRoot(routes)],
    exports: [RouterModule]
  })
  export class AppRoutingModule {}
  </code></pre>
  
  <p><strong>Page template:</strong></p>
  
  <pre><code>&lt;tabset&gt;
    &lt;tab&gt;
      &lt;router-outlet name="section1"&gt;&lt;/router-outlet&gt;
    &lt;/tab&gt;
    &lt;tab&gt;
      &lt;router-outlet name="section2"&gt;&lt;/router-outlet&gt;
    &lt;/tab&gt;
  &lt;/tabset&gt;
  </code></pre>
  
  <p><strong>Page module</strong></p>
  
  <pre><code>const routes: Routes = [
    {
      path: '',
      component: PageComponent,
    },
    {
      path: 'section1-view1',
      component: View1Component,
      outlet: 'section1',
    },
    {
      path: 'section1-view2',
      component: View2Component,
      outlet: 'section1',
    }
    // More routes ...
  ];
  
  @NgModule({
    declarations: [
      PageComponent,
      View1Component,
      View2Component
    ],
    imports: [
      RouterModule.forChild(routes),
      CommonModule,
      TabsetModule
    ]
  })
  export class PageModule { constructor(){} }
  </code></pre>