Angular6 :Property catch does not exist

Question

I am new to Angular and I have basic knowledge of it. I want to learn HttpClient so I can create a json file instead of real server. I created a service and imported HttpClient:

service.ts

import { Injectable } from '@angular/core';
import {HttpClient, HttpErrorResponse} from '@angular/common/http';
import {IEmployee} from "../../../service/src/app/employee";
import {Observable} from "rxjs/index";
import 'rxjs/add/operator/catch';
import 'rxjs/add/observable/throw';

In my class EmployeeService I have created a method for getting data from json file:

@Injectable({
  providedIn: 'root'
})
export class EmployeeService {

  private _url: string = "/assets/data/employees.json";

  constructor(private http:HttpClient) { }

  getEmployee():Observable<IEmployee[]> {
    return this.http.get<IEmployee[]>(this._url)
      .catch(this.errorHandler);
  }

  errorHandler(error: HttpErrorResponse) {
    return Observable.throw(error.message || "Server Error")
  }
}

But in getEmployee method I got these errors:

ERROR in ./src/app/employee.service.ts
Module not found: Error: Can't resolve 'rxjs/add/observable/throw' in 'E:\Tutorial\NodeJS\WebstormProjects\Angular\http\src\app'
ERROR in ./src/app/employee.service.ts
Module not found: Error: Can't resolve 'rxjs/add/operator/catch' in 'E:\Tutorial\NodeJS\WebstormProjects\Angular\http\src\app'
i ｢wdm｣: Failed to compile.

As you can see I have imported throw and catch operator but I do not know why I keep getting errors.

The other problem is, below throw method appear a line because of deprecated(Deprecated symbol used, consult docs for better alternative)!! What is the alternative?

Angular CLI: 6.0.1
Node: 10.0.0
OS: win32 x64
Angular:
...

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.6.1
@angular-devkit/core         0.6.1
@angular-devkit/schematics   0.6.1
@schematics/angular          0.6.1
@schematics/update           0.6.1
rxjs                         6.1.0
typescript                   2.7.2

****************** EDIT ***************

I want to use builtin Observable in Angular yet and i do not want to use RXJS third party lib for angular.

This is my node module rx folder and you can see observable file in it.

And in node_modules\rxjs\operator folder there are throw and catch file.. But why it wants to search these files into E:\Tutorial\NodeJS\WebstormProjects\Angular\http\src\app folder that is make a error?

Answer 1

I fixed my problem by installing :

npm install --save rxjs@6 rxjs-compat@6

and use this path for rxjs:

import {Observable, Subject, asapScheduler, pipe, of, from, interval, merge, fromEvent, throwError} from 'rxjs';
import {catchError} from "rxjs/internal/operators";

Seems catch depricated at angular 6 so in order to i have used catchError like below :

  getEmployee():Observable<IEmployee[]> {
    return this.http.get<IEmployee[]>(this._url)
      .pipe(
        catchError(this.errorHandler));
  }

  errorHandler(error: HttpErrorResponse) {
    return throwError(error.message || "Server Error")
  }

And all errors gone now :-)

Answer 2

These below references are enough for you. remove unwanted references

import { Injectable } from '@angular/core';
import {HttpClient, HttpErrorResponse} from '@angular/common/http';
import {IEmployee} from "../../../service/src/app/employee";
import {Observable} from "rxjs/Observable";

---

Where, removed these below references

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

And changed "rxjs/Observable" ainstead of "rxjs/index";

Update:

Should check your rxjs folder having these files, if not, then your package has missed something. you need re-install it.

Answer 3

Import these References

import { throwError, Observable } from 'rxjs';
import {throwError as observableThrowError} from 'rxjs';
import {catchError} from 'rxjs/operators'

and then change your code below as

getEmployees():Observable<IEmployee[]> {

return this.http.get<IEmployee[]>(this._url).pipe(
catchError(this.errorHandler));
}
errorHandler(error: HttpErrorResponse) {
return observableThrowError(error.message ||"server error");
} 

https://www.youtube.com/watch?v=ScaKGrW5s0I&list=PLC3y8-rFHvwhBRAgFinJR8KHIrCdTkZcZ&index=31

if you still not understand check above video link

Answer 4

ErrorObservable creates an Observable that emits no items to the Observer and immediately emits an error notification.

Just import like this

 import { ErrorObservable } from 'rxjs/observable/ErrorObservable';

And create error

ErrorObservable.create('error');