Angular12升级后发送AJAX请求报错Cannot read properties of undefined (reading 'pipe')

问题原因 #

Angular 12 配套的 RxJS 版本对管道（pipe）的参数校验更严格，仅允许传入标准 RxJS 操作符作为参数。你当前代码直接在pipe()内写入普通错误回调函数，没有用对应操作符包裹，导致管道执行后返回undefined，触发Cannot read properties of undefined (reading 'pipe')报错。

解决步骤 #

1. 先在拦截器文件头部引入缺失的 RxJS 依赖：

import { catchError, tap } from 'rxjs/operators';
import { throwError } from 'rxjs';

2. 修改intercept方法内的管道逻辑，使用catchError操作符包裹错误处理代码，且必须返回 Observable 保证异步流不中断：

return httpHandler.handle(updatedRequest).pipe(
  tap((event: HttpEvent<any>) => {
    console.log('httpHandler', event);
    if (event instanceof HttpResponse) {
      this.updateLoaderState(loaderName, 'success', event);
    }
  }),
  catchError((responseError: HttpErrorResponse) => {
    // 此处可补充自定义错误处理逻辑
    this.updateLoaderState(loaderName, 'error', responseError);
    // 将错误抛出供上层订阅捕获，也可根据业务需求返回自定义HttpResponse
    return throwError(() => responseError);
  })
);

修改后重新编译即可解决报错。

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