Body of Http.DELETE request in Angular2

Question

I'm trying to talk to a somewhat RESTful API from an Angular 2 frontend.

To remove some item from a collection, I need to send some other data in addition to the removée unique id(that can be appended to the url), namely an authentication token, some collection info and some ancilliary data.

The most straightforward way I've found to do so is putting the authentication token in the request Headers, and other data in the body.

However, the Http module of Angular 2 doesn't quite approve of a DELETE request with a body, and trying to make this request

let headers= new Headers(); headers.append('access-token', token);  let body= JSON.stringify({     target: targetId,     subset: "fruits",     reason: "rotten" });  let options= new RequestOptions({headers:headers}); this.http.delete('http://testAPI:3000/stuff', body,options).subscribe((ok)=>{console.log(ok)}); <------line 67 

gives this error

app/services/test.service.ts(67,4): error TS2346: Supplied parameters do not match any signature of call target. 

Now, am I doing something wrong syntax-wise? I'm pretty sure a DELETE body is supported per RFC

Are there better ways to send that data?

Or should I just dump it in headers and call it a day?

Any insight on this conundrum would be appreciated

Answer 1

If you use Angular 6 we can put body in http.request method.

Reference from github

You can try this, for me it works.

import { HttpClient } from '@angular/common/http';  @Component({   selector: 'app-root',   templateUrl: './app.component.html',   styleUrls: ['./app.component.scss'], }) export class AppComponent {    constructor(     private http: HttpClient   ) {     http.request('delete', url, {body: body}).subscribe();   } } 

Answer 2

The http.delete(url, options) does accept a body. You just need to put it within the options object.

http.delete('/api/something', new RequestOptions({    headers: headers,    body: anyObject })) 

Reference options interface: https://angular.io/api/http/RequestOptions

UPDATE:

The above snippet only works for Angular 2.x, 4.x and 5.x.

For versions 6.x onwards, Angular offers 15 different overloads. Check all overloads here: https://angular.io/api/common/http/HttpClient#delete

Usage sample:

const options = {   headers: new HttpHeaders({     'Content-Type': 'application/json',   }),   body: {     id: 1,     name: 'test',   }, };  this.httpClient   .delete('http://localhost:8080/something', options)   .subscribe((s) => {     console.log(s);   });