Angular6 :Property catch does not exist - node.js

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