web-dev-qa-db-fra.com

"rxjs" observable.throw n'est pas une fonction - Angular4

J'ai appris Angular 4 et tout se passait bien jusqu'à ce que j'essaie de mettre en œuvre le traitement des captures dans un service. J'essaie d'utiliser "rxjs" catch and throw mais j'ai une erreur de fonction non définie dans ma console.

import { Injectable } from '@angular/core';
import { Http } from "@angular/http";
import { Observable } from 'rxjs/observable';
import 'rxjs/add/operator/catch';
import 'rxjs/add/observable/throw';
import { AppError } from "../app/common/app.error";
import { NotFoundError } from "../app/common/not-found-error";
import { BadInput } from "../app/common/bad-input";

@Injectable()
export class PostService {
  private url = "https://jsonplaceholder.typicode.com/posts";

  constructor(private http: Http) { }

 deletepost(post){
      // return this.http.delete(this.url + '/' + post.id)
      // Hard-coded id to test 404
      return this.http.delete(this.url + '/' + 93498)
        .catch((error: Response) => {
          console.log('error within catch is ' + Response)
          if(error.status === 404)
            return Observable.throw(new NotFoundError(error));

          return Observable.throw(new AppError(error));
        });
    }
}

C'est le message d'erreur:

TypeError: __WEBPACK_IMPORTED_MODULE_2_rxjs_observable__["Observable"].throw is not a function. 
(In '__WEBPACK_IMPORTED_MODULE_2_rxjs_observable__["Observable"].throw(new 
__WEBPACK_IMPORTED_MODULE_6__app_common_not_found_error__["a" /* NotFoundError 
*/](error))', 
'__WEBPACK_IMPORTED_MODULE_2_rxjs_observable__["Observable"].throw' is 
undefined) — post.service.ts:42

J'ai aussi cet avertissement dans mon navigateur:

./~/rxjs/Observable.js
There are multiple modules with names that only differ in casing.
This can lead to unexpected behavior when compiling on a filesystem with other case-semantic.
Use equal casing. Compare these module identifiers:
* /Users/nickgowdy/Desktop/Angular2/angular4 source code/hello-world/node_modules/rxjs/Observable.js
    Used by 14 module(s), i. e.
    /Users/nickgowdy/Desktop/Angular2/angular4 source code/hello-world/node_modules/@angular/core/@angular/core.es5.js
* /Users/nickgowdy/Desktop/Angular2/angular4 source code/hello-world/node_modules/rxjs/observable.js
    Used by 1 module(s), i. e.
    /Users/nickgowdy/Desktop/Angular2/angular4 source code/hello-world/node_modules/@ngtools/webpack/src/index.js!/Users/nickgowdy/Desktop/Angular2/angular4 source code/hello-world/src/services/post.service.ts
angularrxjsobservablethrow
33
nick gowdy

L'erreur There are multiple modules with names that only differ in casing. indique qu'une mauvaise importation est ciblée par la façon dont vous essayez d'utiliser Observable.

L'import doit être avec un "O" majuscule comme:

import { Observable } from 'rxjs/Observable';

Ceci importera l'opérateur individuel Observable, qui sera utilisé en combinaison avec des opérateurs tels que catch ou throw sur les observables créés.

import 'rxjs/add/operator/catch';
import 'rxjs/add/observable/throw';

Pour importer l'objet Observable complet, vous devez l'importer comme ceci:

import { Observable } from 'rxjs/Rx'

J'espère que ça aide!

Mise à jour:

Avec les nouvelles versions de RxJS (5.5+), les opérateurs tels que map() et filter() peuvent être utilisés comme opérateurs pouvant être raccordés en combinaison avec pipe() plutôt que l'enchaînement. Ils sont importés tels que:

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

Gardez à l'esprit les termes tels que throw sont réservés/mots clés en JavaScript afin que l'opérateur RxJS throw soit importé en tant que:

import { _throw } from 'rxjs/observable/throw';

Mise à jour:

Pour les versions plus récentes de RxJS (6+), utilisez ceci:

import { throwError } from 'rxjs';

et jette une erreur comme ceci:

if (error.status === 404)
    return throwError( new NotFoundError(error) )
95
Alexander Staroselsky

Dans RxJS 6, Observable.throw() est remplacé par throwError(), qui fonctionne de manière très similaire à son prédécesseur. Ainsi, vous pouvez remplacer de Observable.throw(error) à seulement throwError(error) en important:

import { throwError } from 'rxjs';

Consultez ce lien pour une référence ultérieure: https://www.metaltoad.com/blog/angular-6-upgrading-api-calls-rxjs-6

20
prijesh bhingradiya

Je rencontrais le même problème dans mon application angular 5. Ce que j'ai fait est d'ajouter un nouveau paquet.

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

Et de mon appel de service http, je retourne une fonction.

return this.http.request(request)
      .pipe(map((res: Response) => res.json()),
        catchError((res: Response) => this.onError(res)));

Et dans la fonction onError, je renvoie l'erreur avec throwError(error).

onError(res: Response) {
    const statusCode = res.status;
    const body = res.json();
    const error = {
      statusCode: statusCode,
      error: body.error
    };
    return throwError(error);
  }
12
Sibeesh Venu