After DELETE callback works in same file but not in a service

I am making an Angular frontend and got really unexpected behaviour after an HTTP DELETE call.

When in component code I call directly HttpClient.delete, it logs 'test'. If I call the delete in a method of same file, delete2, it logs 'test2'. When I put same delete method in a service.ts file injected in the constructor like usual, DELETE is performed on the browser but 'test4' IS NOT LOGGED in the console !

constructor(
private service: Service,
private http: HttpClient
) { }


// delete action code triggered by user
this.http.delete("http://localhost:4200/").subscribe({
next: () => { console.log("test"); },
error: () => { console.log("error test"); }
});
this.delete2("http://localhost:4200/").subscribe({
next: () => { console.log("test2"); },
error: () => { console.log("error test2"); }
});
this.service.delete3("http://localhost:4200/").subscribe({
next: () => { console.log("test4"); },
error: () => { console.log("error test3"); }
});



delete2(path: string): any{
return this.http.delete<Company>(path);
}


Service file :

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Company } from './company.model';
import { Observable } from 'rxjs';

@Injectable({
providedIn: 'root'
})
export class Service {

constructor(
private http: HttpClient
) { }

delete3(path: string): Observable<Company> {
console.log("delete3");
return this.http.delete<Company>(path);
}
}


I was trying to refresh my list after the user delete one record, so I wanted to call my get function after delete in the subscribe callback of the Observable returned by http.delete, but the callback code is never called. It works with HttpClient.get though, I do not know why. I have the save problem with PUT and POST, DELETE is just an easier example.

Continue reading...