title: Multiple Angular2 routers in one app (RC5)
body: <p>In my angular2 application, I have a global router, which navigates through a number of functions, e.g. home and tutorial. Now in my tutorial component, I want to set up another router to navigate through the different steps. </p>
  
  <p>So globally, here are my files:</p>
  
  <pre><code>//main.ts:
  // The browser platform with a compiler
  import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
  
  // The app module
  import { AppModule } from './app.module';
  
  // Compile and launch the module
  platformBrowserDynamic().bootstrapModule(AppModule);
  </code></pre>
  
  <p>app.routes.ts:</p>
  
  <pre><code>import { homeComponent } from './home/home.component';
  import { tutorialComponent } from './tutorial/tutorial.component';
  import { Routes, RouterModule } from '@angular/router';
  
  const appRoutes: Routes = [
    { path: '', component: homeComponent },
    { path: 'tutorial', component: tutorialComponent }
  ];
  
  export const appRoutingProviders: any[] = [];
  
  export const routing = RouterModule.forRoot(appRoutes);
  </code></pre>
  
  <p>and <code>app.component.ts</code>:</p>
  
  <pre><code>import { Component } from '@angular/core';
  import { sidebarComponent } from './sidebar/sidebar.component';
  import { navbarComponent } from './navbar/navbar.component';
  import { homeComponent } from './home/home.component';
  import { tutorialComponent } from './tutorial/tutorial.component';
  import { ROUTER_DIRECTIVES } from '@angular/router';
  
  @Component({
    selector: 'my-app',
    template: `
    &lt;sidebar&gt;&lt;/sidebar&gt;
    &lt;navbar&gt;&lt;/navbar&gt;
    &lt;router-outlet&gt;&lt;/router-outlet&gt;`,
    directives: [sidebarComponent, navbarComponent, homeComponent, ROUTER_DIRECTIVES],
    precompile: [homeComponent, tutorialComponent]
  })
  export class AppComponent { }
  </code></pre>
  
  <p>Now in my tutorial component, I would like it to look like this:</p>
  
  <pre><code>@Component({
    selector: 'tutorial',
    template: `
             &lt;a routerLink="/chapter/1" routerLinkActive="active"&gt;Chapter 1&lt;/a&gt;
             &lt;a routerLink="/chapter/2" routerLinkActive="active"&gt;Chaoter 2&lt;/a&gt;
             &lt;router-outlet&gt;&lt;router-outlet&gt;,
    directives: [chapterComponent, ROUTER_DIRECTIVES]
  })
  export class tutorialComponent {
      public chapters = _chapters;
      clickedItem: number = 0;
   }
  </code></pre>
  
  <p>So I am not quite sure how to approach this. Do I need to re-bootstrap, where do I define the routes for my "sub-router"? Maybe I reference this in my original bootstrap, in which case how to I discern between the two routers. I would like this to really act as a subrouter, so when I navigate to the tutorial component currently, my address is <code>myDomain.com/tutorial</code>, I would then like to invoke my subrouter and get to routes like <code>myDomain.coom/tutorial/chapter/1</code>
  .
  The docs state that only one router can be used per template which suggests what I want to do is possible? But there is no mention of what to do for the second one.</p>