La carte n'existe pas sur Observable <Object> avec angular 6.0.0 et rxjs 6.1.0
Bonjour, j'essaye de suivre un tutoriel sur angular mais le tutoriel a été fait en septembre. Je crois que la personne utilisée angular-cli 1.3.2. Je ne sais pas quelle version de rxjs il utilisait. J'utilise cli 6.0.0 angulaire et 6 angulaire avec 6.1.0 rxjs.
Je rencontre un problème qui empêche d'appeler .map sur observable .ERROR in xxx/xxx/dataService.ts(19,14): error TS2339: Property 'map' does not exist on type 'Observable<Object>'. J'ai examiné la classe Observable et je ne vois pas de fonction appelée map.
Existe-t-il un nouveau moyen dans angular 6 ou rxjs de réaliser ce que le didacticiel tente de faire?
Voici mon fichier .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;
});
}
}
Ceci est la sortie de 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
J'ai creusé un peu et dans mon dossier node_modules/rxjs/observable, il n'y a pas de fichier 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
Dans rxjs@6, vous pouvez utiliser une fonction autonome:
import { from } from 'rxjs';
Voir aussi le guide sur la migration vers rxjs6
https://github.com/ReactiveX/rxjs/blob/master/MIGRATION.md#import-paths
METTRE &AGRAVE; JOUR
Vous devez passer à la syntaxe de canal, assurez-vous d'importer tous les opérateurs utilisés à partir de rxjs/operators. Par exemple:
import { map, filter, catchError, mergeMap } from 'rxjs/operators';
pipe() est une méthode qui prend simplement des arguments et chaque argument est un opérateur que vous voulez/pouvez appliquer à votre observable.
Voici comment vous pouvez utiliser la nouvelle méthode pipe() dans la version 6:
loadProducts() {
return this.http.get("/api/products")
pipe(
map((data: any[]) => {
this.products = data;
return true;
}), catchError( error => {
return throwError( 'Something went wrong!' )
});
)
}
N'oubliez pas qu'avec la version 6, vous devez maintenant utiliser catchError et throwError au lieu de: catch et throw. Voici l'importation correcte avec la version 6:
import { Observable, of, throwError, ...} from "rxjs"
import { map, catchError, ...} from "rxjs/operatros"
Vous devez changer la syntaxe de pipe:
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))
);
}
La nouvelle version angulaire ne supporte pas réellement .map. Quelques modifications ont été apportées à la nouvelle version angulaire. Vous pouvez les vérifier en visitant le site Web angular, mais voici une solution à ces problèmes; exécutez ces commandes dans la destination cmd de votre projet:
npm install --save rxjs-compat
et profiter avec l'ancienne technique, mais n'oubliez pas d'ajouter ces lignes dans le service partagé:
import { Observable, Subject } from 'rxjs';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';
Dans Angular 6x avec Rxjs 6.3.3, vous pouvez le faire. Dans le fichier (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))));
}
}
Pour des raisons obscures, rxjs-compat n'est parfois pas récupéré automatiquement, vous pouvez l'importer vous-même, en polyfills.ts par exemple:
import 'rxjs-compat';