title: Type 'Observable<{} is not assignable to type 'Observable<HttpEvent<any>>'
body: <p>I would like to migrate my angular 4 to angular 5. I done the migration from angular 4 to angular 5, and now I have an error on my interceptor to refresh my token. I use this code to intercept all request and refresh my token if I have an 401 error :</p>
  
  <pre><code>import { Observable } from 'rxjs/Observable';
  import { Injectable, Injector } from '@angular/core';
  import { HttpEvent, HttpInterceptor, HttpHandler, HttpRequest } from '@angular/common/http';
  import { UserService } from "./user/services/user.service";
  import { SpinnerService } from "angular-spinners";
  
  @Injectable()
  export class AngularInterceptor implements HttpInterceptor {
      public userService;
      public spinnerService;
  
      constructor(private injector: Injector) {
      }
  
      private applyCredentials = function (req) {
          return req.clone({
              headers: req.headers.set('Authorization', 'Bearer ' + localStorage.getItem('eb-app-token'))
          });
      };
  
      intercept(req: HttpRequest&lt;any&gt;, next: HttpHandler): Observable&lt;HttpEvent&lt;any&gt;&gt; {
          this.userService = this.injector.get(UserService);
          this.spinnerService = this.injector.get(SpinnerService);
  
          return next.handle(this.applyCredentials(req))
              /*.do(event =&gt; {
  
                  if (event instanceof HttpResponse) {
                      console.log(event);
                  }
              })*/
              .catch((res) =&gt; {
                  console.log('Token refresh');
                  if (res.status === 401 || res.status === 403) {
                      return this.userService.refreshToken().first().flatMap((data: any) =&gt; {
                          console.log(data.data);
                          if (data.data !== '') {
                              localStorage.removeItem('token');
                              localStorage.setItem('token', data.data);
  
                              this.userService.token = localStorage.getItem('token');
                              this.userService.isAuthenticated = true;
                          } else {
                              this.userService.logOut();
  
                              return Observable.throw(res);
                          }
  
                          return next.handle(this.applyCredentials(req));
                      });
                  }
                  else if (res.status === 500) {
                      this.spinnerService.hide('spinner');
                      this.spinnerService.hide('spinner-search');
  
                      this.userService.logOut();
                  }
  
                  return Observable.throw(res);
              });
      }
  }
  </code></pre>
  
  <p>I have this error :</p>
  
  <pre><code>ERROR in src/app/app.interceptor.ts(25,9): error TS2322: Type 'Observable&lt;{} | HttpProgressEvent | HttpSentEvent | HttpHeaderResponse | HttpResponse&lt;any&gt; | Http...' is not assignable to type 'Observable&lt;HttpEvent&lt;any&gt;&gt;'.
    Type '{} | HttpProgressEvent | HttpSentEvent | HttpHeaderResponse | HttpResponse&lt;any&gt; | HttpUserEvent&lt;a...' is not assignable to type 'HttpEvent&lt;any&gt;'.
      Type '{}' is not assignable to type 'HttpEvent&lt;any&gt;'.
        Type '{}' is not assignable to type 'HttpUserEvent&lt;any&gt;'.
          Property 'type' is missing in type '{}'.
  </code></pre>
  
  <p>I tried to modify different things. I read this post <a href="https://stackoverflow.com/questions/37221062/observable-not-assignable-to-type-observablesometype">Observable&lt;{}&gt; not assignable to type Observable&lt;SomeType[]&gt;</a> but I don't see the same problem...</p>
  
  <p>The line 25 is :</p>
  
  <pre><code>return next.handle(this.applyCredentials(req))
  </code></pre>
  
  <blockquote>
    <p>UPDATE</p>
  </blockquote>
  
  <p>I modified :</p>
  
  <pre><code>return next.handle(this.applyCredentials(req))
  </code></pre>
  
  <p>by</p>
  
  <pre><code>return &lt;any&gt;next.handle(this.applyCredentials(req))
  </code></pre>
  
  <p>and import :</p>
  
  <pre><code>import 'rxjs/add/operator/do';
  import 'rxjs/add/operator/catch';
  </code></pre>