未找到模块：错误：无法解析 'D:\Angular\httpErrorHandlingExample\src\app' 中的 'rxjs/add/observable/throw'

Question

我正在尝试编写一个 Angular 程序来尝试错误处理。但是当我尝试导入 throw 模块时收到以下错误消息 错误消息：“./src/app/employee.service.ts 中的错误 未找到模块：错误：无法解析 'D:\Angular\httpErrorHandlingExample\src\app' 中的 'rxjs/add/observable/throw'” 请帮我解决这个问题。

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

}

员工详细信息.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);
  }

}

员工详细信息存储在本地以下文件夹中：“/assets/data/employees.json”

Answer 1

您使用了错误的导入：import 'rxjs/add/observable/throw';

我想你想用这个：

import { throwError } from 'rxjs';


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

}