"rxjs" observable.throw is not a function - Angular4

nick gowdy :

I've been learning Angular 4 and everything was going smoothly until I tried to implement catch handling in a service. I'm trying to use "rxjs" catch and throw but I've got an undefined function error in my 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));
        });
    }
}

This is the error message:

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

I also have this warning in my browser:

./~/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
Alexander Staroselsky :

The error There are multiple modules with names that only differ in casing. is indicating the wrong import is being targeted with how you are trying to use Observable.

The import should be with a capital "O" like:

import { Observable } from 'rxjs/Observable';

This will import the individual Observable operator, which be used in combination with operators such as catch or throw on created Observables.

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

To import the full Observable object you'd import it like this:

import { Observable } from 'rxjs/Rx'

Update:

With newer versions of RxJS (5.5+) operators such as map() and filter() can used as pipeable operators in combination with pipe() rather than chaining. They are imported such as:

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

Keep in mind terms such as throw are reserved/key words in JavaScript so the RxJS throw operator is imported as:

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

Update:

For newer versions of RxJS (6+), use this:

import { throwError } from 'rxjs';

and throw an error like this:

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

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

throw error inside rxjs Observable

Angular2 RxJS getting 'Observable_1.Observable.fromEvent is not a function' error

Observable.throw replacement in rxjs 5.5.2

RxJs Observable: Execute function if empty/filtered

how do you throw an error from RXJS Observable retryWhen

RxJS Observable with asynchronous subscriber function

RxJS Observable merge angular

Error rxjs_Observable__.Observable.forkJoin is not a function?

RxJS "throw new Error" vs "Observable.throw"

Wrap an API function in an RxJs Observable

How to push to Observable of Array in Angular 4? RxJS

rxjs: Observable.of(...).delay is not a function

TypeError: rxjs__WEBPACK_IMPORTED_MODULE_2__.Observable.throw is not a function

Module not found: Error: Can't resolve 'rxjs/add/observable/throw'

Angular rxjs Observable.timer is not a function with import

rxjs__WEBPACK_IMPORTED_MODULE_3__.Observable.throw is not a function at

Angular/RxJS: synchronous observable

How to nicely throw an error to an Angular RXJS Observable subscriber

Angular 6 - Observable never with throw

Angular / RxJS Multicasting Observable of Observable

Executing rxjs observable function recursively

rxjs__WEBPACK_IMPORTED_MODULE_1__.Observable.throw is not a function

Angular with RxJS - Array's Reduce Function Not Working When Subscribed To An Observable

Angular - rxjs_Observable__WEBPACK_IMPORTED_MODULE_2__.Observable.of is not a function

Angular Universal RxJs "Observable_1.Observable.throw is not a function"

RXJS/Angular Replace Observable

Angular & Rxjs: How to map json to object array in a function returning Observable

Convert async function to RxJs Observable

Observable.fromEvent is not a function - RxJS