rxjs observables.lancer n'est pas une fonction-Angular4

J'ai appris L'Angular 4 et tout allait bien jusqu'à ce que j'ai essayé de mettre en place la gestion 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));
        });
    }
}

voici 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
21
demandé sur Corey 2017-08-02 18:20:50

2 réponses

L'erreur There are multiple modules with names that only differ in casing. indique le mauvais importation est ciblées avec la façon dont vous essayez d'utiliser Observable.

L'importation doit être avec un grand "O" de la forme:

import { Observable } from 'rxjs/Observable';

import Observable opérateur, 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 l'importez comme ceci:

import { Observable } from 'rxjs/Rx'

espérons que cela aide!

mise à Jour:

avec des versions plus récentes des opérateurs RxJS (5.5+) tels que map() et filter() peut être utilisé comme opérateurs pipables en combinaison avec pipe() plutôt que d'enchaîner. Ils sont importés tels que:

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

gardez à l'esprit des termes tels que throw sont réservés/mots clés en JavaScript donc les RxJS throw l'exploitant est importé comme:

import { _throw } from 'rxjs/observable/throw';
70
répondu Alexander Staroselsky 2018-03-14 15:53:26

j'ai été confronté au même problème dans mon angular 5 application. Ce que j'ai fait, c'est ajouter un nouveau paquet.

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

Et de mon http appel de service je renvoie une fonction. 

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

Et onError fonction je suis de retour de 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);
  }
4
répondu Sibeesh Venu 2018-07-11 10:01:38