angular 6.0.0およびrxjs 6.1.0のObservable <Object>にマップが存在しません
こんにちは、私はangularのチュートリアルに従うことを試みていますが、チュートリアルは9月に作成されました。その人はangle-cli 1.3.2を使用したと思います。彼が使用していたrxjsのバージョンはわかりません。 rxjs 6.1.0でangular cli 6.0.0およびangular 6を使用しています。
Observableで.mapを呼び出すことが見つからないという問題に直面しています。 ERROR in xxx/xxx/dataService.ts(19,14): error TS2339: Property 'map' does not exist on type 'Observable<Object>'. Observableクラスを調べましたが、mapという関数が表示されていません。
angular 6またはrxjsに、チュートリアルの目的を達成する新しい方法はありますか？
これが私の.tsファイルです。
import { HttpClient } from "@angular/common/http";
import { Injectable } from "@angular/core";
import { map } from 'rxjs/operators';
@Injectable()
export class DataService {
constructor(private http: HttpClient) {
}
public products = [
];
loadProducts() {
return this.http.get("/api/products")
.map((data: any[]) => {
this.products = data;
return true;
});
}
}
これはng --versionからの出力です
λ ng --version
_ _ ____ _ ___
/ \ _ __ __ _ _ _| | __ _ _ __ / ___| | |_ _|
/ △ \ | '_ \ / _` | | | | |/ _` | '__| | | | | | |
/ ___ \| | | | (_| | |_| | | (_| | | | |___| |___ | |
/_/ \_\_| |_|\__, |\__,_|_|\__,_|_| \____|_____|___|
|___/
Angular CLI: 6.0.0
Node: 8.11.1
OS: win32 x64
Angular: 6.0.0
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router
Package Version
-----------------------------------------------------------
@angular-devkit/architect 0.6.0
@angular-devkit/build-angular 0.6.0
@angular-devkit/build-optimizer 0.6.0
@angular-devkit/core 0.6.0
@angular-devkit/schematics 0.6.0 (cli-only)
@ngtools/webpack 6.0.0
@schematics/angular 0.6.0 (cli-only)
@schematics/update 0.6.0 (cli-only)
rxjs 6.1.0
TypeScript 2.7.2
webpack 4.6.0
少し掘り下げましたが、node_modules/rxjs/observableフォルダーにmap。*ファイルがありません
λ ls -R rxjs\observable
'rxjs\observable':
ArrayLikeObservable.d.ts IfObservable.d.ts combineLatest.d.ts if.js.map
ArrayLikeObservable.js IfObservable.js combineLatest.js interval.d.ts
ArrayLikeObservable.js.map IfObservable.js.map combineLatest.js.map interval.js
ArrayObservable.d.ts IntervalObservable.d.ts concat.d.ts interval.js.map
ArrayObservable.js IntervalObservable.js concat.js merge.d.ts
ArrayObservable.js.map IntervalObservable.js.map concat.js.map merge.js
BoundCallbackObservable.d.ts IteratorObservable.d.ts defer.d.ts merge.js.map
BoundCallbackObservable.js IteratorObservable.js defer.js never.d.ts
BoundCallbackObservable.js.map IteratorObservable.js.map defer.js.map never.js
BoundNodeCallbackObservable.d.ts NeverObservable.d.ts dom/ never.js.map
BoundNodeCallbackObservable.js NeverObservable.js empty.d.ts of.d.ts
BoundNodeCallbackObservable.js.map NeverObservable.js.map empty.js of.js
ConnectableObservable.d.ts PairsObservable.d.ts empty.js.map of.js.map
ConnectableObservable.js PairsObservable.js forkJoin.d.ts onErrorResumeNext.d.ts
ConnectableObservable.js.map PairsObservable.js.map forkJoin.js onErrorResumeNext.js
DeferObservable.d.ts PromiseObservable.d.ts forkJoin.js.map onErrorResumeNext.js.map DeferObservable.js PromiseObservable.js from.d.ts pairs.d.ts
DeferObservable.js.map PromiseObservable.js.map from.js pairs.js
EmptyObservable.d.ts RangeObservable.d.ts from.js.map pairs.js.map
EmptyObservable.js RangeObservable.js fromArray.d.ts race.d.ts
EmptyObservable.js.map RangeObservable.js.map fromArray.js race.js
ErrorObservable.d.ts ScalarObservable.d.ts fromArray.js.map race.js.map
ErrorObservable.js ScalarObservable.js fromEvent.d.ts range.d.ts
ErrorObservable.js.map ScalarObservable.js.map fromEvent.js range.js
ForkJoinObservable.d.ts SubscribeOnObservable.d.ts fromEvent.js.map range.js.map
ForkJoinObservable.js SubscribeOnObservable.js fromEventPattern.d.ts throw.d.ts
ForkJoinObservable.js.map SubscribeOnObservable.js.map fromEventPattern.js throw.js
FromEventObservable.d.ts TimerObservable.d.ts fromEventPattern.js.map throw.js.map
FromEventObservable.js TimerObservable.js fromIterable.d.ts timer.d.ts
FromEventObservable.js.map TimerObservable.js.map fromIterable.js timer.js
FromEventPatternObservable.d.ts UsingObservable.d.ts fromIterable.js.map timer.js.map
FromEventPatternObservable.js UsingObservable.js fromPromise.d.ts using.d.ts
FromEventPatternObservable.js.map UsingObservable.js.map fromPromise.js using.js
FromObservable.d.ts bindCallback.d.ts fromPromise.js.map using.js.map
FromObservable.js bindCallback.js generate.d.ts Zip.d.ts
FromObservable.js.map bindCallback.js.map generate.js Zip.js
GenerateObservable.d.ts bindNodeCallback.d.ts generate.js.map Zip.js.map
GenerateObservable.js bindNodeCallback.js if.d.ts
GenerateObservable.js.map bindNodeCallback.js.map if.js
'rxjs\observable/dom':
AjaxObservable.d.ts AjaxObservable.js.map WebSocketSubject.js ajax.d.ts ajax.js.map webSocket.js
AjaxObservable.js WebSocketSubject.d.ts WebSocketSubject.js.map ajax.js webSocket.d.ts webSocket.js.map
rxjs@6では、スタンドアロン関数として使用できます：
import { from } from 'rxjs';
Rxjs6への移行ガイドもご覧ください。
https://github.com/ReactiveX/rxjs/blob/master/docs_app/content/guide/v6/migration.md#import-paths
UPDATE
パイプ構文に切り替える必要があります。rxjs/ operatorsから使用されるすべての演算子をインポートしてください。例えば：
import { map, filter, catchError, mergeMap } from 'rxjs/operators';
pipeはObservableのメソッドで、演算子の作成に使用されます
バージョン6で新しいメソッドpipe()を使用する方法は次のとおりです。
loadProducts() {
return this.http.get("/api/products").
pipe(
map((data: any[]) => {
this.products = data;
return true;
}), catchError( error => {
return throwError( 'Something went wrong!' )
});
)
}
バージョン6では、catchErrorおよびthrowErrorの代わりにcatchおよびthrowを使用する必要があることに注意してください。バージョン6での正しいインポートは次のとおりです。
import { Observable, of, throwError, ...} from "rxjs"
import { map, catchError, ...} from "rxjs/operatros"
パイプ構文に変更する必要があります。
import { Http } from '@angular/http';
import { Injectable } from '@angular/core';
import {map, catchError} from "rxjs/operators";
import { Observable, throwError } from 'rxjs';
list():Observable<any>{
return this.http.get(this.url)
.pipe(
map((e:Response)=> e.json()),
catchError((e:Response)=> throwError(e))
);
}
私は同じ問題に直面していました。地図のインポート方法を変更できます。以下に書いたコードを使用してください
import { map } from "rxjs/operators";
次に、マップでパイプを使用します。理解を深めるために例を参照してください
import {Http,Headers,Response} from '@angular/http';
import { map } from "rxjs/operators";
@Injectable({
providedIn: 'root'
})
export class ContactServiceService {
constructor(private http:Http) { }
getContactList(){
return this.http.get('http://localhost:3000/contact')
.pipe(map(res => res.json()));
}
}
Angular新しいバージョンは、実際には.mapをサポートしていません。新しいangularバージョンではいくつかの変更が行われました。これらはangular Webサイトにアクセスして確認できますが、これらの問題の解決策は次のとおりです。プロジェクトのcmd宛先で次のコマンドを実行します。
npm install --save rxjs-compat
古い手法をお楽しみください。ただし、共有サービスに次の行を追加することを忘れないでください。
import { Observable, Subject } from 'rxjs';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';
Angular 6xとrxjs 6.3.3では、これを行うことができます。ファイル内（app.component.ts）
import { Component } from '@angular/core';
import { HttpClient, HttpParams, HttpHeaders} from '@angular/common/http';
import { Observable, throwError } from 'rxjs';
import { map, catchError, retry } from 'rxjs/operators';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
_url = 'http://...';
constructor( private http: HttpClient ) { }
articles: Observable<any>;
// Method to get info
getAPIRest() {
const params = new HttpParams().set('parameter', 'value');
const headers = new HttpHeaders().set('Autorization', 'auth-token');
this.articles = this.http.get(this._url + '/articles', { params, headers })
.pipe( retry(3),
map((data => data),
catchError(err => throwError(err))));
}
}
なんらかの理由でrxjs-compatが自動的に取得されない場合があります。たとえば、polyfills.tsに自分でインポートできます。
import 'rxjs-compat';