プロパティ 'map'はタイプ 'Observable <Response>'に存在しません

AngularからAPIを呼び出そうとしていますが、このエラーが発生しています：

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

この同様の質問からの回答は私の問題を解決しませんでした：Angular 2 beta.17：プロパティ 'map'はタイプ 'Observable <Response>'に存在しません。

Angular 2.0.0-beta.17を使用しています。

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の変更ログの重大な変更を参照してください。

変更ログから：

演算子：パイプ可能な演算子は、次のようにrxjsからインポートする必要がありますimport { map, filter, switchMap } from 'rxjs/operators';。深いインポートはありません。

私のソリューションがここにリストされていないので、これを再検討します。

Angular 6をrxjs 6.0で実行していますが、このエラーに遭遇しました。

これを修正するために私がしたことは次のとおりです：

私が変更され

map((response: any) => response.json())

単に：

.pipe(map((response: any) => response.json()));

私はここで修正を見つけました：

https://github.com/angular/angular/issues/15548#issuecomment-387009186

プロジェクトのvsコード端末でこのコマンドを記述して、プロジェクトを再起動するだけです。

npm install rxjs-compat

次のmapように記述して、オペレーターをインポートする必要があります。

import 'rxjs/add/operator/map';

Angular 7vの場合

変化する

import 'rxjs/add/operator/map';

に

import { map } from "rxjs/operators"; 

そして

 return this.http.get('http://localhost/ionicapis/public/api/products')
 .pipe(map(res => res.json()));

Observableをからインポートしていたため、Angular 2.0.1でも同じ問題が発生しました。

import { Observable } from 'rxjs/Observable';

代わりにこのパスからObservableをインポートする際の問題を解決します

import { Observable } from 'rxjs';

rxjs 6では、マップオペレーターの使用法が変更されたため、次のように使用する必要があります。

import { map } from 'rxjs/operators';
myObservable
  .pipe(map(data => data * 2))
  .subscribe(...);

参考のために https://www.academind.com/learn/javascript/rxjs-6-what-c​​hanged/#operators-update-path

ターミナルに入力してrxjs-compatをインストールするだけです：

npm install --save rxjs-compat

次にインポート：

import 'rxjs/Rx';

最新のAngular 7。*。*では、次のように簡単に試すことができます。

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

そして、これらmethodsを次のように使用できます。

   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とpromiseだけを含めるだけでは不十分です。

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

いくつかのrxjsコンポーネントを公式ドキュメントとしてインポートすることでこの問題を解決しました推奨するように：

1）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';

import { map } from "rxjs/operators";

getGetFunction(){
this.http.get('http://someapi')
.pipe(map(res => res));
}

getPostFunction(yourPara){
this.http.get('http://someapi',yourPara)
.pipe(map(res => res));
}

上記の関数では、HttpClientを使用しているため、res.json（）を使用していないことがわかります。それは自動的にres.json（）を適用し、Observable（HttpResponse <string>）を返します。HttpClientで角度4の後でこの関数を自分で呼び出す必要はなくなりました。

同じ問題がありました。以前のバージョンのtypescriptがあったVisual Studio 2015を使用していました。

拡張機能をアップグレードした後、問題は解決しました。

リンクをダウンロード

Angular 5.2を使用しimport 'rxjs/Rx';ていますが、使用すると次のlintエラーがスローされます。TSLint：このインポートはブラックリストに登録されています。 代わりにサブモジュールをインポートしてください（インポートブラックリスト）

以下のスクリーンショットをご覧ください。

解決策：必要な演算子のみをインポートすることで解決しました。次に例を示します。

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

したがって、修正は具体的に必要な演算子のみをインポートすることです。

問題を解決するには、rxjs-compatをインストールするだけです

npm i rxjs-compat --save-dev

以下のようにインポートします

import 'rxjs/Rx';

まず、以下のようにインストールを実行します。

npm install --save rxjs-compat@6

今、あなたは、インポートする必要がありますrxjsにservice.ts：

import 'rxjs/Rx'; 

出来上がり！この問題は修正されました。

npm install --save rxjs-compatエラーを修正するだけで実行できます。

こちらがおすすめ

上記に掲載された可能な答えをすべて試しましたが、どれもうまくいきませんでした。

IDE、つまりVisual Studio Codeを再起動するだけで解決しました

それは誰かを助けるかもしれません。

私も同じエラーに直面しました。私にとってうまくいった解決策の1つは、service.tsファイルに次の行を追加することですimport '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));
    }
}

インポート 'rxjs / add / operator / map'またはインポート 'rxjs / Rx'をインポートした後も同じエラーが発生し、Visual Studioコードエディターを再起動すると、エラーは解決します。

この問題が発生しているすべてのLinuxユーザーについて、rxjs-compatフォルダーがロックされているかどうかを確認します。私はこれとまったく同じ問題を抱えていて、ターミナルに行き、sudo suを使用してrxjs-compatフォルダー全体に許可を与え、それが修正されました。インポートしたと仮定して

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

元の.mapエラーが発生したproject.tsファイル内。

map関数を関数で使用pipeすると、問題が解決します。ここでドキュメントを確認できます。

this.items = this.afs.collection('blalal').snapshotChanges().pipe(map(changes => {
  return changes.map(a => {
    const data = a.payload.doc.data() as Items;
    data.id = a.payload.doc.id;
    return data;
  })
})

npm install rxjs @ 6 rxjs-compat @ 6 --save

  import { Injectable } from '@angular/core';
  import { Http } from '@angular/http';
  import 'rxjs/add/operator/map';

  @Injectable({
  providedIn: 'root'
  })
  export class RestfulService {

  constructor(public http: Http) { }

 //access apis Get Request 
 getUsers() {
 return this.http.get('http://jsonplaceholder.typicode.com/users')
  .map(res => res.json());
  }

 }

コマンドを実行する

 npm install rxjs-compat 

インポートするだけ

 import 'rxjs/add/operator/map';

vsコードを再起動して、問題は解決しました。

角度の新しいバージョンは.mapをサポートしていません。これは、cmd npm install --save rxjs-compatを使用してこれをインストールする必要があります。これを介して、古い手法で楽しむことができます。注：これらの行をインポートすることを忘れないでください。

import { Observable, Subject } from 'rxjs';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';