Angular 9.1升级至16后HttpClient拦截器catch方法报错求助

问题详情 #

将Angular项目从9.1版本升级至16版本，也尝试过从零创建Angular16项目、复制所有代码文件并更新npm包，在冒烟测试时遇到HttpClient相关报错：

TypeError: next.handle(...).catch is not a function

拦截器代码 #

import { Injectable } from "@angular/core";
import {
  HttpRequest,
  HttpHandler,
  HttpEvent,
  HttpInterceptor,
} from "@angular/common/http";

import {Observable} from 'rxjs/Rx';
import { throwError } from "rxjs";
import { catchError } from 'rxjs/operators';
import { ErrorService } from "@ttgservices/error/error.service";
import { ErrorInfo } from "@ttgdomain/general/errorInfo";

@Injectable()
export class ErrorInterceptor implements HttpInterceptor {
  constructor(private error: ErrorService) {}
  intercept(
    request: HttpRequest<any>,
    next: HttpHandler
  ): Observable<HttpEvent<any>> {
    return next.handle(request).catch((response: any) => {
      if (response && response.error) {
        const errorInfo = response.error as ErrorInfo;
        if (errorInfo && errorInfo.message && errorInfo.status) {
          let msg = `An error ocurred. ${errorInfo.message} (error code: ${errorInfo.status})`;
          if (errorInfo.details) {
            msg = `${errorInfo.message}: ${errorInfo.details} (error code: ${errorInfo.status})`;
          }
          this.error.setError(msg);
        }
      }
      return throwError(response);
    });
  }
}

堆栈信息 #

component-load-base.ts:43 TypeError: next.handle(...).catch is not a function
    at ErrorInterceptor.intercept (error.interceptor.ts:22:38)
    at http.mjs:1614:60
    at Object.handle (http.mjs:1615:40)
    at TokenInterceptor.intercept (token.interceptor.ts:29:17)
    at http.mjs:1614:60
    at http.mjs:1659:16
    at http.mjs:1624:76
    at R3Injector.runInContext (core.mjs:9152:20)
    at http.mjs:1624:57
    at http.mjs:1624:127

package.json核心依赖片段 #

{
  "dependencies": {
    "@angular/animations": "^16.1.0",
    "@angular/common": "^16.1.0",
    "@angular/core": "^16.1.0",
    "rxjs": "^6.5.3",
    "rxjs-compat": "^6.6.7",
    "zone.js": "~0.13.0"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^16.1.4",
    "@angular/cli": "~16.1.4",
    "typescript": "~5.1.3"
  }
}

解决建议 #

1. 修复拦截器的RxJS操作符用法 #

RxJS 6+已废弃链式.catch()方法，必须使用管道操作符pipe()配合catchError操作符。修改拦截器代码：

import { Injectable } from "@angular/core";
import {
  HttpRequest,
  HttpHandler,
  HttpEvent,
  HttpInterceptor,
} from "@angular/common/http";

import { Observable, throwError } from "rxjs"; // 替换旧的rxjs/Rx导入
import { catchError } from 'rxjs/operators';
import { ErrorService } from "@ttgservices/error/error.service";
import { ErrorInfo } from "@ttgdomain/general/errorInfo";

@Injectable()
export class ErrorInterceptor implements HttpInterceptor {
  constructor(private error: ErrorService) {}
  intercept(
    request: HttpRequest<any>,
    next: HttpHandler
  ): Observable<HttpEvent<any>> {
    return next.handle(request).pipe(
      catchError((response: any) => {
        if (response && response.error) {
          const errorInfo = response.error as ErrorInfo;
          if (errorInfo && errorInfo.message && errorInfo.status) {
            let msg = `An error ocurred. ${errorInfo.message} (error code: ${errorInfo.status})`;
            if (errorInfo.details) {
              msg = `${errorInfo.message}: ${errorInfo.details} (error code: ${errorInfo.status})`;
            }
            this.error.setError(msg);
          }
        }
        return throwError(() => response); // RxJS7+推荐传入工厂函数
      })
    );
  }
}

2. 升级RxJS到适配Angular16的版本 #

Angular 16要求RxJS版本至少为^7.5.0，当前使用的RxJS 6.x+rxjs-compat存在兼容性问题，执行以下命令升级：

# 卸载旧版本
npm uninstall rxjs rxjs-compat
# 安装适配版本
npm install rxjs@^7.8.1

3. 检查其他拦截器的RxJS用法 #

从堆栈信息可知还有TokenInterceptor，需确保它也未使用.catch()、.map()等旧版链式方法，全部替换为管道操作符模式。

4. 清理依赖并重新安装 #

删除项目根目录的node_modules文件夹、package-lock.json（或yarn.lock），重新执行安装：

npm install
# 或使用yarn
yarn install

内容的提问来源于stack exchange，提问作者advapi