Angular 2: Child Routes not working

I am learning Angular 2 and get stuck at setting up the child routes.

I am trying to build the simple ToDo app and couldn't manage to set up the route for adding a new item.

That's what I am trying to get and 'todo/add' link is not working and keep giving me 404 error.

Examples:

• localhost/todo
• localhost/todo/add

I added todo.module.ts in app.module.ts.

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpModule } from '@angular/http';
import { Routes, RouterModule } from '@angular/router';

import { HomeComponent } from "./home/home.component";
import { AppComponent } from "./app.component";
import { PageNotFoundComponent } from "./not-found.component";
import { TodoListComponent } from "./todo/todo-list.component";

import { TodoModule } from "./todo/todo.module";

@NgModule({
    imports: [
        BrowserModule,
        HttpModule,
        RouterModule.forRoot([
            { path: 'home', component: HomeComponent },
            { path: 'todo', component: TodoListComponent },
            { path: '**', component: PageNotFoundComponent }
        ],
            TodoModule)
    ],
    declarations: [
        AppComponent,
        HomeComponent,
        TodoListComponent,
        PageNotFoundComponent
    ],
    bootstrap: [AppComponent],
})
export class AppModule { }

And set up the child routes in todo.module.ts for todo/add

todo.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { TodoListComponent } from './todo-list.component';
import { TodoAddComponent } from './todo-add.component';

@NgModule({
    imports: [
        RouterModule.forChild([
            { path: 'todo', component: TodoListComponent },
            { path: 'todo/add', component: TodoAddComponent }
            // tested these routes and not working too
            //{ path: 'add', component: TodoAddComponent }
            //{ path: 'todo/:id', component: TodoAddComponent }
        ])
    ],
    declarations: [
        TodoAddComponent,
        TodoListComponent
    ],
    providers: [

    ]
})
export class TodoModule { }

I tested 3 possible ways which I found on the Internet and all of them give me 404 error (which redirects to PageNotFoundComponent)

<h1>Todo List</h1>
<a [routerLink]="['/todo/add']">Add New Item with /</a><br />
<a [routerLink]="['/todo', 'add']">Add New Item</a><br />
<a [routerLink]="['add']">Add New Item</a>

They rendered as /todo/add, /todo/add, /add but all of them are hitting 404 error.

Could you guys please help me to sort out this problem?

Sometimes, I am very frustrated at myself (or probably Angular2) and couldn't understand why it's very difficult to learn/do just simple things.