Angular 2 routing not working properly
<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>