title: Angular HTTPRequest pipe w/ interceptor
body: <p>I am currently attempting to track upload progress in an angular component.  This component accepts a file and calls a service, which uploads the file to the server.</p>
  
  <p>We currently use an interceptor to inject a header with an auth-token.</p>
  
  <pre><code>intercept(request: HttpRequest&lt;any&gt;, next: HttpHandler): Observable&lt;HttpEvent&lt;any&gt;&gt; {
          if (localStorage.getItem('token') != null) {
              request = request.clone({
                  setHeaders: {
                      'X-Auth-Token': localStorage.getItem('token')
                  }
              });
          }
  
          return next.handle(request).pipe(
              map((event: HttpEvent&lt;any&gt;) =&gt; {
                  return event;
              }),
              catchError((error: any) =&gt; {
                  if (error.status === 401) {
                      localStorage.removeItem('token');
                      this.router.navigate(['/public/login']);
                      return of(error);
                  }
                  return throwError(error);
              })
          );
  </code></pre>
  
  <p>If I put a tap() after the map() in here, i can receive the tap notes and log them to the console.</p>
  
  <p>I call the service and attempt to use pipe/tap to get the progress of the upload in my component</p>
  
  <pre><code> this.assetService.upload(formData).pipe(
        map(data =&gt; console.log(data)),
        tap(message =&gt; console.log(message))
      ).subscribe(data =&gt; { console.log(data); });
  </code></pre>
  
  <p>The pipe()/map()/tap() in here is never hit.</p>
  
  <p>Ideally, I'd like to use the tap() in the component to calculate the percentage uploaded and then use it to update a progress bar.</p>