RXJS 6: new version of HttpInterceptor

问题:

I am in the process of adding rxjs_compat to my project in order to move to v6 of libraries.

However the existing HttpInterceptor for global error handling no longer compiles. Not sure where to go with it. Tried all sorts. Getting type mismatches with everything tried.

import { Injectable } from "@angular/core";
import {
  HttpEvent,
  HttpInterceptor,
  HttpHandler,
  HttpRequest,
  HttpResponse,
  HttpErrorResponse
} from "@angular/common/http";
import { Observable, of, empty } from "rxjs";
import { ToastrService } from "ngx-toastr";
import { environment } from "../../environments/environment";
import { catchError, map } from "rxjs/operators";

@Injectable()
export class HttpErrorInterceptor implements HttpInterceptor {
  constructor(private toastr: ToastrService) {}
  intercept(
    request: HttpRequest<any>,
    next: HttpHandler
  ): Observable<HttpEvent<any>> {
    return next.handle(request).pipe(
      catchError(err => of(HttpErrorResponse)),
      map(err => {
        let message: string;
         this.toastr.error(`${message}`, "Application Error");
        return Observable.empty<HttpEvent<any>>();
      })
    );
  }
}

src/app/shared/http-error-interceptor.ts(26,27): error TS2339: Property 'empty' does not exist on type 'typeof Observable'.

empty is now a constant, but doesn't accept a type, so that does not work either. Also could not find much in the upgrade notes

EDIT

although interestingly this compiles:

return Observable.of<HttpEvent<any>>();

回答1:

1. import {EMPTY} from 'rxjs';

2. Replace return Observable.empty() with

   return EMPTY;

回答2:

Couldn't figure out how to return something that the compiler accepts, but was at least able to throw an error. The code compiles and works, but as a beginner in Rxjs not sure if it is correct.

  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    const xhr = req.clone({
      headers: req.headers.set('X-Requested-With', 'XMLHttpRequest')
    });
    return next.handle(xhr).pipe(
      catchError((err) => {
        if (err instanceof HttpErrorResponse) {
          if (err.status === 401) {
            this.router.navigate(['/login']);
          } else {
            this.snack.open('Communication error: ' + err.status + ' - ' + err.statusText, null,
             {duration: 5000, panelClass: 'snack-error', verticalPosition: 'top'});
          }
          return throwError('backend comm error');
        }
      })
    );
  }