title: Angular - router.navigate() not redirecting to target page
body: <p>i'm working on a simple login process where i try to protect certain path unless they are authenticated.</p>
  
  <p><strong>app.routing.ts</strong></p>
  
  <pre><code>    const  appRoutes: Routes = [
      {
        path: 'add-merchant-admin',
        component : AddMerchantAdminComponent,
        canActivate : [AuthGard]
      },
      {
        path: 'list-merchant-admin',
        component : ListMerchantAdminComponent,
        canActivate : [AuthGard]
      },
      {
        path: 'login',
        component : LoginComponent
      },
      {
        path: '**',
        component: NotFoundComponent
      }
  ];
  
  export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);
  </code></pre>
  
  <p><strong>authGard.service.ts</strong></p>
  
  <pre><code>  import { Injectable } from '@angular/core';
    import {CanActivate, Router} from "@angular/router";
    import {AuthenticationService} from "../authentication-service/authentication.service";
  
    @Injectable()
    export class AuthGard implements CanActivate {
  
      constructor(private _authService:AuthenticationService, private _router:Router) { }
  
      canActivate() {
        if(this._authService.isLoggedIn)
          return true;
  
        this._router.navigate(['login']);
        return false;
      }
    }
  </code></pre>
  
  <p><strong>authentication-service</strong></p>
  
  <pre><code>    @Injectable()
      export class AuthenticationService {
  
        isLoggedIn = false;
  
        constructor() {
        }
  
        login(){
           this.isLoggedIn = true;
        }
  
        logout(){
          this.isLoggedIn = false;
        }
      }
  </code></pre>
  
  <p>When I try to access a <strong>guarded path</strong> like <strong>add-merchant-admin</strong>, the browser keeps loading the page, consuming a lot of memory until it freezes.</p>
  
  <p>These are the details about my app.</p>
  
  <p><strong>node: 6.10.2</strong></p>
  
  <p><strong>os: win32 x64</strong> </p>
  
  <blockquote>
    <p>@angular/animations: 4.2.3</p>
    
    <p>@angular/common: 4.2.3</p>
    
    <p>@angular/compiler: 4.2.3</p>
    
    <p>@angular/core: 4.2.3</p>
    
    <p>@angular/forms: 4.2.3</p>
    
    <p>@angular/http: 4.2.3</p>
    
    <p>@angular/material: 2.0.0-beta.6</p>
    
    <p>@angular/platform-browser: 4.2.3</p>
    
    <p>@angular/platform-browser-dynamic: 4.2.3</p>
    
    <p>@angular/router: 4.2.3</p>
    
    <p><strong>@angular/cli: 1.0.1</strong></p>
    
    <p>@angular/compiler-cli: 4.2.3</p>
    
    <p>Dependency Injection is verified.</p>
    
    <p>Component are correctly imported.</p>
  </blockquote>
  
  <p>I don't know what's going on with this app, normally it should work.</p>
  
  <p>Hope you guys can help me out.</p>
  
  <p>Huge Thanks in advance.</p>