Angular项目报错：无法解析'rxjs/add/operator/catch'，PC正常笔记本异常

这个报错的核心原因是RxJS版本差异——你的PC上应该安装的是RxJS 5.x版本，而笔记本上是RxJS 6+版本，两者的操作符导入规则完全不同，再加上你用的@angular/http是Angular的旧HTTP模块，也和新版本RxJS不兼容，下面是具体的修复步骤：

1. 先确认版本（关键） #

在笔记本的项目根目录运行命令，查看当前Angular和RxJS的版本：

ng version

如果输出里RxJS是6+、Angular是5及以上，就按照下面的方案适配新版本语法。

2. 修改导入语句 #

把服务文件里的导入部分替换成：

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { catchError } from 'rxjs/operators';
import { of } from 'rxjs'; // 用于错误处理时返回默认值

划重点：RxJS 6+不再支持rxjs/add/operator/xxx这种补丁式导入，必须从rxjs/operators导入pipeable操作符，而且原catch操作符已经改名为catchError了。另外@angular/http是旧模块，Angular 5+官方推荐用HttpClient。

3. 修正服务代码逻辑 #

原代码还有两个小问题：getPosts方法缺少括号、deletePost误用了get请求（应该用delete），同时要配合pipe来使用catchError，修改后的完整代码如下：

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { catchError } from 'rxjs/operators';
import { of } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class PostsService {
  private url = 'https://jsonplaceholder.typicode.com/posts';

  constructor(private http: HttpClient) { }

  getPosts() {
    return this.http.get(this.url).pipe(
      catchError(this.handleError<any>('getPosts', []))
    );
  }

  deletePost(id: number) {
    return this.http.delete(`${this.url}/${id}`).pipe(
      catchError(this.handleError<any>('deletePost'))
    );
  }

  // 通用错误处理函数，可复用
  private handleError<T>(operation = 'operation', result?: T) {
    return (error: any): Observable<T> => {
      console.error(`${operation} 失败: ${error.message}`);
      return of(result as T);
    };
  }
}

为什么PC上能正常运行？ #

因为你的PC环境里安装的是RxJS 5.x版本，它支持rxjs/add/operator/catch这种导入方式，同时旧的@angular/http模块也能和RxJS 5兼容。而笔记本上的RxJS版本升级到了6+，语法规则发生了变化，所以出现了模块找不到的错误。

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