child routes for about component

src/app/about/about-routing.module.ts

@@ -0,0 +1,32 @@
+import { NgModule }             from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+import { AboutComponent }  from './about.component';
+import { EarlyLifeComponent }  from './early-life.component';
+import { CareerComponent }  from './career.component';
+
+const aboutRoutes: Routes = [
+    {
+        path: 'about',
+        component: AboutComponent,
+        children: [
+            {
+                path: 'early-life',
+                component: EarlyLifeComponent
+            },
+            {
+                path: 'career',
+                component: CareerComponent
+            }
+        ]
+    }
+];
+
+@NgModule({
+    imports: [
+        RouterModule.forChild(aboutRoutes)
+    ],
+    exports: [
+        RouterModule
+    ]
+})
+export class AboutRoutingModule { }

src/app/about/about.component.html

@@ -1 +1,12 @@
 <h2>About Page</h2>
+<nav>
+    <ul>
+        <li>
+            <a routerLink="early-life">Early Life</a>
+        </li>
+        <li>
+            <a routerLink="career">Career</a>
+        </li>
+    </ul>
+</nav>
+<router-outlet></router-outlet>

src/app/about/career.component.ts

@@ -0,0 +1,6 @@
+import { Component } from '@angular/core';
+
+@Component({
+  template: `<p>a summary of my career goes here</p>`
+})
+export class CareerComponent { }

src/app/about/early-life.component.ts

@@ -0,0 +1,6 @@
+import { Component } from '@angular/core';
+
+@Component({
+  template: `<p>this is a description about my early life</p>`
+})
+export class EarlyLifeComponent { }

src/app/app-routing.module.ts

@@ -7,10 +7,6 @@ import { ResumeComponent }      from './resume/resume.component';
 import { UserComponent }      from './user/user.component';
 
 const routes: Routes = [
-    {
-      path: 'about',
-      component: AboutComponent
-    },
     {
       path: 'resume',
       component: ResumeComponent

src/app/app.module.ts

@@ -7,7 +7,10 @@ import { ResumeComponent } from './resume/resume.component';
 import { LinksComponent } from './links/links.component';
 
 import { AppRoutingModule }     from './app-routing.module';
+import { AboutRoutingModule }     from './about/about-routing.module';
 import { UserComponent } from './user/user.component';
+import { EarlyLifeComponent }  from './about/early-life.component';
+import { CareerComponent }  from './about/career.component';
 
 @NgModule({
   declarations: [
@@ -15,11 +18,14 @@ import { UserComponent } from './user/user.component';
     AboutComponent,
     ResumeComponent,
     LinksComponent,
+    EarlyLifeComponent,
+    CareerComponent,
     UserComponent
   ],
   imports: [
     BrowserModule,
-    AppRoutingModule
+    AppRoutingModule,
+    AboutRoutingModule
   ],
   providers: [],
   bootstrap: [AppComponent]