Cannot read property 'navigate' of null in angular2

I am working on angular2 app. In my app I have the appComponent which load the other component and handle the routing. App component also load the nav component. here is my app.html

<nav></nav>
<div class="container">
    <router-outlet></router-outlet>
</div>

here is my appComponent.ts

import {Component, View, Inject} from 'angular2/core';

import {Router, RouteConfig, RouterLink, RouterOutlet, ROUTER_PROVIDERS} from 'angular2/router';

import {HomeComponent} from '../home/home';
import {LoginComponent} from '../login/login';
import {DashboardComponent} from '../dashboard/dashboard';
import {ProjectComponent} from '../project/project';
import {NewProjectComponent} from '../project/newproject';
import {EffortComponent} from '../effort/effort';
import {ProfileComponent} from '../profile/profile';
import {DemoComponent} from '../demo/demo';
import {LeaveComponent} from '../leave/leave';
import {NavComponent} from '../nav/nav';

import {GlobalDataService} from '../../services/globalDataService';


@Component({
    selector: 'app',
})
@View({
    templateUrl: '/scripts/src/components/app/app.html',
    directives: [RouterLink, RouterOutlet, NavComponent]
})
export class AppComponent {
    devIsLogin: boolean;
    Dev: {};
    globalDataService: any
    constructor(
        @Inject(Router) private router: Router
    ) {
        this.globalDataService = GlobalDataService
        this.globalDataService.devIsLogin = false;
        router.config([
            { path: '', component: HomeComponent, as: 'Home' },
            { path: '/login', component: LoginComponent, as: 'Login' },
            { path: '/dashboard', component: DashboardComponent, as: 'Dashboard' },
            { path: '/project', component: ProjectComponent, as: 'Project' },
            { path: '/newproject', component: NewProjectComponent, as: 'NewProject' },
            { path: '/effort', component: EffortComponent, as: 'Effort' },
            { path: '/profile', component: ProfileComponent, as: 'Profile' },
            { path: '/demo', component: DemoComponent, as: 'Demo' },
            { path: '/leave', component: LeaveComponent, as: 'Leave' },
        ]);
    }
}

here is my nav.html

<nav class="navbar navbar-default navbar-fixed-top">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" [routerLink]="['/Home']">Track Me !!</a>
        </div>
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li>
                    <a [routerLink]="['/Home']">Home</a>
                </li>
                <li>
                    <a *ngIf="!globalDataService.devIsLogin" [routerLink]="['/Login']">Login</a>
                </li>
                <li>
                    <a *ngIf="globalDataService.devIsLogin" [routerLink]="['/Dashboard']">Dashboard</a>
                </li>
                <li>
                    <a [routerLink]="['/Demo']">Demo</a>
                </li>
            </ul>
             <ul class="nav navbar-nav pull-right"  *ngIf="globalDataService.devIsLogin">
                <li>
                    <a [routerLink]="['/Dashboard']">{{globalDataService.dev.fName}}</a>
                </li>
                <li>
                    <a (click)="logout()">Logout</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

here is my navcomponent.ts

import {Component, View, Inject} from 'angular2/core';
import {NgIf} from 'angular2/common';
import {Router, RouterLink} from 'angular2/router';

import {GlobalDataService} from '../../services/globalDataService';

@Component({
    selector: 'nav',
})
@View({
    templateUrl: '/scripts/src/components/nav/nav.html',
    directives: [RouterLink,  NgIf]
})
export class NavComponent {
    globalDataService: any
    constructor(
        @Inject(Router) private router: Router
    ) {
        this.globalDataService = GlobalDataService;
    }
    logout() {
        this.router.parent.navigate(['/']);
    }
}

on nav component i have logout function which redirect the user to home page. but when i click on logout page it gives the

I am not able to understand why its throwing error.