Angular - HTTPClientModule delete request not working

Question

I am making a simple delete request from my angular app but nothing is happening and no error is appearing. My service code is as follows :

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable({
  providedIn: 'root'
})

export class TodoService {

  todoUrl = 'https://example.herokuapp.com/api/todoDB/';

  constructor(private http: HttpClient) { }

  getTodo() {
    return this.http.get(this.todoUrl);
  }

  postTodo(todoObject: any) {
    return this.http.post(this.todoUrl , todoObject);
  }

  deleteTodo(id: any) {
    const url = `${this.todoUrl}${id}`;
    console.log(url);    // *** This is printing correct URL
    return this.http.delete(url);
  }

}

My getTodo() and postTodo() are working completely fine but the deleteTodo() method is not working and also it does not show any error either. When I put the URL from the console.log(url) in postman, it works but it is not working from my app.I am using the following code in my component to access the deleteTodo() method of my service :

removeTodo(i: any) {
    this.todoService.deleteTodo(this.todoArray[i]._id);
}

My delete route of server :

//  Delete Todo
router.delete('/:id' , (req , res) => {
    Todo.findById(req.params.id)
        .then((todo) => todo.remove().then(() => res.json({success : true})))
        .catch(err => res.json({success : false}).status(404))
});

Are you sure you want to send a HTTP DELETE request by this.http.delete(url) instead of a HTTP GET? — JackySky
– JackySky, Commented Dec 16, 2020 at 9:25

Amit K Khanchandani · Accepted Answer · 2020-12-16 09:28:34Z

2

You need to subscribe to the Observable

Code Snippet for your problem:

removeTodo(i: any) {
    this.todoService.deleteTodo(this.todoArray[i]._id).subscribe(e=>{
    // Callback
    // Perform Actions which are required after deleting the id from the TODO
    });
}

Additional Reference:

https://www.pluralsight.com/guides/posting-deleting-putting-data-angular

https://angular.io/guide/http#making-a-delete-request

answered Dec 16, 2020 at 9:28

Amit K Khanchandani

3553 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Shankar Ganesh Jayaraman · Accepted Answer · 2020-12-16 09:30:12Z

0

Modify your code to support catchError and throwError using pipe for debugging.

import { catchError } from 'rxjs/operators';
import { throwError } from 'rxjs';

deleteTodo(id: any) {
    const url = `${this.todoUrl}${id}`;
    return this.http.delete(url).pipe(
        catchError((err) => {
          console.log('error caught in service')
          console.error(err);
          return throwError(err);    //Rethrow it back to component
        })
      );
}

answered Dec 16, 2020 at 9:30

Shankar Ganesh Jayaraman

1,5011 gold badge16 silver badges26 bronze badges

Collectives™ on Stack Overflow

Angular - HTTPClientModule delete request not working

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related