La carte n'existe pas sur les Observables<Object> angulaire 6.0.0 et rxjs 6.1.0

Salut, je suis en train de suivre un tutoriel sur la anguleux, mais le tutoriel a été réalisé en septembre. Je crois que la personne a utilisé angulaires-cli 1.3.2. Je ne suis pas sûr de la version de rxjs qu'il utilisait. Je suis angulaire à l'aide de la cli 6.0.0 et angulaire 6 avec rxjs 6.1.0.

Je suis en cours d'exécution dans un problème où l'appelant .carte sur observable n'est pas trouvé.
ERROR in xxx/xxx/dataService.ts(19,14): error TS2339: Property 'map' does not exist on type 'Observable<Object>'.
J'ai regardé dans les propriétés Observables de la classe et je ne vois pas une fonction appelée carte.

Est-il une nouvelle façon angulaire 6 ou rxjs à réaliser ce que le tutoriel est en train de faire?

Voici mon .ts fichier:

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;
            });
    }
}

C'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 fait un peu de creuser et dans mon node_modules/rxjs/observables dossier il n'y a pas de carte.* fichier

λ 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
  • Avez-vous lu github.com/ReactiveX/rxjs/blob/master/MIGRATION.md?
  • C'est ma première fois d'essayer d'apprendre angulaire et à l'aide de rxjs et votre lien m'a beaucoup aidé. Merci!
  • Le lien dans le commentaire ci-dessus doit être lu et mis en signet par quelqu'un de la migration vers rxjs 6. L'information y est très précieux!!
  • Le Document n'est plus disponible 🙁
InformationsquelleAutor Jonathan | 2018-05-05
  1. 21

    Dans rxjs@6 vous pouvez utiliser de manière autonome de la fonction:

    import { from } from 'rxjs';

    Voir aussi migration vers rxjs6 guide

    https://github.com/ReactiveX/rxjs/blob/master/docs_app/content/guide/v6/migration.md#import-paths

    Mise à JOUR

    Vous avez besoin pour passer à la pipe de la syntaxe, assurez-vous d'importer tous les opérateurs de rxjs/opérateurs. Par exemple:

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

    La DOCUMENTATION

    • Hey merci pour l'aide! ce lien m'a beaucoup aidé. Il était en fait un article qui m'a aidé: github.com/ReactiveX/rxjs/blob/master/... j'avais besoin d'utiliser le tuyau de la syntaxe.
    • ok cool, marque, si cet halped
    • Je vous suggère de poster votre propre solution, cela peut aider les futurs lecteurs. Auto-réponses sont les bienvenus sur DONC.
    • au Sajeetharan, Désolé, votre message n'a pas directement m'aider. Si vous éditez votre message pour y inclure la partie de tuyauterie et de montrer la syntaxe correcte, je vais le marquer comme réponse. @estus je vais laisser Sajeetharan éditer son premier post alors je vais marquer son correct. Sinon, je vais faire mon propre post si il ne fait pas ça dans quelques temps.
    InformationsquelleAutor Sajeetharan
  2. 16

    pipe est une méthode d'Observables qui est utilisé pour la composition des opérateurs

    Ici est la façon dont 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!' )
});
)
}

    Garder à l'esprit qu'avec la Version 6, vous devez maintenant utiliser catchError et throwError au lieu de:catch et throw. Ici est la bonne importer avec la Version 6:

    import { Observable, of, throwError, ...} from "rxjs"

    import { map, catchError, ...} from "rxjs/operatros"

    InformationsquelleAutor k.vincent
  3. 5

    Vous devez changer à pipe syntaxe:

    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))
);
}
    InformationsquelleAutor oware
  4. 1

    j'ai été confrontée au même problème.
    permet de changer la façon d'importer de la carte. utiliser le code que j'ai écrit ci-dessous

    import { map } from "rxjs/operators";

    puis utilisez le tuyau avec la carte. voir l'exemple pour mieux comprendre

    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()));
}
}
    InformationsquelleAutor satywan kumar
  5. 0

    Angulaire de la nouvelle version ne prend pas en charge .carte. Quelques modifications ont été faites dans le nouveau angulaire version. Vous pouvez le vérifier sur ces par la visite de l'angle de site web, mais ici, c'est une solution de ces problèmes; exécuter ces commandes dans
    cmd destination de votre projet: 

     npm install --save rxjs-compat

    et déguster avec la technique ancienne, mais n'oubliez pas d'ajouter ces lignes dans un service partagé: 

    import { Observable, Subject } from 'rxjs';
import 'rxjs/add/operator/map'; 
import 'rxjs/add/operator/catch';
    InformationsquelleAutor kashif
  6. 0

    Pour une raison obscure rxjs-compat parfois ne sont pas ramassés automatiquement, vous pouvez l'importer vous-même, dans polyfills.ts par exemple:

    import 'rxjs-compat';

    InformationsquelleAutor Renaud
  7. 0

    Angulaire 6x avec rxjs 6.3.3 vous pouvez le faire. Dans le fichier(app.composante.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))));
}

    }

    InformationsquelleAutor EdgarMorales