I'm working on an Angular project to practice error handling, but I encountered an issue when trying to import the 'throw' module. The error message reads as follows: Error Message: "ERROR in ./src/app/employee.service.ts Module not found: Error: Can't resolve 'rxjs/add/observable/throw' in 'D:\Angular\httpErrorHandlingExample\src\app'" I'd appreciate any assistance with this problem.
employee.ts :
export interface IEmployee{
id: number,
name: string,
age: number
}
employee.service.ts
import { Injectable } from '@angular/core';
import { HttpClient, HttpErrorResponse } from '@angular/common/http';
import { observable,Observable ,throwError} from 'rxjs';
import { IEmployee } from './employee';
//import 'rxjs/add/operator/catch';
import{ catchError } from 'rxjs/operators';
import 'rxjs/add/observable/throw';
@Injectable({
providedIn: 'root'
})
export class EmployeeService {
private _url: string ="/assets/data/employees1.json";
constructor(private http: HttpClient) {}
getEmployees(): Observable<IEmployee[]>{
return this.http.get<IEmployee[]>(this._url)
.pipe(catchError(this.errorHandler));
}
errorHandler(error: HttpErrorResponse){
return Observable.throw(error.message || "Server Error");
}
}
app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { EmployeeListComponent } from './employee-list/employee-list.component';
import { EmployeeDetailsComponent } from './employee-details/employee-details.component';
import { HttpClientModule } from '@angular/common/http';
import { EmployeeService } from './employee.service';
@NgModule({
declarations: [
AppComponent,
EmployeeListComponent,
EmployeeDetailsComponent
],
imports: [
BrowserModule,
HttpClientModule
],
providers: [EmployeeService],
bootstrap: [AppComponent]
})
export class AppModule { }
app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'httpErrorHandlingExample';
}
app.component.html :
<app-employee-list></app-employee-list>
<app-employee-details></app-employee-details>
employee-list.component.ts
import { Component, OnInit } from '@angular/core';
import { EmployeeService } from '../employee.service';
@Component({
selector: 'app-employee-list',
template: `
<h1>Service Example: Program NO.14</h1>
<h2>Employee Details</h2>
{{errMgs}}
<ul *ngFor="let emp of employees">
<li>{{emp.name}}</li>
</ul>
`,
styleUrls: ['./employee-list.component.css']
})
export class EmployeeListComponent implements OnInit {
public employees;
public errMgs;
constructor(private _employeeservices: EmployeeService) { }
ngOnInit() {
this._employeeservices.getEmployees().subscribe(data =>this.employees=data,
error =>this.errMgs =error);
}
}
employee-details.component.ts
import { Component, OnInit } from '@angular/core';
import { EmployeeService } from '../employee.service';
@Component({
selector: 'app-employee-details',
template: `
<h2>Employee List detail</h2>
<ul *ngFor="let emp of employees">
<li>{{emp.id}}. {{emp.name}} {{emp.age}}</li>
</ul>
`,
styleUrls: ['./employee-details.component.css']
})
export class EmployeeDetailsComponent implements OnInit {
public employees=[];
public errMgs;
constructor(private _employeeservices: EmployeeService) { }
ngOnInit() {
this._employeeservices.getEmployees().subscribe(data =>this.employees =data,
error => this.errMgs =error);
}
}
The employee details are store in the following folder locally:"/assets/data/employees.json"