How to pass body through `httpclient` delete request in Angular5

Question

How to pass body through httpClient in delete request?

Please check my code. Is there any idea to pass data through body in delete request. There is no proper source how to call this request in angular 5.

let body = removeFile;
    return this.httpClient.delete(`${apiRoot}RemoveQueryData`, {
      headers: new HttpHeaders().set('Content-Type', 'application/json').set('Authorization', `Bearer ${accessToken}`),
      observe: removeFile
    })

That body I am passing through observe. It's throwing following error.

Error:

Error: Unreachable: unhandled observe type [object Object]}
    at HttpClient.request (http.js:1520)
    at HttpClient.delete (http.js:1546)

Possible duplicate of [Body of Http.DELETE request in Angular2](https://stackoverflow.com/questions/38819336/body-of-http-delete-request-in-angular2) — ACOMIT001, Mar 26 '18 at 05:46

Gavishiddappa Gadagi · Answer 1 · 2019-05-14T11:31:22.287

5

For now Angular HttpClient doesn't support body in delete method you can post body throgh Request Options.

let body = removeFile;
let queryParams = new HttpParams().set('key', value); // key and value are both strings
let headerData = new HttpHeaders().set('Content-Type', 'application/json').set('Authorization', `Bearer ${accessToken}`);

return this.httpClient.delete(`${apiRoot}RemoveQueryData`, 

    new RequestOptions( {
      headers: headerData,  // optional
      params: queryParams,  // optional
      body: body,
      observe: 'response',  // optional
      responseType: 'response' // default type json ...
    })
   );

edited May 14 '19 at 11:31

answered Mar 26 '18 at 06:03

Gavishiddappa Gadagi

1,120
1
16
34

hi @Gavishiddappa Gadagi in all request we can pass data through body but for delete request it is not working. If u any idea. Pls let me know. – siva.kumar Mar 26 '18 at 06:47
Check this https://stackoverflow.com/a/40857437/5950377 & go through the link commented above to get better understanding. – Gavishiddappa Gadagi Mar 26 '18 at 06:58
i've updated my answer too. If you still find error please provide complete details about the error. – Gavishiddappa Gadagi Mar 26 '18 at 07:01
-1: "You should do some research and read some documents before asking questions here." is not the way to answer on StackOverflow. – Enes Sadık Özbek May 13 '19 at 03:46

Pablo Palacios · Answer 2 · 2019-05-15T13:13:05.777

This might not be a problem related to angular, but to fact that the verv DELETE might no have a body attached. It is used to delete resources, so its response should only be the code.

Now I do recommend to test your end point with POSTMAN, so you can double check that you are receiving the body. Then if you are sure that the body is there after using postman, then we might be able to do something about this body.

You can also check your chrome console on the network tab to check the response on the DELETE request.

I did run on this problem a few years ago.

https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods/DELETE

Request has body May
Successful response has body May
Safe No
Idempotent Yes
Cacheable No
Allowed in HTML forms No

https://restfulapi.net/http-methods/#delete

HTTP DELETE As the name applies, DELETE APIs are used to delete resources (identified by the Request-URI).

A successful response of DELETE requests SHOULD be HTTP response code 200 (OK) if the > response includes an entity describing the status, 202 (Accepted) if the action has been queued, or 204 (No Content) if the action has been performed but the response does not include an entity.

DELETE operations are idempotent. If you DELETE a resource, it’s removed from the collection of resource. Repeatedly calling DELETE API on that resource will not change the outcome – however calling DELETE on a resource a second time will return a 404 (NOT FOUND) since it was already removed. Some may argue that it makes DELETE method non-idempotent. It’s a matter of discussion and personal opinion.

If the request passes through a cache and the Request-URI identifies one or more currently cached entities, those entries SHOULD be treated as stale. Responses to this method are not cacheable.

score 0 · Answer 3 · edited Mar 06 '21 at 09:47

If you are using angular for example, using the httpClient, you could implement something like this, currently it works for me in angular 6+

 deleteWithBody(module: string, key: string, value: any): Observable<any> {
    const options = {
      headers: new HttpHeaders(),
      body: value
    };
    return this._httpClient.delete(
      this.baseUrl + module + this.env + '/' + key,
      options
    );
  }

Hope it helps you, regards

How to pass body through `httpclient` delete request in Angular5

3 Answers3