RxJS 6升级：HttpInterceptor编译错误与empty操作符问题

你遇到的问题是RxJS 6核心API变更导致的——Observable.empty这个静态方法在RxJS 6中已经被移除，取而代之的是独立的empty()创建函数，即使你引入了rxjs_compat兼容层，部分静态方法的兼容性处理可能不如Observable.of那么顺畅。

错误原因拆解 #

RxJS 6对创建Observable的方式做了重构：

• 原有的Observable.empty()、Observable.of()等静态方法，全部改为独立的函数（如empty()、of()），需要直接从rxjs包导入。
• 你的报错Property 'empty' does not exist on type 'typeof Observable'就是因为RxJS 6的Observable类不再挂载empty这个静态属性了。

修正方案 #

1. 确保正确导入所需函数

你已经导入了empty，但要确认是从rxjs导入的：

import { Observable, of, empty } from "rxjs";

2. 修正Interceptor的逻辑（重点）

你的代码还有两个逻辑问题：

• catchError里返回of(HttpErrorResponse)是错误的，这会把错误对象替换成HttpErrorResponse这个类本身，而不是错误实例；
• map操作符是处理成功流的，错误流会直接进入catchError，所以你在map里处理错误提示的逻辑永远不会执行。

下面是修正后的完整代码：

import { Injectable } from "@angular/core";
import { HttpEvent, HttpInterceptor, HttpHandler, HttpRequest, HttpErrorResponse } from "@angular/common/http";
import { Observable, of, empty } from "rxjs";
import { ToastrService } from "ngx-toastr";
import { environment } from "../../environments/environment";
import { catchError } 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: HttpErrorResponse) => {
        // 处理错误信息，这里可以根据err.status等自定义提示内容
        const message = err.message || 'Unknown error occurred';
        this.toastr.error(`${message}`, "Application Error");
        
        // 返回empty Observable，终止流的传递
        return empty();
      })
    );
  }
}

3. 关于你补充的Observable.of能编译的原因

rxjs_compat对Observable.of做了兼容处理，所以暂时还能使用，但这是过渡方案，推荐你统一使用独立的of()函数，避免后续兼容层移除后再次出现问题。

额外提示 #

如果需要指定empty()的类型，可以通过泛型参数明确：

return empty<HttpEvent<any>>();

不过在你的Interceptor场景中，TypeScript通常能自动推断类型，泛型参数可以省略。

内容的提问来源于stack exchange，提问作者jenson-button-event