title: Angular 4 - HTTP Interceptor
body: <p>I'm trying to create HTTP Interceptor in Angular 4 but I'm having some weird error. Following is my error:</p>
  
  <pre><code>Argument of type 'Observable&lt;Response&gt;' is not assignable to parameter of type 'Observable&lt;Response&gt;'.
  </code></pre>
  
  <p>Following is my Code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import { Injectable } from '@angular/core';
  import { Http, ConnectionBackend, RequestOptions, RequestOptionsArgs } from '@angular/http';
  import { Router } from '@angular/router';
  import { Observable } from 'rxjs/Observable';
  import * as _ from 'lodash';
  
  @Injectable()
  export class HttpInterceptor extends Http {
  
      constructor(backend: ConnectionBackend, defaultOptions: RequestOptions, private _router: Router) {
          super(backend, defaultOptions);
      }
  
      request(url: string | Request, options?: RequestOptionsArgs): Observable&lt;Response&gt; {
          return this.intercept(super.request(url, options)); // Here is the error
      }
  
      get(url: string, options?: RequestOptionsArgs): Observable&lt;Response&gt; {
          return this.intercept(super.get(url, options)); // Here is the error
      }
  
      post(url: string, body: string, options?: RequestOptionsArgs): Observable&lt;Response&gt; {
          return this.intercept(super.post(url, body, this.getRequestOptionArgs(options))); // Here is the error
      }
  
      put(url: string, body: string, options?: RequestOptionsArgs): Observable&lt;Response&gt; {
          return this.intercept(super.put(url, body, this.getRequestOptionArgs(options))); // Here is the error
      }
  
      delete(url: string, options?: RequestOptionsArgs): Observable&lt;Response&gt; {
          return this.intercept(super.delete(url, options)); // Here is the error
      }
  
      getRequestOptionArgs(options?: RequestOptionsArgs): RequestOptionsArgs {
          if (options == null) {
              options = new RequestOptions();
          }
          if (options.headers == null) {
              options.headers = new Headers(); // Here is the error
          }
          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 (err.status == 401 &amp;&amp; !_.endsWith(err.url, 'api/auth/login')) {
                  this._router.navigate(['/login']);
                  return Observable.empty();
              } else {
                  return Observable.throw(err);
              }
          });
  
      }
  
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>Does anyone know what is going wrong here? I tried debugging for 3 hours but unable to find any clue.</p>
  
  <p><strong>Edit:</strong></p>
  
  <p>I also tried to remove everything and written a code like this:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>request(url: string | Request, options?: RequestOptionsArgs): Observable&lt;Response&gt; {
      return super.request(url, options);
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>But still it's giving same error:</p>
  
  <p><code>Argument of type 'string | Request' is not assignable to parameter of type 'string | Request'. Type 'Request' is not assignable to type 'string | Request'.</code></p>