title: HttpInterceptor handling 401 error does not return Observable
body: <p>I am following this example: <a href="https://www.intertech.com/Blog/angular-4-tutorial-handling-refresh-token-with-new-httpinterceptor/" rel="nofollow noreferrer">https://www.intertech.com/Blog/angular-4-tutorial-handling-refresh-token-with-new-httpinterceptor/</a></p>
  <p>All works well, except the method <code>handle401Error</code>. It does not execute, unless I add <code>subscribe</code> in the interceptor. I must be missing something, even though trying to follow that example.</p>
  <p>Here's the relevant code:</p>
  
  <p>Component:</p>
  <pre class="lang-ts prettyprint-override"><code>ngOnInit() {
    this.service.getData()
      .subscribe((response: any) =&gt; {
        this.message = `Worked with status = ${response.status}`;
      },
      error =&gt; this.message = `Failed with status = ${error.status}`);
  }
  </code></pre>
  <p>Service:</p>
  <pre class="lang-ts prettyprint-override"><code>constructor(private http: HttpClient) {
    this.currentToken = this.authTokenStale;
  }
  
  public authTokenStale: string = 'stale_auth_token';
  public authTokenNew: string = 'new_auth_token';
  public currentToken: string;
  
  getData() {
    return this.http.get&lt;{status}&gt;('https://private-4002d-testerrorresponses.apiary-mock.com/getDataError401');
  }
  
  getAuthToken() {
    return this.currentToken;
  }
  
  refreshToken(): Observable&lt;string&gt; {
    this.currentToken = this.authTokenNew;
    return Observable.of(this.authTokenNew).delay(200);
  }
  </code></pre>
  <p>Interceptor:</p>
  <pre class="lang-ts prettyprint-override"><code>isRefreshingToken: boolean = false;
  tokenSubject: BehaviorSubject&lt;string&gt; = new BehaviorSubject&lt;string&gt;(null);
  
  intercept(request: HttpRequest&lt;any&gt;, next: HttpHandler): Observable&lt;HttpEvent&lt;any&gt;&gt; {
    console.log('interceptor fired!')
    let service = this.inj.get(Service);
    // addToken() returns headers, getAuthToken() returns token
    return next.handle(this.addToken(request, service.getAuthToken())).do((event: HttpEvent&lt;any&gt;) =&gt; {
      if (event instanceof HttpResponse) {
        // success
      }
    }, (err: any) =&gt; {
      if (err instanceof HttpErrorResponse) {
        if (err.status === 401) {
          return this.handle401Error(request, next);
        }
      }
    });
  }
  </code></pre>
  <p>handle401Error:</p>
  <pre class="lang-ts prettyprint-override"><code>handle401Error(req: HttpRequest&lt;any&gt;, next: HttpHandler) {
    if (!this.isRefreshingToken) {
      this.isRefreshingToken = true;
      let service = this.inj.get(Service);
      this.tokenSubject.next(null);
      return service.refreshToken()
          .switchMap((newToken: string) =&gt; {
            console.log('goes to switchMap') // does not come here!
              if (newToken) {
                  this.tokenSubject.next(newToken);
                  return next.handle(this.addToken(this.getNewRequest(req), newToken));
              }
              return this.logoutUser();
          })
          .catch(....)
          //.subscribe(() =&gt; {) // only works!
          .finally(() =&gt; {
            console.log('goes to finally')
              this.isRefreshingToken = false;
          });
    } else {
      return this.tokenSubject
          .filter(token =&gt; token != null)
          .take(1)
          .switchMap(token =&gt; {    
              return next.handle(this.addToken(this.getNewRequest(req), token));        
          });
    }
  }
  </code></pre>
  <p>Sorry, a bit of code, but I think all is relevant to be able to reproduce the issue.</p>
  <p>I also made a</p>
  <h2><strong><a href="https://stackblitz.com/edit/angular-mjn3az?file=app%2Fapp.component.ts" rel="nofollow noreferrer">StackBlitz</a></strong></h2>
  <p>to showcase the issue!</p>