title: Angular intercept returning error, problem with types
body: <p>Creating HR Manager app using Angular for frontend and .NET for backend. I get error from assigning type in interceptor for HttpRequests.</p>
  <p>auth.interceptor.service.ts</p>
  <pre class="lang-js prettyprint-override"><code>import { Injectable } from '@angular/core';
  import { HttpEvent, HttpInterceptor, HttpHandler, HttpRequest, HttpHeaders, HttpErrorResponse } from '@angular/common/http';
  import { Observable, from, tap } from 'rxjs';
  import { CoreModule } from './core.module';
  import { AuthService } from './auth-service.component';
  import { Constants } from '../constants';
  import { Router } from '@angular/router';
  
  @Injectable()
  export class AuthInterceptorService implements HttpInterceptor {
    constructor(
      private _authService: AuthService,
      private _router: Router,  
    ) { }
    
    intercept(req: HttpRequest&lt;any&gt;, next: HttpHandler): Observable&lt;HttpEvent&lt;any&gt;&gt; {
      if (req.url.startsWith(Constants.apiRoot)) {
        return from(this._authService.getAccessToken().then(token =&gt; {
          const headers = new HttpHeaders().set('Authorization', `Bearer ${token}`);
          const authReq = req.clone({ headers });
          return next.handle(authReq).pipe(tap(_ =&gt; { }, error =&gt; {
            var respError = error as HttpErrorResponse;
            if (respError &amp;&amp; (respError.status === 401 || respError.status === 403)) {
              this._router.navigate(['/unauthorized']);
            }
          })).toPromise();
        }));
      } else {
        return next.handle(req);
      }
    }
  }
  </code></pre>
  <p>AuthService is service for handling login, logout, geting tokens and other needed function.</p>
  <p>auth-service.component.ts</p>
  <pre class="lang-js prettyprint-override"><code>import { Injectable } from '@angular/core';
  import { CoreModule } from './core.module';
  import { UserManager, User } from 'oidc-client';
  import { Constants } from '../constants';
  import { Subject } from 'rxjs';
  
  @Injectable()
  export class AuthService {
      private _userManager: UserManager;
      private _user: User | undefined;
      private _loginChangedSubject = new Subject&lt;boolean&gt;();
  
      loginChanged = this._loginChangedSubject.asObservable();
  
      constructor() {
          const stsSettings = {
              authority: 'https://localhost:5443/',
              client_id: 'spa-client',
              redirect_uri: `${Constants.clientRoot}signin-callback`,
              scope: 'openid profile projects-api',
              response: 'id_token token',
              post_logout_redirect_uri: `${Constants.clientRoot}signout-callback`,
          };
  
          this._userManager = new UserManager(stsSettings);
      }
  
      login(): any {
          return this._userManager.signinRedirect();
      }
  
      isLoggedIn(): Promise&lt;boolean&gt; {
          return this._userManager.getUser().then(user =&gt; {
              const userCurrent = !!user &amp;&amp; !user.expired;
              if (this._user !== user) {
                  this._loginChangedSubject.next(userCurrent);
              }
              this._user = user!;
              return userCurrent;
          });
      }
  
      completeLogin() {
          return this._userManager.signinRedirectCallback().then(user =&gt; {
              this._user = user;
              this._loginChangedSubject.next(!!user &amp;&amp; !user.expired);
              return user;
          });
      }
  
      logout() {
          this._userManager.signoutRedirect();
      }
  
      completeLogout() {
          this._user = null!;
          return this._userManager.signoutRedirectCallback();
      }
  
      getAccessToken() {
          return this._userManager.getUser().then(user =&gt; {
              if (!!user &amp;&amp; !user.expired) {
                  return user.access_token;
              } else {
                  return null;
              }
          });
      }
  }
  </code></pre>
  <p>I'm receiving this error:</p>
  <pre><code>Type 'Observable&lt;HttpEvent&lt;any&gt; | undefined&gt;' is not assignable to type 'Observable&lt;HttpEvent&lt;any&gt;&gt;'.
    Type 'HttpEvent&lt;any&gt; | undefined' is not assignable to type 'HttpEvent&lt;any&gt;'.
      Type 'undefined' is not assignable to type 'HttpEvent&lt;any&gt;'.ts(2322)
  </code></pre>
  <p>The error is caused here:</p>
  <pre class="lang-js prettyprint-override"><code>return from(this._authService.getAccessToken().then(token =&gt; {
          const headers = new HttpHeaders().set('Authorization', `Bearer ${token}`);
          const authReq = req.clone({ headers });
          return next.handle(authReq).pipe(tap(_ =&gt; { }, error =&gt; {
            var respError = error as HttpErrorResponse;
            if (respError &amp;&amp; (respError.status === 401 || respError.status === 403)) {
              this._router.navigate(['/unauthorized']);
            }
          })).toPromise();
        }));
  </code></pre>
  <p><img src="https://i.stack.imgur.com/O8k1o.png" alt="1" /></p>