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>