web-dev-qa-db-ja.com

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

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'には存在しません（私がマップをオブザーバブルで使ったところはどこにでも）
  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：環境モジュール宣言は相対モジュール名を指定できません。

私はこの質問/答えを見たことがありますが、それは問題を解決しません： Angular 2 beta 12とRxJ 5 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
]);

誰が騒ぎになっているのか、何か考えがありますか？

typescriptangularrxjs
186
brando

私の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のタイピングをインストールしたと仮定します： enter image description here

タイピングの詳細については、Angularこちらからインストールしてください： https://angular.io/docs/ts/latest/guide/TypeScript-configuration.html#!#typings

78
brando

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

import 'rxjs/add/operator/map'
284
0x1ad2

Rxjs 5.5“ Property” map”はタイプObservableには存在しません。

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

これを変えて

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

これに

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

そして

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

import { map } from 'rxjs/operators';

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

64
Hiran D.A Walawage

私の場合は、mapとpromiseだけを含めるだけでは不十分です。

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

私はこの問題を解決するために、いくつかのrxjsコンポーネントを 公式ドキュメント recommendとしてインポートしました。

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';
41
Alex Valchuk

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

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

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

26
Abu Abdullah

角度6を使用する人のための最終的な答え：

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

import { map } from "rxjs/operators";

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

私は窓10を使っています。

typeScript V 2.3.4.0を使用したangular6

25
Smit Patel
import 'rxjs/add/operator/map';

＆

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

私のために働いた

14
Justin Scofield

Angular 2倍

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'));
12
Eduardo Cordeiro

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

対処方法はもう必要ありません。修正するには TypeScriptバージョン2.0.3をインストールしてください を実行するだけです。

このgithub issue comment の編集からの修正。

10
Jason

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

import { map } from "rxjs/operators";

これの代わりに

import 'rxjs/add/operator/map';

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

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

出典は ここ

9
Gh111

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

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

8
Nitin Bhargava

最新のRxJSはTypeScript 1.8を必要とするので、TypeScript 1.7は上記のエラーを報告します。

私は最新のTypeScriptバージョンにアップグレードすることによってこの問題を解決しました。

7
roman

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

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

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

  2. 地図をインポートして約束：

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

  3. 新しいimport文を追加しました：

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

バージョン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
farrellw

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

'rxjs/add/operator/map'をインポートします。

あなたがangular5/6を使用しているなら、それからパイプで地図を使用して、1つの下で輸入してください

"rxjs/operator"から{map}をインポートする;

4
Manas

プロパティ 'map'はタイプ '観測可能な応答' angle 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
0
Jaydeepsinh Makwana