Модуль не найден: Ошибка: невозможно разрешить 'rxjs / add / observable / throw' в 'D: \ Angular \ httpErrorHandlingExample \ src \ app' - PullRequest
Новая
       4

Модуль не найден: Ошибка: невозможно разрешить 'rxjs / add / observable / throw' в 'D: \ Angular \ httpErrorHandlingExample \ src \ app'

0 голосов
/ 22 апреля 2020

Я пытаюсь написать Angular программу для обработки ошибок. Но я получаю следующее сообщение об ошибке при попытке импортировать сообщение об ошибке модуля выброса: «ОШИБКА в ./src/app/employee.service.ts Модуль не найден: Ошибка: невозможно разрешить» rxjs / add / observable / киньте 'in' D: \ Angular \ httpErrorHandlingExample \ src \ app '"Пожалуйста, помогите мне с этим.

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

}

Данные о сотрудниках хранятся локально в следующей папке: "/ assets / data / employee . json "

1 Ответ

1 голос
/ 22 апреля 2020

Вы используете неправильный импорт: import 'rxjs/add/observable/throw';

Я думаю, что вы хотите использовать это: 

import { throwError } from 'rxjs';


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

}

...