Http.delete TypeError: error.json не является функцией

Question

В моем угловом приложении у меня есть delete button, При щелчке на нем появляется всплывающее окно, чтобы спросить пользователя, уверен ли он, что хочет удалить это. Когда он нажимает "да", я отправляю следующий запрос http.delete на сервер.

  Delete(id: number) {
    return this.http.delete('apiEndpoint/' + id)
    .map(res => res.json())
    .catch((error: any) => 
      Observable.throw(error.json().error || 'Server error' )
    );
  };

Обычным результатом этого вызова является удаленный объект. Однако, если мой if condition срабатывает в бэкэнде, я возвращаю следующее

return BadRequest(new { error = "error message" });

Когда эта ошибка обрабатывается, это приводит к TypeError: error.json is not a function,

Это всплывающее окно:

showPopup() {
this.popup.open(NguiMessagePopupComponent, {
  title: 'Delete',
  message: 'Are you sure you want to delete this?',
  buttons: {
    OK: () => {
      this.service.delete(this.someId).subscribe(() => {
        this.router.navigate(['someUrl']);
      },
      error => {
        alert(error);
      });
    },
    CANCEL: () => {
      this.popup.close();
    }
  }
});

Это все импортные услуги:

import { Injectable } from '@angular/core';
import { Http, Response, RequestOptions, Headers } from '@angular/http';
import {HttpService} from './http-service.service';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/throw';
import 'rxjs/add/operator/map';
import { AppConfig } from '../app.config';
import { stringify } from 'querystring';
import { model } from 'models';

Answer 1

Я не верю, что вам нужно позвонить .json() еще раз, как вы уже сделали это в .map(..) вызов. Просто измените код перехвата, чтобы ссылаться на возвращаемый объект, в вашем случае error.error

Delete(id: number) {
    return this.http.delete('apiEndpoint/' + id)
       .map(res => res.json())
       .catch((error: any) => 
          Observable.throw(error.error || 'Server error' )
       );
};

В дополнение к этому вы можете добавить

import 'rxjs/add/observable/throw'; 

в ваш код для реализации функции throw.