Configuring the Angular 2 child routes configuration
In your app-routing.module.ts
const routes: Routes = [ { path: '', redirectTo: '/dashboard', pathMatch: 'full'}, { path: 'dashboard', component: DashboardComponent, data: { Title: 'Dashboard' } }, { path: 'type', component: TypeComponent, data: { Title: 'Types' }, children: [ { path: '', component: TypeGridComponent}, { path: 'edit/:id', component: TypeDetailsComponent, data: { Title: 'Edit' } }, { path: 'new', component: TypeDetailsComponent, data: { Title: 'New' } } ] } ];
in your app.component.html you will have the router-outlet like this
<!-- necessary html wrappers here--> <router-outlet></router-outlet>
each of your sub-components needs to be nested under the main template of that component. this is how type.component.html looks like.
<router-outlet></router-outlet>