title: Cannot read property 'navigate' of null in angular2
body: <p>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 <strong>app.html</strong></p>
  
  <pre><code>&lt;nav&gt;&lt;/nav&gt;
  &lt;div class="container"&gt;
      &lt;router-outlet&gt;&lt;/router-outlet&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>here is my <strong>appComponent.ts</strong></p>
  
  <pre><code>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' },
          ]);
      }
  }
  </code></pre>
  
  <p>here is my <strong>nav.html</strong></p>
  
  <pre><code>&lt;nav class="navbar navbar-default navbar-fixed-top"&gt;
      &lt;div class="container-fluid"&gt;
          &lt;div class="navbar-header"&gt;
              &lt;button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"&gt;
                  &lt;span class="sr-only"&gt;Toggle navigation&lt;/span&gt;
                  &lt;span class="icon-bar"&gt;&lt;/span&gt;
                  &lt;span class="icon-bar"&gt;&lt;/span&gt;
                  &lt;span class="icon-bar"&gt;&lt;/span&gt;
              &lt;/button&gt;
              &lt;a class="navbar-brand" [routerLink]="['/Home']"&gt;Track Me !!&lt;/a&gt;
          &lt;/div&gt;
          &lt;div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"&gt;
              &lt;ul class="nav navbar-nav"&gt;
                  &lt;li&gt;
                      &lt;a [routerLink]="['/Home']"&gt;Home&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li&gt;
                      &lt;a *ngIf="!globalDataService.devIsLogin" [routerLink]="['/Login']"&gt;Login&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li&gt;
                      &lt;a *ngIf="globalDataService.devIsLogin" [routerLink]="['/Dashboard']"&gt;Dashboard&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li&gt;
                      &lt;a [routerLink]="['/Demo']"&gt;Demo&lt;/a&gt;
                  &lt;/li&gt;
              &lt;/ul&gt;
               &lt;ul class="nav navbar-nav pull-right"  *ngIf="globalDataService.devIsLogin"&gt;
                  &lt;li&gt;
                      &lt;a [routerLink]="['/Dashboard']"&gt;{{globalDataService.dev.fName}}&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li&gt;
                      &lt;a (click)="logout()"&gt;Logout&lt;/a&gt;
                  &lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p>here is my <strong>navcomponent.ts</strong></p>
  
  <pre><code>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(['/']);
      }
  }
  </code></pre>
  
  <p>on nav component i have logout function which redirect the user to home page.
  but when i click on logout page it gives the</p>
  
  <p><a href="https://i.stack.imgur.com/IzvpU.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/IzvpU.jpg" alt="enter image description here"></a></p>
  
  <p>I am not able to understand why its throwing error. </p>