Router Outlets Angular 2

Question

I am new to angular 2, as router-outlets are dynamic they replace the element by out components (correct me if I am wrong). Why my components are not displayed by using router-outlets?

Here is my routing config :

import { Routes } from '@angular/router'
import { AppComponent } from './app.component'
import { DashBoardComponent } from './dash-board/dash-board.component'
import { LoginComponent } from './login/login.component'
import { AboutComponent } from './about/about.component'
import { ContactUsComponent } from './contact-us/contact-us.component'
import { HomeComponent } from './home/home.component'

export const rout: Routes = [
    { path: '', redirectTo: 'login', pathMatch: 'full' },
    { path: 'login', component: LoginComponent },
    {
        path: 'dashBoard', component: DashBoardComponent, children: [
            { path: '', redirectTo: 'home', pathMatch: 'full' },
            { path: 'contact', component: ContactUsComponent },
            { path: 'home', component: HomeComponent },
            { path: 'about', component: AboutComponent }
        ]
    }
];

And in my dashboard component (that is navigated to when i log in) i have

<a routerLink='home'>Home</a>
 <a routerLink='about'>About</a>
 <a routerLink='contact'>Contact</a>
<router-outlet>
    <!--<app-home></app-home>-->
    <!--<app-contact-us></app-contact-us>-->
    <!--<app-about></app-about>-->
  </router-outlet>

The problem is whenever i un-comment "app-about" and "app-home" , I can see my components , otherwise there is nothing on my page.

Also tell me the difference between

<router-outlet>
        <!--<app-home></app-home>-->
        <!--<app-contact-us></app-contact-us>-->
        <!--<app-about></app-about>-->
      </router-outlet>

and simple

<router-outlet>
      </router-outlet>