Неправильная обработка ошибок Angular 7 http

Question

Я пытаюсь обработать 422 ошибки в моем HTTP-запросе.Но почему-то блок ошибок не запускается в сервисе с использованием оператора catchError.Если ошибки нет, код работает нормально.Я хочу отобразить сообщение об ошибке на своей странице.Но angular только выдает ошибку в консоли и не запускает блок ошибок.Вот мой http-ответ об ошибке:

А вот ошибка, которую я получаю только в консоли.

Я хочу отобразить сообщение об ошибке на своей странице.Вот мой HTTP-запрос.

 renderPlugin(id): Observable<any> {
 return this.http
      .get(`${environment.kbUrl}/${id}?_as_json=1&_nbp=1`, {
        responseType: "text",
        observe: "response"
      })
      .pipe(
        catchError((res: HttpErrorResponse) => {
          console.log(JSON.stringify(res));
          this.toastr.error("error", JSON.stringify(res));
          return throwError(JSON.stringify(res));
        })
      );
  }

А вот мой способ подписаться на него.

this.pluginsService.renderPlugin(this.currentId).subscribe(res =>{
    this.currentString = res.body;
    this.plugin = this.currentString.data.content;
    console.log(this.plugin);
      },
      err =>{
        this.plugin = err;
      });

Answer 1

Попробуйте удалить этот код из вашего вызова Http:

  .pipe(
    catchError((res: HttpErrorResponse) => {
      console.log(JSON.stringify(res));
      this.toastr.error("error", JSON.stringify(res));
      return throwError(JSON.stringify(res));
    })
  )

И обработайте вашу ошибку в блоке ошибок вашего метода подписки.

this.pluginsService.renderPlugin(this.currentId).subscribe(
    res => {
        this.currentString = res.body;
        this.plugin = this.currentString.data.content;
        console.log(this.plugin);
    },
    err => {
       // Handle the error here
       // like displaying toast using the error message received from server
       this.plugin = err;
    }
);