How to add a body to Angular HttpClient delete function

Question

Our project is migrating to Angular4, and use @angular/common/http Httpclient as the default network tool. But I found there are no body params in delete function. How do I add the body to delete function? Thanks.

Alysaalyse

Possible duplicate of Body of Http.DELETE request in Angular2 – Aspergillum

he is asking about the new HttpClient not the old http module – Detergency

but the implementation which he is seeking remains same for both the cases, try going through the link shared. – Aspergillum

Take a look at this: angular.io/api/http/RequestOptions – Pharyngo

I can not find a RequestOptions-Like lib in common/http. And the options in HttpClient.delete just support for:headers, observe, params(not body), reportProgress, responseType, withCredentials – Alysaalyse

@HongyangDu see the overloaded methods angular.io/api/common/http/HttpClient#delete – Aspergillum

@SumitAgarwal Thanks Agarwal~ But the overloaded method just has the changes on responseType and observe type. There still no place for body. – Alysaalyse

for future readers - since Angular 4.3 (this includes Angular 5+) they removed the body from the delete method of angular HttpClient the alternative is to use http.request() like Andrii Ivanyk posted below. it was removed because the specification for Delete is unclear regarding the use of BODY in it. – Blythebm

Answer 1

You may use a universal request method on the HttpClient class instead. This method has the body in options. https://angular.io/api/common/http/HttpClient#members

e.g this.http.request('delete', 'url', { body: ... })

Fogbow

@StefanFalk probably because the "proper" way to delete stuff in a RESTful way is to have a unique URL for each unique resource (e.g.: /clients/<id>). But real life APIs are seldom RESTful, unfortunately. – Mackinnon

@JosephTinoco No I just mean the call itself. There could easily be a this.http.delete() method that wraps this s.t. the interface gets more intuitive. – Hollister

@StefanFalk That's kinda my point. The "intuitive" interfaces are all RESTful, everything else is possible but only with the ugly/less intuitive this.http.request() method. It's like Angular is saying "if you want nice, readable code, you gotta go RESTful in the backend". – Mackinnon

In Angular 9+ you will need to this.http.request('DELETE', 'url', { body: ... }). In my case the uppercase method string was necessary. – Ornithine

Answer 2

const httpOptions = {
    headers: new HttpHeaders({ 'Content-Type': 'application/json' }), body: your body data
};


return new Promise(resolve => {
    this.httpClient.delete(URL, httpOptions)       
                   .subscribe(res => {     
                       resolve(res);
                   }, err => {               
                       resolve(err);
                   });
    });

by using httpOptions, you can set header and body in it. please refer this https://angular.io/tutorial/toh-pt6#delete-a-hero

Suzettesuzi

Not sure what version of Angular you're using, but this doesn't work in Angular 5 using the HttpClient. The typings file indicates body doesn't exist. You need to use this.http.request - https://mcmap.net/q/298650/-how-to-add-a-body-to-angular-httpclient-delete-function – Sidwohl

Answer 3

I also get this problem and my solution is creating a new HttpRequest of delete method, then clone this request, reset its body with your data.

let req = new HttpRequest('DELETE', 'url');
let newReq = req.clone({body: [10]});
this.http.request(newReq).subscribe((res) => {
    console.log(res);
}, (err) => {
    console.log(err);
});

The clone() is required, because the body still can not be directly set in the new HttpRequest().

Cominform

Indeed, creating an HttpRequest with method "delete" and passing directly the body in the constructor does not work. However, it works fine with method "post" – Joanne