Angular 10 - cannot force error using HttpClient delete()

Question

so I'm following an Angular tutorial right now and in the error-handling-chapter I'm currently stuck because I cannot force an error to appear when feeding a HttpClient.delete()-request with wrong data.

I've cut that part out but I'm getting my data (posts) from http://jsonplaceholder.typicode.com/posts.

I've tried to feed the delete-function with bad ids in multiple places. I've used ids that should be out of border and 1 for example which should be deleted after clicking the "delete"-Button twice but nothing forced an error.

What it's doing instead is it's working perfectly fine meaning it's emptying my posts-list and it's doing so by deleting exactly the posts that I clicked on.

I've tried simplifying it by cutting out the error-services and doing everything in the posts-component but it didn't help.

posts.component.ts

import { BadInputError } from './../common/bad-input';
import { NotFoundError } from './../common/not-found-error';
import { PostService } from './../services/post.service';
import { Component, Input, OnInit } from '@angular/core';
import { AppError } from '../common/app-error';

@Component({
  selector: 'posts',
  templateUrl: './posts.component.html',
  styleUrls: ['./posts.component.css']
})
export class PostsComponent implements OnInit {
  posts: any[];
  constructor(private service: PostService) { }

  // ...

  deletePost(post) {
    this.service.deletePost(post.id).subscribe(
      response => {
        console.log(response);
        let index = this.posts.indexOf(post);
        this.posts.splice(index, 1);
      }, 
      (error: AppError) => {
        if (error instanceof NotFoundError)
          alert('This post has already been deleted.');
        else {
          alert('An unexpected error occured.');
          console.log(error);
        }
      }
    );
    console.log(this.posts);
  }
}

posts.component.html

<ul class="list-group">
    <li 
        *ngFor="let post of posts"
        class="list-group-item">
        <button 
            (click)="deletePost(post)"
            class="btn btn-default btn-sm">
            Delete
        </button>
        {{ post.title }}
    </li>
</ul>

post.service.ts

export class PostService {
  private url = 'http://jsonplaceholder.typicode.com/posts';
  constructor(private http: HttpClient) { }

  // ...

  deletePost(id) {
    return this.http.delete(this.url + '/' + id)
      .pipe(
        catchError((error: HttpErrorResponse) => {
          if (error.status === 404)
            // throw Observable.throw(new NotFoundError);
            throw throwError(error);
            //return Observable.throw(new NotFoundError);
          else
            return Observable.throw(new AppError(error));
        })
      );
  }
}

app-error.ts

export class AppError {
    constructor(public originalError?: any) {}
}

not-found-error.ts

import { AppError } from './app-error';

export class NotFoundError extends AppError {}

bad-input.ts

import { AppError } from './app-error';

export class BadInputError extends AppError {}

I would be very thankful for someone explaining me, what I'm doing wrong and how I can force errors to test my application.

Kind regards

Answer 1

So it's not quite the solution/answer for my problem/question but at least I now know how to test my error-handling.

I can just throw an error inside of the error-handling-function before it's body is being executed:

delete(id) {
  return throwError(new NotFoundError);

  return this.http.delete(this.url + '/' + id)
    .pipe(
      catchError(this.handleError)
    );
}