Angular 2 beta.17:プロパティ 'map'はタイプ 'Observable <Response>'に存在しません


195

Angular 2 beta16からbeta17アップグレードしたところ、rxjs 5.0.0-beta.6が必要になりました。(変更ログはこちら:https : //github.com/angular/angular/blob/master/CHANGELOG.md#200-beta17-2016-04-28)beta16では、Observable / map機能に関してすべてがうまく機能していました。アップグレード後に次のエラーが表示され、typescriptがトランスパイルしようとすると発生します。

  1. プロパティ 'map'はタイプ 'Observable'に存在しません(私がObservableでマップを使用した場所)
  2. c:/path/node_modules/rxjs/add/operator/map.d.ts(2,16):エラーTS2435:アンビエントモジュールを他のモジュールまたは名前空間にネストすることはできません。
  3. c:/path/node_modules/rxjs/add/operator/map.d.ts(2,16):エラーTS2436:アンビエントモジュールの宣言で相対モジュール名を指定できません。

私はこの質問/回答を見ましたが、それは問題を解決しません: Angular2 beta.12とRxJs 5 beta.3で観察可能なエラー

私のappBoot.tsは次のようになります(すでにrxjs / mapを参照しています):

///<reference path="./../node_modules/angular2/typings/browser.d.ts"/>
import {bootstrap} from "angular2/platform/browser";
import {ROUTER_PROVIDERS} from 'angular2/router';
import {HTTP_PROVIDERS} from 'angular2/http';
[stuff]
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/toPromise';
import {enableProdMode} from 'angular2/core';
import { Title } from 'angular2/platform/browser';


//enableProdMode();
bootstrap(AppDesktopComponent, [
    ROUTER_PROVIDERS,
    HTTP_PROVIDERS,
    Title
]);

誰かが何が問題になるのか考えていますか?


回答:


284

map演算子をインポートする必要があります:

import 'rxjs/add/operator/map'

3
AngularチームとRxJSチームは、このようにRX全体をインポートするこのアプローチを推奨していません。あなたはそれをすべきではありません。大きすぎます。上記の最初の回答は問題ありませんが、2番目の回答はそれほど多くありません。@ 0x1ad2 2番目のオプションとしてその大量のインポートを含めないように答えを更新できますか?
凍りつく

2
これは直感的ではありません。これは、Angular 2+開発でObservableを実装するための依存関係としてどこに文書化されていますか?
Joe

これはイオン3.20.0に適用できますか?ionicがマップを自動的にインポートしなかったため、同じ問題が発生しました。明示的にインポートすることはできますが、これが正しいかどうかはわかりません。
LordDraagon 2018年

1
これは私にとって多くの問題を解決しませんrxjs / add / operator / mapの代わりにPipe toを使用する必要がありました私はパイプと.pipe(map(res => res.json()))でrxjs / operatorsインポートを使用しました);
codefreaK

現在Angular 7を使用していて、RXJSがいくつかの変更を経ていた時期に、Googleで検索を行った後、私はここに行きました。新しい方法はですがimport { map } from 'rxjs/operators'別の回答に詳細があります。
コルビーハンター

78

gulp-typescriptプラグインを最新バージョン(2.13.0)にアップグレードしたところ、問題なくコンパイルされました。

更新1:以前gulp-typescriptバージョン2.12.0を使用していました

更新2:Angular 2.0.0-rc.1にアップグレードする場合は、appBoot.tsファイルで以下を実行する必要があります。

///<reference path="./../typings/browser/ambient/es6-shim/index.d.ts"/>
import { bootstrap } from "@angular/platform-browser-dynamic";
import { ROUTER_PROVIDERS } from '@angular/router-deprecated';
import { HTTP_PROVIDERS } from '@angular/http';
import { AppComponent } from "./path/AppComponent";
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/toPromise';
// import 'rxjs/Rx'; this will load all features
import { enableProdMode } from '@angular/core';
import { Title } from '@angular/platform-browser';



//enableProdMode();
bootstrap(AppComponent, [
    ROUTER_PROVIDERS,
    HTTP_PROVIDERS,
    Title
]);

重要なのは、es6-shim / index.d.tsへの参照です。

これは、次に示すようにes6-shimタイピングがインストールされていることを前提としています。 ここに画像の説明を入力してください

ここでAngularから入力するタイピングの詳細:https ://angular.io/docs/ts/latest/guide/typescript-configuration.html#!#typings


問題があった古いバージョン番号を教えてください。ありがとう。
Meligy 2016年

1
@Meligy以前はgulp-typescriptバージョン2.12.0を使用していました
brando

1
驚くばかり。エラーメッセージに関する記事を更新しmap同様の問題を抱えるユーザー向けのメモを追加しました。
どうも

1
@Meligy Angular2 RCにアップグレードしたときも同じ問題が発生しました。上記の回答を更新して、解決方法を示しました。
ブランド2016

6
import 'rxjs/Rx'; //すべての機能をロード
VahidN

67

Rxjs 5.5“プロパティ 'map'はタイプObservableに存在しません。

この問題は、すべての演算子の周りにパイプを追加する必要があるという事実に関連していました。

これを変える、

this.myObservable().map(data => {})

これに

this.myObservable().pipe(map(data => {}))

そして

このように地図をインポートし、

import { map } from 'rxjs/operators';

それはあなたの問題を解決します。


3
これはRxjs 6にも当てはまります。私が見るすべてのチュートリアルには、パイプなしのマップ関数があります。これは私がパイプを追加して 'rxjs / operators'からマップをインポートするまで機能しませんでした。
Keyvan Sadralodabai 2018

