找不到模块：错误：无法解析“F:\Angular\HttpServices\http-services\src\app”中的“rxjs/add/operator/catch”

Question

这是我的代码。

import { injectable } from '@angular/core';
import { Http } from '@angular/http';
import 'rxjs/add/operator/catch';

@Injectable({
    providedIn: 'root'
})
export class PostsService {
    private url = 'https://jsonplaceholder.typicode.com/posts';
    constructor(private http : Http ) { }
    getPosts {
        return this.http.get(this.url);
    } 

    deletePost(id) {
        return this.http.get(this.url + '/' + id);
    }
}

我正在我的 PC 上执行此代码，它可以工作，但不能在笔记本电脑上工作。这看起来很有趣，但这是真的。
这是我项目的结构

Answer 1

新版 rxjs 不再支持单一导入，改为尝试：

import { catchError } from 'rxjs/operators';

Answer 2

在 Angular 6 中，RXJS 导入已更改，运算符必须“包装”在 pipe() 中，并且开头不带点（以前是：.map、.retry、.catch；现在：改为 map、retry 和 catchError一个捕获）：

import { catchError, map } from 'rxjs/operators';

并使用 pipe()

getPosts() {
    // pack in "pipe()"
    return this.http.get(this.url).pipe(
      // eg. "map" without a dot before
      map(data => {
        return data;
      }),
      // "catchError" instead "catch"
      catchError(error => {
        return Observable.throw('Something went wrong ;)');
      })
    );
  }

“我在我的 PC 上执行此代码，它可以工作，但不能在笔记本电脑上工作” - 在笔记本电脑上你有一个更新版本的 angular cli。它使用新的其他导入生成角度 6。问候

Answer 3

在 Angular 7 中，这里是如何以干净的方式处理 http get 请求

import {Injectable} from '@angular/core';
import {HttpClient} from '@angular/common/http';
import {Observable, throwError} from 'rxjs';
import {catchError, retry} from 'rxjs/operators';

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

  constructor(private _http: HttpClient) {
  }

  public getPosts(): Observable<Post[]> {

    return this._http.get(<URL>).pipe(
      retry(1), catchError(error => {
        return throwError(error.message);
      }));
  }
}

Answer 4

如果您是因为初始代码建议的 Udemy 课程而来到这里的。

进口

import { throwError } from 'rxjs';
import { catchError } from 'rxjs/operators';

这就是它现在的样子。

  deletePost(id){
    return this.http.delete(this.url + '/' + id ).pipe(
       catchError(error => {
        if (error.status === 404)
        return throwError(new NotFoundError());
        
        return throwError(new AppError(error));
        
      }));
  }

Answer 5

试试这个，会成功的！...

    import { Injectable } from '@angular/core';    
    import { HttpClient, HttpErrorResponse } from '@angular/common/http';    
    import { catchError } from 'rxjs/operators';    
    import { Observable, throwError } from 'rxjs';    


        .get(<URL>).pipe
         (
         catchError((error: HttpErrorResponse) =>{       
            return throwError(error.message || 'server error');    
                                                })
         )

Answer 6

对于最新版本的 Angular (v13)，代码略有不同。让我们从服务实现开始：

import { NotFoundError } from './../common/not-found-error';
import { HttpClient, HttpErrorResponse } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { catchError } from 'rxjs/operators';
import { throwError } from 'rxjs';
import { AppError } from '../common/app-error';
...
      deletePost(id: number) {
        return this.http.delete(this.url + '/' + id).pipe(
          catchError((error: Response) => {
            if (error.status === 404)
              return throwError(() => new NotFoundError(error));
            return throwError(() => new AppError(error));
          })
        );
      }

出于关注点分离的目的，该服务负责发送删除请求并捕获任何潜在的已知（未找到 404）或未知错误。如果发生错误，服务会通过调用其中一个应用程序错误类（AppError 是一个通用类，NotFoundError 是一个特定的错误类并且它扩展 AppError）来引发错误。

请注意，服务将错误管理委托给这 2 个错误应用程序类（服务角色不涉及错误管理细节）

AppError (app-error.ts):

export class AppError {
  constructor(public originalError?: any) {}
}

NotFoundError (not-found-error.ts)：

import { AppError } from './app-error';
export class NotFoundError extends AppError {}

现在对于 posts.component.ts 实现，我们应该有类似的内容：

import { NotFoundError } from './../common/not-found-error';
import { AppError } from './../common/app-error';
...
  deletePost(post: any) {
    this.service.deletePost(post.id).subscribe({
      next: () => {
        let index = this.posts.indexOf(post);
        this.posts.splice(index, 1);
      },
      error: (error: AppError) => {
        if (error instanceof NotFoundError)
          alert('this post has already been deleted');
        else {
          alert('An unexpected error occured.');
          console.log(error);
        }
      },
    });
  }

这个deletePost方法订阅专用服务，如果服务捕获并抛出错误，deletePost会检查错误的种类并相应地显示错误。

Answer 7

您为什么不尝试添加“import 'rxjs/add/operators/catch';” （把 's' 写成操作符）而不是“import 'rxjs/add/operator/catch';”