title: Angular2 nested routing not working
body: <p>I am working on a small trial project with Angular2 where I have a <strong>menu</strong> and a <strong>sub-menu</strong>. Hence I need to have some kind of nested routing for sub-menu. I referred to angular.io site in the <em>case study: Tour of heroes</em> section but was not able to implement it successfully.</p>
  
  <p>My main menu(navigation) has this routing configuration</p>
  
  <pre><code>@RouteConfig([
      { path: '/letter/...', name: 'Letter', component: LetterComponent },
      { path: '/contact', name: 'Contact', component: ContactsComponent },
      { path: '/notes', name: 'Notes', component: NotesComponent }
  ])
  </code></pre>
  
  <p>used in the UI(template) as</p>
  
  <pre><code>&lt;ul class="sidebar-nav"&gt;
      &lt;li id="menu-title-li"&gt;
           &lt;div id="menu-title" class="noselect"&gt;MENU&lt;/div&gt;
      &lt;/li&gt;
      &lt;li&gt;
          &lt;a [routerLink]="['Contacts']"&gt;Contacts&lt;/a&gt;
      &lt;/li&gt;
      &lt;li&gt;
          &lt;a [routerLink]="['/Letter','All']"&gt;Letters&lt;/a&gt;
      &lt;/li&gt;
      &lt;li&gt;
          &lt;a [routerLink]="['Notes']"&gt;Notes&lt;/a&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  &lt;router-outlet&gt;&lt;/router-outlet&gt;
  </code></pre>
  
  <p>Letters section will have a sub-navigation and hence child routes.</p>
  
  <p>sub-menu(sub-navigation) under letters component has been configured as</p>
  
  <pre><code>@Component({
      selector: 'letter',
      templateUrl: './app/Letter/template.html',
      directives: [RouterOutlet, ROUTER_DIRECTIVES],
      providers: [ROUTER_PROVIDERS]
  })
  
  @RouteConfig([
      { path: '/all', component: AlllettersComponent, name: 'All' , useAsDefault: true},
      { path: '/inwards', component: InwardsComponent, name: 'Inwards' },
      { path: '/outwards', component: OutwardsComponent, name: 'Outwards' }
  ])
  </code></pre>
  
  <p>used in the UI(template) as</p>
  
  <pre><code>&lt;ul class="nav nav-tabs"&gt;
      &lt;li role="presentation"&gt;
          &lt;a [routerLink]="['All']"&gt;All&lt;/a&gt;
      &lt;/li&gt;
      &lt;li role="presentation"&gt;
          &lt;a [routerLink]="['Inwards']"&gt;Inwards&lt;/a&gt;
      &lt;/li&gt;
      &lt;li role="presentation"&gt;
          &lt;a [routerLink]="['Outwards']"&gt;Outwards&lt;/a&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  &lt;router-outlet name="letter-outlet"&gt;&lt;/router-outlet&gt;
  </code></pre>
  
  <p>The main menu works and displays the corresponding template except for letters section. When I click on letters option, the corresponding template of sub-menu is loaded but in the address bar I still see <code>http://localhost:3000/contact</code> which I had navigated to before, I get the following error in my console, and thereafter nothing works.</p>
  
  <blockquote>
    <p>angular2.dev.js:23877 Error: Component "AppComponent" has no route named "All".</p>
  </blockquote>
  
  <p>I tried a lot of things that people suggested for similar problems on github and stackoverflow but nothing seems to work.</p>
  
  <p>Is nested routing really supported in angular2? I went through this thread (<a href="https://github.com/angular/angular/issues/6204" rel="nofollow">Router Huge Flaw - Does not allow more than 1 level of nesting #6204</a>) on github but didn't help. Is there any way to get around this problem?</p>