found - observable_1 observable throw is not a function angular 5

rxjs observable.throw no es una función-Angular4

Question

He estado aprendiendo Angular 4 y todo iba bien hasta que intenté implementar el manejo de captura en un servicio. Estoy tratando de usar rxjs catch and throw pero tengo un error de función no definido en mi consola.

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

Este es el mensaje de error:

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

También tengo esta advertencia en mi navegador:

./~/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

Answer 1

El error There are multiple modules with names that only differ in casing. indica que se está apuntando la importación incorrecta con la forma en que intenta utilizar Observable .

La importación debe ser con una "O" mayúscula como:

import { Observable } from ''rxjs/Observable'';

Esto importará el operador Observable individual, que se usará en combinación con operadores como catch o throw en observables creados.

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

Para importar el objeto observable completo, lo importaría así:

import { Observable } from ''rxjs/Rx''

Esperemos que eso ayude!

Actualizar:

Con las versiones más nuevas de RxJS (5.5+), los operadores como map() y filter() pueden usar como operadores pipeable en combinación con pipe() lugar de encadenar. Se importan tales como:

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

Tenga en cuenta que los términos tales como throw están reservados / palabras clave en JavaScript, por lo que el operador de throw RxJS se importa como:

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

Answer 2

En RxJS 6, Observable.throw() ha sido reemplazado por throwError() que opera de manera muy similar a su predecesor. Por lo tanto, puede reemplazar desde O bservable.throw(error) a solo throwError(error) importando:

import { throwError } from ''rxjs'';

Consulte este enlace para obtener más referencias: https://www.metaltoad.com/blog/angular-6-upgrading-api-calls-rxjs-6

Answer 3

Estaba enfrentando el mismo problema en mi aplicación angular 5 . Lo que hice es agregar un nuevo paquete.

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

Y desde mi llamada de servicio http devuelvo una función.

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

Y en la función onError , estoy devolviendo el error con throwError(error) .

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