Child Routing

// Root route
/user/:id

// Child Routes
/user/:id/edit
/user/:id/detail

Root route

Create `app.routes.ts`

```javascript
import { RouterModule, Routes } from "@angular/router";
import { UserComponent } from "./user/user.component";
import { HomeComponent } from "./home-component.component";
import { USER_ROUTES } from "./user/user.routes";


const APP_ROUTES: Routes = [
  { path: '', component: HomeComponent },
  { path: '**', redirectTo: '/user/1', pathMatch: 'full' },
  { path: 'user/:id', component: UserComponent, children: USER_ROUTES },
];

export const routing = RouterModule.forRoot(APP_ROUTES);

Define child routes

In user.routes.ts

import { RouterConfig } from "@angular/router";

import { UserDetailComponent } from "./user-detail.component";
import { UserEditComponent } from "./user-edit.component";
import { UserDetailGuard } from "./user-detail.guard";

export const USER_ROUTES: RouterConfig = [
  { path: 'detail', component: UserDetailComponent] },
  { path: 'edit', component: UserEditComponent] }
];

Define child route placeholder

In user.component.ts

import { Component} from '@angular/core';
import { ROUTER_DIRECTIVES } from "@angular/router";

@Component({
  moduleId: module.id,
  selector: 'app-user-component',
  template: `
      <h1>User Component</h1>
      <router-outlet></router-outlet>
    `,
  directives: [ROUTER_DIRECTIVES]
})