在最新的Angular 7中。，你可以简单地尝试:

import { Observable, of } from "rxjs";
import { map, catchError } from "rxjs/operators";

然后你可以使用下面这些方法:

   private getHtml(): Observable<any> {
    return this.http.get("../../assets/test-data/preview.html").pipe(
      map((res: any) => res.json()),
      catchError(<T>(error: any, result?: T) => {
        console.log(error);
        return of(result as T);
      })
    );
  }

查看这个演示以获得更多细节。

你需要导入map操作符:

import 'rxjs/add/operator/map'

或者更一般地说:

import 'rxjs/Rx';

注意:对于RxJS 6.x版本。X和以上，你将必须使用可管道的操作符，如下面的代码片段所示:

import { map } from 'rxjs/operators';
import { HttpClient } from '@angular/common/http';

// ...
export class MyComponent {
  constructor(private http: HttpClient) { }
  getItems() {
    this.http.get('https://example.com/api/items').pipe(map(data => {})).subscribe(result => {
      console.log(result);
    });
  }
}

这是由于RxJS团队删除了对使用的支持 更多信息请参见RxJS更新日志中的重大更改。

更新日志如下:

operator:可管道操作符现在必须像这样从rxjs中导入:import {map, filter, switchMap} from 'rxjs/operators';没有深度进口。

在我的情况下，只包括地图和承诺是不够的:

import 'rxjs/add/operator/map';
import 'rxjs/add/operator/toPromise';

我按照官方文档的建议导入了几个rxjs组件，解决了这个问题:

1)在一个app/rxjs-operators中导入语句。ts文件:

// import 'rxjs/Rx'; // adds ALL RxJS statics & operators to Observable

// See node_module/rxjs/Rxjs.js
// Import just the rxjs statics and operators we need for THIS app.

// Statics
import 'rxjs/add/observable/throw';

// Operators
import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/debounceTime';
import 'rxjs/add/operator/distinctUntilChanged';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/switchMap';
import 'rxjs/add/operator/toPromise';

2)在你的服务中导入rxjs-operator本身:

// Add the RxJS Observable operators we need in this app.
import './rxjs-operators';

我也曾犯过同样的错误。一个对我有效的解决方案是在您的服务中添加以下行。Ts文件而不是导入'rxjs/add/operator/map':

import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';

举个例子，我的app。service。ts在调试之后，

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

@Injectable()
export class AppService {
    constructor(private http: HttpClient) {}
    getData(): Observable<any> {
        return this.http.get('https://samples.openweathermap.org/data/2.5/history/city?q=Warren,OH&appid=b6907d289e10d714a6e88b30761fae22')
        .pipe(map(result => result));
    }
}

我有同样的问题，我解决它如下

import { map } from 'rxjs/operators'; // imports statement 

return this.auth.user$.pipe(
  map(user =>{
    if(user) return true;
        this.router.navigate(['/login'], { queryParams: {returnUrl :state.url}});
    return false;
  }));
}

有一个问题，可观察类型是空的，所以我添加类型任何，它有助于清除许多错误

user$: Observable<firebase.User | any>;

我使用的是Angular 5.2，当我使用import 'rxjs/Rx';它抛出我以下lint错误: TSLint:此导入被列入黑名单，改为导入子模块(import-blacklist)

请看下面的截图:

解决方案: 通过只导入我需要的操作符解决了这个问题。例子如下:

import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';

因此，解决办法是只导入必要的操作符。