title: Angular2 route guard returning Observable<bool>, how to handle errors
body: <p>I have a route guard like below</p>
  
  <pre><code>@Injectable()
  export class AuthGuard implements CanActivate {
  
  constructor(private router: Router, private authenticationSvc: AuthenticationService) { }
  
  canActivate(): Observable&lt;boolean&gt; {
      return this.authenticationSvc.getAuthenticatedUser().map(
          r =&gt; {
              if (this.authenticationSvc.isAuthenticated()) {
                  // logged in so return true
                  return true;
              }
              this.router.navigateByUrl('/login');
              return false;
          })
  }
  </code></pre>
  
  <p>The issue is that sometimes getAuthenticatedUser returns a 401, and I have an http-interceptor that handles the 401 and redirect to the login page. The issue is that this .map never resolves because the http request throws an error, and the angular router gets stuck on this first routing request and can't handle the subsequent request from the interceptor. How can I handle this error and have the Observable returned resolve to false and keep things moving?</p>
  
  <pre><code>  getAuthenticatedUser() {
           let getUserObservable = this.http.get(ApiUrl + 'security/getAuthenticatedUser')
              .map((res: any) =&gt; res.json())
              .share()
  
          //Get the result for the cache
          getUserObservable.subscribe(
              r =&gt; {
                  if (r.success) {
                      this.authenticatedUser = r.result.user;
                  }
              }); 
  
          //return the observable
          return getUserObservable;
    } 
  </code></pre>
  
  <p>and http-intercepter below</p>
  
  <pre><code>export class HttpInterceptor extends Http {
      authSvc: AuthenticationService;
      lastClicked: any = 0;
      constructor(backend: ConnectionBackend, defaultOptions: RequestOptions, private _router: Router, private injector: Injector) {
          super(backend, defaultOptions);
      }
  request(url: string | Request, options?: RequestOptionsArgs): Observable&lt;Response&gt; {
      return this.intercept(super.request(url, options));
  }
  
  get(url: string, options?: RequestOptionsArgs): Observable&lt;Response&gt; {
      return this.intercept(super.get(url, options));
  }
  
  post(url: string, body: string, options?: RequestOptionsArgs): Observable&lt;Response&gt; {
      return this.intercept(super.post(url, body, this.getRequestOptionArgs(options)));
  }
  
  put(url: string, body: string, options?: RequestOptionsArgs): Observable&lt;Response&gt; {
      return this.intercept(super.put(url, body, this.getRequestOptionArgs(options)));
  }
  
  delete(url: string, options?: RequestOptionsArgs): Observable&lt;Response&gt; {
      return this.intercept(super.delete(url, options));
  }
  
  getRequestOptionArgs(options?: RequestOptionsArgs): RequestOptionsArgs {
      if (options == null) {
          options = new RequestOptions();
      }
      if (options.headers == null) {
          options.headers = new Headers();
      }
      options.headers.append('Content-Type', 'application/json');
      return options;
  }
  
   intercept(observable: Observable&lt;Response&gt;): Observable&lt;Response&gt; {
      return observable.catch((err, source) =&gt; {
          //If we get a 401 from the api that means out FormsAuthenticationTicket has expired, clear the auth cookie and navigate back to terms page
          if (err.status == 401) {
              this._router.navigateByUrl('/login');
          }
  
          return Observable.throw(err);
      });
  }
  </code></pre>