title: Angular 2 routing not working properly
body: <p>I can't seem to get routing to work with children in Angular 2.  The application is my first Angular 2 application, it is very simple and has a navigation bar at the top that should populate content in the lower part of the page.  Whenever I click on any of the navigation links they all navigate to the same child and even worse the content of that child stacks, meaning I click once, the child loads below, I click again it loads again below, so I have it twice, and so on endlessly.</p>
  
  <p>The full content can be found here:  <a href="http://plnkr.co/edit/sMeyztHE8SMKJ254HKet?p=preview" rel="noreferrer">plunker</a></p>
  
  <p>This is my searches.routing.ts file:</p>
  
  <pre><code>import { ModuleWithProviders } from '@angular/core';
  import { Routes, RouterModule } from '@angular/router';
  
  import { AdvancedSearchComponent } from './advanced-search/advanced-search.component';
  import { GuidedSearchComponent } from './guided-search/guided-search.component';
  import { QuickSearchComponent } from './quick-search/quick-search.component';
  
  const searchesRoutes: Routes = [
      {
          children: [
              { path: 'advanced-search', component: AdvancedSearchComponent },
              { path: 'guided-search', component: GuidedSearchComponent },
              { path: 'quick-search', component: QuickSearchComponent }
          ],
          path: '',
          component: GuidedSearchComponent
      }
  ];
  
  export const searchesRouting: ModuleWithProviders = RouterModule.forChild(searchesRoutes);
  </code></pre>
  
  <p>This is my app.routing.ts file:</p>
  
  <pre><code>import { ModuleWithProviders } from '@angular/core';
  import { Routes, RouterModule } from '@angular/router';
  
  const searchesRoutes: Routes = [
      { path: 'searches', loadChildren: 'app/searches/searches.module#SearchesModule' },
      { path: '', redirectTo: "/searches", pathMatch: 'full' }
  ];
  
  const appRoutes: Routes = [
      ...searchesRoutes
  ];
  
  export const appRoutingProviders: any[] = [
  ];
  
  export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);
  </code></pre>
  
  <p>So again, this doesn't work correctly, but if I do all the routes in the main file like so:</p>
  
  <pre><code>import { ModuleWithProviders } from '@angular/core';
  import { Routes, RouterModule } from '@angular/router';
  
  import { AdvancedSearchComponent } from './searches/advanced-search/advanced-search.component';
  import { GuidedSearchComponent } from './searches/guided-search/guided-search.component';
  import { QuickSearchComponent } from './searches/quick-search/quick-search.component';
  
  const appRoutes: Routes = [
      { path: 'searches/advanced-search', component: AdvancedSearchComponent },
      { path: 'searches/guided-search', component: GuidedSearchComponent },
      { path: 'searches/quick-search', component: QuickSearchComponent },
      { path: '', redirectTo: "/searches/guided-search", pathMatch: 'full' }
  ];
  
  export const appRoutingProviders: any[] = [
  ];
  
  export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);
  </code></pre>
  
  <p>But I want to learn how to delegate the searches routes to a submodule to make it more manageable.</p>