Angular项目RxJS操作符与Observable订阅报错求助

我来帮你搞定这两个启动项目时遇到的TS错误，咱们一个一个拆解：

错误1：book.service.ts中的TS2339 #

Property 'map' does not exist on type 'Observable<Response>'

问题原因 #

你应该用的是RxJS 6+版本，这个版本彻底改变了操作符的使用方式——不再支持直接在Observable对象上链式调用map、catch这类方法，必须用pipe()方法把操作符包裹起来。另外你用的Http模块是Angular的旧版本模块，Angular 4.3之后官方推荐用HttpClient，它能自动解析JSON响应，省得你手动写res.json()。

修复步骤&代码 #

1. 替换旧Http模块为HttpClient：导入HttpClient和HttpClientModule（记得在根模块里注册）
2. 改用pipeable操作符：把map、catch放到pipe()里，并且catch要换成新的catchError
3. 更新错误抛出方式：旧的Observable.throw要换成throwError（需要从rxjs导入）

修改后的books.service.ts代码：

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http'; // 替换成新版HttpClient
import { Observable, throwError } from 'rxjs'; // 导入throwError替代Observable.throw
import { map, catchError } from 'rxjs/operators'; // 导入catchError替代旧的catch
import { Book } from './book';

@Injectable()
export class BookService {
  url = "http://localhost:4200/assets/data/books.json";

  constructor(private http: HttpClient) { } // 注入HttpClient

  getBooksWithObservable(): Observable<Book[]> {
    return this.http.get<Book[]>(this.url) // HttpClient直接指定返回类型，自动解析JSON
      .pipe(
        map(this.extractData),
        catchError(this.handleErrorObservable)
      );
  }

  getBooksWithPromise(): Promise<Book[]> {
    return this.http.get<Book[]>(this.url).toPromise()
      .then(this.extractData)
      .catch(this.handleErrorPromise);
  }

  private extractData(res: Book[]) {
    return res || []; // 因为HttpClient已经解析了JSON，直接返回即可
  }

  private handleErrorObservable(error: any) {
    console.error(error.message || error);
    return throwError(error.message || error); // 用throwError替代Observable.throw
  }

  private handleErrorPromise(error: any) {
    console.error(error.message || error);
    return Promise.reject(error.message || error);
  }
}

别忘了在你的根模块（比如AppModule）里注册HttpClientModule：

import { HttpClientModule } from '@angular/common/http';

@NgModule({
  imports: [
    // ...其他已导入的模块
    HttpClientModule
  ],
  // ...其他配置项
})
export class AppModule { }

错误2：observable.component.ts中的TS2345 #

Argument of type 'void' is not assignable to parameter of type '(error: any) => void'

问题原因 #

这个错误大概率是第一个错误导致的连锁反应——当服务里的Observable返回类型有问题时，subscribe的回调函数类型校验就会出错。当然也可能是你错误回调里的类型断言写法不够规范。

修复步骤 #

等你把第一个错误修复后，这个错误大概率会自动消失。如果还存在，你可以调整subscribe的错误回调写法，去掉不必要的类型断言，明确指定参数类型：

修改后的ngOnInit方法代码：

ngOnInit(): void {
  this.observableBooks = this.bookService.getBooksWithObservable();
  console.log('observable');
  alert('observable');
  console.log(this.observableBooks);
  
  this.observableBooks.subscribe(
    books => this.books = books,
    (error: any) => this.errorMessage = error.message || error // 明确指定error类型
  );
}

总结 #

这两个问题核心都是RxJS版本升级带来的语法变化，以及旧版Http模块的使用问题。换成HttpClient+pipeable操作符的组合后，应该就能顺利启动项目了。

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