Child (Nested) Routes in Angular 4

–TS File

const appRoutes: Routes = [
  { path: '', component: HomeComponent},
  { path: 'users', component: UserComponent},
  { path: 'users/:id/:name', component: UserComponent},
  { path: 'servers', component: ServersComponent},
  { path: 'servers/:id', component: ServerComponent},
  { path: 'servers/:id/edit', component: EditServerComponent},
]

---

const appRoutes: Routes = [
  { path: '', component: HomeComponent},
  { path: 'users', component: UserComponent},
  { path: 'users/:id/:name', component: UserComponent},
  { path: 'servers', component: ServersComponent, children: [
    { path: ':id', component: ServerComponent},
    { path: ':id/edit', component: EditServerComponent},
  ]},
]

With children attribute array

–HTML File (servers.component.html)

<div class="col-xs-12 col-sm-4">
<app-edit-server></app-edit-server>
</div>

---

<div class="col-xs-12 col-sm-4">
<router-outlet></router-outlet>
</div>