title: Angular2 : How to redirect to the login page when observable subscription fails?
body: <p>In the file <strong><em>auth-guard-service.ts</em></strong>, why is the call this.router.navigateByUrl('/login') not working, while the alert message is printed ? The other call in the other file (<em>auth.service.ts</em>) works correctly.</p>
  
  <p><em>auth-guard-service.ts</em></p>
  
  <pre><code>import { Injectable }          from '@angular/core';
  import { CanActivate, Router } from '@angular/router';
  import { Observable }          from 'rxjs';
  import { Domain }              from 'domain';
  import { AuthService }         from './auth.service';
  
  @Injectable()
  export class AuthGuardService implements CanActivate {
      private domain: Domain = new Domain();
  
      constructor(private router: Router) {}
  
      public canActivate(): Observable&lt;boolean&gt;|Promise&lt;boolean&gt;|boolean {
              return Observable.create(
                  (observer) =&gt; {
                      this.domain.isauth()
                      .subscribe(
                          (res) =&gt; {
                              observer.next(true);
                          },
                          (err) =&gt; {
                              alert('You need to be authentificated to access this content');
                              // The call to navigateByUrl below does not work. To fix.
                              this.router.navigateByUrl('/login');
                          }
                      );
                  }
              );
          }
  </code></pre>
  
  <p><em>auth.service.ts</em></p>
  
  <pre><code>import { Injectable }       from '@angular/core';
  import { Router }           from '@angular/router';
  import { Observable }       from 'rxjs';
  import { Domain }           from 'domain';
  import { ConfigService }    from './config.service';
  
  @Injectable()
  export class AuthService {
      private authObject: Observable&lt;boolean&gt;;
      private domain: Domain = new Domain();
  
      constructor(private router: Router) {}
  
      public login(login: string, password: string) : void {
          this.authObject = this.domain.auth(login, password);
          alert('Connecting... Please wait.');
          this.authObject.subscribe(
              (value) =&gt; {
                  this.router.navigateByUrl('../view/dashboard');
              }
          );
      }
  
      public logout() : void {
          alert('Going to logout...');
          this.domain.logout();
          this.router.navigateByUrl('/login');
      }
  }
  </code></pre>
  
  <p><em>app.routing.ts</em></p>
  
  <pre><code>import { ModuleWithProviders }  from '@angular/core';
  import {
      Routes,
      RouterModule
  }                               from '@angular/router';
  import { LoginComponent }       from './login';
  import {
      DashboardComponent,
      ViewComponent
  }                               from './view';
  import { AuthGuardService }     from './services';
  const appRoutes: Routes = [
      {
          path: 'view',
          component: ViewComponent,
          canActivate: [AuthGuardService],
          children: [
  
              {
                  path: 'dashboard',
                  component: DashboardComponent
              }
              {
                  path: '',
                  redirectTo: 'dashboard',
                  pathMatch: 'full'
              }
          ]
      },
      {
          path: 'login',
          component: LoginComponent
      }
      {
          path: '**',
          redirectTo: 'view'
      }
  ];
  
  export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes, { useHash: true });
  </code></pre>
  
  <p>In the case I get an error (if the user is not connected), I just want to redirect to the login page.</p>
  
  <p>Config : Angular2</p>