はい、Rxjs 6にも適用されます。
Hiran DA Walawage

41

私の場合、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';

繰り返しになりますが、質問に対する最良の回答には投票数が最も多くありません。これがこの質問の最良の答えです。共有していただきありがとうございます。他の人がこれに投票することを望みます。
冷ややかな

26

VS2015でこのエラーが発生した場合は、githubの問題と回避策があります。

https://github.com/Microsoft/TypeScript/issues/8518#issuecomment-229506507

これはproperty map does not exist on observable問題の解決に役立ちました。さらに、1.8.2以上のtypescriptバージョンがあることを確認してください


8
交換C:\Program Files (x86)\Microsoft Visual Studio 14.0\Common7\IDE\CommonExtensions\Microsoft\TypeScript\typescriptServices.js typescriptServiceは VS 15(のために働いていたファイルを置き換えた後、対再起動
tchelidze

上記のファイルを置き換えるとうまく
クリシュナン

それでもマイクロソフトからの更新はありません...なぜ彼らはそれを修正しないのですか?
ピオトレック

26

角度6を使用する人に対する最終的な回答:

* .service.tsファイルに以下のコマンドを追加してください"

import { map } from "rxjs/operators";

**********************************************Example**Below**************************************
getPosts(){
this.http.get('http://jsonplaceholder.typicode.com/posts')
.pipe(map(res => res.json()));
}
}

私はWindows 10を使用しています。

typescript V 2.3.4.0のangular6


app.module.tsにインポートすることはできなくなったようです。次に、それを各サービスとコンポーネントにインポートする必要があります
Adam Mendoza


13

Angular 2x

example.component.ts

import { Observable } from 'rxjs';

example.component.html

  Observable.interval(2000).map(valor => 'Async value');

Angular 5xまたはAngular 6xの場合:

example.component.ts

import { Observable, interval, pipe } from 'rxjs';
import {switchMap, map} from 'rxjs/operators';

example.component.html

valorAsync = interval(2500).pipe(map(valor => 'Async value'));

1
直接マップする代わりにパイプを使用する必要があるのはなぜですか?
クリッシュ2018

10

Angular 2.0 FinalとVS 2015の2016年9月29日更新

TypeScriptバージョン2.0.3インストールするだけで解決するための回避策は不要になりました。

このgithubの問題のコメントの編集から取った修正。


3
私はこの問題を抱えており、2.0.3もインストールしています:/
軽度のファズ

1
TS 2.1.6を使用していますが、まだ問題が発生しています
alltej 2017年

このコメントの時点で、TSの最新は2.5.2です。このバージョンは私にとっては壊れています。2.3.xを使用すると動作します。
PigBoT 2017年

10

私が理解しているように、それはrxjs最後の更新のためです。彼らはいくつかの演算子と構文を変更しました。その後rx、このような演算子をインポートする必要があります

import { map } from "rxjs/operators";

これの代わりに

import 'rxjs/add/operator/map';

そして、このようなすべての演算子の周りにパイプを追加する必要があります

this.myObservable().pipe(map(data => {}))

ソースはこちら


9

Justin Scofieldが彼の回答で示唆しているように、Angular 5の最新リリースとAngular 6については、2018年6月1日のimport 'rxjs/add/operator/map';ように、TSエラーを削除するには不十分です。 [ts] Property 'map' does not exist on type 'Observable<Object>'.

以下のコマンドを実行して必要な依存関係をインストールする必要があります。 npm install rxjs@6 rxjs-compat@6 --saveその後、map依存関係のインポートエラーが解決されます。



8

私は同様のエラーに直面していました。私がこれら3つのことをしたときにそれは解決されました:

  1. 最新のrxjsに更新します。

    npm install rxjs@6 rxjs-compat@6 --save
  2. マップをインポートして約束する:

    import 'rxjs/add/operator/map';
    import 'rxjs/add/operator/toPromise';
  3. 新しいインポートステートメントを追加しました:

    import { Observable, Subject, asapScheduler, pipe, of, from, interval, merge, fromEvent } from 'rxjs';

7

最新のRxJSにはtypescript 1.8が必要なので、typescript 1.7が上記のエラーを報告します。

この問題は、最新のtypescriptバージョンにアップグレードすることで解決しました。


あなたが使用している場合はtsc、コマンドから確認してくださいtsc -v;-)「スクリプト」を使用すると、さらに良いアイデアです、参照stackoverflow.com/a/37034227/478584を
tomaszbak

6

バージョン5から6に移行すると、同様のエラーメッセージがポップアップ表示されます。これが、rxjs-6への変更に対する回答です。

個々の演算子をインポートしてからpipe、チェーンの代わりに使用します。

import { map, delay, catchError } from 'rxjs/operators'; 

source.pipe(
  map(x => x + x),
  delay(4000),
  catchError(err => of('error found')),
).subscribe(printResult);

6

angular4を使用している場合は、以下のインポートを使用してください。それはうまくいくはずです。

import 'rxjs / add / operator / map';

angular5 / 6を使用している場合は、パイプ付きのマップを使用し、1つ下にインポートします

「rxjs / operators」から{map}をインポートします。


1

プロパティ「map」はタイプ「observable response」angular 6には存在しません

解決策: Angular CLIとコアバージョンを更新する

ng update @angular/cli           //Update Angular CLi 
ng update @angular/core          //Update Angular Core 
npm install --save rxjs-compat   //For Map Call For Post Method 
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.