Angular 2 routing not working properly

Question

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.

The full content can be found here: plunker

This is my searches.routing.ts file:

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);

This is my app.routing.ts file:

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);

So again, this doesn't work correctly, but if I do all the routes in the main file like so:

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);

But I want to learn how to delegate the searches routes to a submodule to make it more manageable.

Answer 1

You should have root component within searchesRoutes for your children routes like:

@Component({
    selector: 'art-search',
    template: `<router-outlet></router-outlet>`
})
export class SearchComponent {}

And you also have to specify default route like:

{ path: '', redirectTo: '/guided-search', pathMatch: 'full' }

Then your searches.routing.ts file will be:

const searchesRoutes: Routes = [
  {
    children: [
      { path: 'advanced-search', component: AdvancedSearchComponent },
      { path: 'guided-search', component: GuidedSearchComponent },
      { path: 'quick-search', component: QuickSearchComponent },
      { path: '', redirectTo: '/guided-search', pathMatch: 'full' }
    ],
    path: '', component: SearchComponent
  } 
];

See more details here Plunker