Cannot find module 'async_hooks' in Angular Application

Question

Trying to delete a post coming from jsonplaceholder/post website in the post component of my angular app. While calling delete HTTP from Json placeholder using a service, I am getting the following error.

ERROR in src/app/components/post/post.component.ts(5,27): error TS2307: Cannot find module 'async_hooks'. src/app/components/post/post.component.ts(55,35): error TS2345: Argument of type 'Number' is not assignable to parameter of type 'number | Post'. Type 'Number' is not assignable to type 'Post'. Property 'id' is missing in type 'Number'.

This is the remove post method in the component where the delete is happening:

removePost(post: Post) {
if (confirm('Are you Sure?')) {
  this.postService.removePost(post.id).subscribe(() => { //calling the service using the dependency injection and subscribing it to the function in the service
    this.posts.forEach((cur, index) => {
      if (post.id === cur.id ) {
        this.posts.splice(index, 1);
      }
    });
  });
}

}

This is The removePost method in the service:

removePost(post: Post | number): Observable<Post> {
const id = typeof post === 'number' ? post : post.id;
const url = `${this.postsUrl}/${id}`;

return this.http.delete<Post>(url, httpOptions);

}

The HTML file

    <div class="card mb-2" *ngFor= 'let msg of posts'>
  <div class="card-body">
    <h3>{{msg.title}}</h3>
    {{msg.body}}
    <hr>
    <button (click)= 'removePost(msg)' class="btn btn-danger">
      <i class="fa fa-remove light"></i>
    </button>

    <button (click)='editPost(msg)' class="btn btn-light">
      <i class="fa fa-pencil light"></i>
    </button>

  </div>
</div>

Answer 1

As the error message states, the problem is that number does not have a field id as your Post-object has. And that's why typescript denies to accept this method-signature as valid. The Objects must have the same set of compulsory fields.

You could try to create a wrapper object that possesses all the fields your Post-Object contains and add the number as an additional field. But I'd avoid this effort and rather try it with 2 different methods sharing a main method:

Somehow this way:

Your TS-File

removePost(post: Post) {
    if (confirm('Are you Sure?')) {
      this.postService.removePostById(post.id).subscribe(() => { 
          this.posts.forEach((cur, index) => {
              if (post.id === cur.id ) {
                   this.posts.splice(index, 1);
              }
          });
      });
   }
}

Your Service

public removePostById(id: number): Observable<Post> {
    return this.removePost(id);
}

public removePostByPostObject(post: Post): Observable<Post> {
    return this.removePost(post.id);
}

private removePost(id: number): Observable<Post> {
    const url = `${this.postsUrl}/${id}`;

    return this.http.delete<Post>(url, httpOptions);
}