Dealing with Errors in Angular 5 using Observables: Why Observable.throw isn't working

Question

Dealing with Errors in Angular 5 using Observables: Why Observable.throw isn't working

Can someone assist with resolving this issue?

Error message: core.js:1542 ERROR TypeError: rxjs__WEBPACK_IMPORTED_MODULE_3__.Observable.throw is not a function

Software versions: Angular CLI: 6.0.8 / rxjs 6.2.1

import { Injectable } from '@angular/core';
import { User } from './../classes/user';
import { AppSettings } from './appSettings';
import { HttpClient,HttpHeaders, HttpParams } from '@angular/common/http';
import { Observable, throwError } from 'rxjs';
import { catchError, retry } from 'rxjs/operators';

@Injectable({
      providedIn: 'root'
})

export class LoginService {

      constructor(private http: HttpClient){ }

      login(user:User): Observable<User> {                               
            return this.http.post<User>(AppSettings.BASE_URL + "/login",user)
            .pipe(catchError(this.handleServerError));   
      }

      handleServerError(error: any  | any) {
            console.log(error.error || error.json() || error);
            return Observable.throw(error.error || error.json() || error || 'Server error');  <<< ERROR
      }

}

angular typescript rxjs

Answer 1

Answer №1

This is my solution:

app.module.ts

 import {HttpClientModule} from '@angular/common/http';
 .
 .
 . 
 imports: [
    BrowserModule,
    HttpClientModule
  ]

service/login.ts

import { Injectable } from '@angular/core';
import { User } from './../classes/user';
import { AppSettings } from './appSettings';
import { HttpClient,HttpHeaders, HttpParams } from '@angular/common/http';
import {  throwError } from 'rxjs';
import { Observable, Subject, ReplaySubject, from, of, range } from 'rxjs';
import { map, filter, switchMap } from 'rxjs/operators';
import { catchError, retry } from 'rxjs/operators';

const httpOptions = {
      headers: new HttpHeaders({
        'Content-Type':  'application/json',
        'Authorization': 'my-auth-token'
      })}


@Injectable({
      providedIn: 'root'
})

export class LoginService {

      constructor(private http: HttpClient){

      }

      login(user:User): Observable<User> {                               
            return this.http.post<User>(AppSettings.BASE_URL + "/login",user)
            .pipe(catchError(this.handleServerError));   
      }

      handleServerError(error: any | any ) {
            console.log(error.error || error.json() || error);
            return throwError(error.error || error.json() || error || 'Server error');
      }

}

login.component.ts

 import { LoginService } from '../../services/login';

this.loginService.login(new User("admin","admin")).subscribe(                  
                  user => {
                        //to do ; 
                  },
                  error => {                                                  
                         throw error;
                  }                  
  );

Answer 2

This is my solution:

app.module.ts

 import {HttpClientModule} from '@angular/common/http';
 .
 .
 . 
 imports: [
    BrowserModule,
    HttpClientModule
  ]

service/login.ts

import { Injectable } from '@angular/core';
import { User } from './../classes/user';
import { AppSettings } from './appSettings';
import { HttpClient,HttpHeaders, HttpParams } from '@angular/common/http';
import {  throwError } from 'rxjs';
import { Observable, Subject, ReplaySubject, from, of, range } from 'rxjs';
import { map, filter, switchMap } from 'rxjs/operators';
import { catchError, retry } from 'rxjs/operators';

const httpOptions = {
      headers: new HttpHeaders({
        'Content-Type':  'application/json',
        'Authorization': 'my-auth-token'
      })}


@Injectable({
      providedIn: 'root'
})

export class LoginService {

      constructor(private http: HttpClient){

      }

      login(user:User): Observable<User> {                               
            return this.http.post<User>(AppSettings.BASE_URL + "/login",user)
            .pipe(catchError(this.handleServerError));   
      }

      handleServerError(error: any | any ) {
            console.log(error.error || error.json() || error);
            return throwError(error.error || error.json() || error || 'Server error');
      }

}

login.component.ts

 import { LoginService } from '../../services/login';

this.loginService.login(new User("admin","admin")).subscribe(                  
                  user => {
                        //to do ; 
                  },
                  error => {                                                  
                         throw error;
                  }                  
  );

Dealing with Errors in Angular 5 using Observables: Why Observable.throw isn't working

Answer №1

Similar questions

Tips for correctly passing the type of combineReducers: I encountered an error saying "Property '...' does not exist on type 'Reducer<CombinedState{}>"

Preventing Firebase duplicates leads to the error of not being able to read the property 'apps'

ESLint encountered an issue: Reserved keyword 'interface' triggered a parsing error

AOT compile error due to Angular interpolation syntax

The Angular Button fails to display when all input conditions are met

The refresh function in the table is not working as expected when implemented in a functional component. The table being used is Material

What sets apart gzip from x-gzip content? And how can I decompress x-gzip specifically? zlib appears to be struggling

Hamburger Menu in Bootstrap not functioning as expected

How Angular services transmit information to components

Angular 2, Release Candidate 5 - Dropdown form includes mysterious "phantom" choice

A guide to effectively unit testing StripeJs within the Karma testing framework for Angular 8

Next.js experiencing hydration error due to dynamic component

Steps to eliminate the Bearer authorization header in an Angular 4 POST request to an API

Styling the checked state of a switch in NativeScript/Angular with ngModel/FormBuilder

Exploring the implementation of query parameters in Nest.js

What is preventing the exclusion of the null type in this specific situation within Typescript?

Bespoke directive - Angular 2/4/5

Removing a directory from GitHub with the help of octokit/rest

Choose the AuthGuard category in real-time

Accessing results from geocoder.geocode is restricted to local variables only