Problem using delete method in a CRUD operation in Angular 8 and Laravel and JWT

Am working on a Single Page Application built using Angular 8 on the frontend and Laravel on the backend. On the frontend I have a form which has buttons for the user to either edit or delete a user. When the delete button is clicked am capturing the id of the current user and in the logic file I parse the id to a common service whereby I parse to the backend via JWT.

On the service am using delete method Angular http method. The problem is when I dump the id of the user on the backend get error on the console. When I switch the method to post the data parses correctly.

Kindly assist?

Part of the form where the user presses the delete button and confirms and I later pass the typescript logic file

 <td>
        <button class="btn btn-primary" (click)="edit(user.id)">Edit</button>
        <span *ngIf="confirmDelete">
          <span> Are you sure you want to delete ?</span>
          <button class="btn btn-danger" (click)="deleteUser(user.id)">Yes </button>
          <button class="btn btn-primary" (click)="confirmDelete=false">No </button>
        </span>
        <button *ngIf="!confirmDelete" class="btn btn-danger" (click)="confirmDelete=true">Delete</button>
       </td>

Typescript logic file

import { Component, OnInit , ViewChild, ElementRef} from '@angular/core';
import { AuthService } from 'src/app/Services/auth.service';


@Component({
  selector: 'app-show',
  templateUrl: './show.component.html',
  styleUrls: ['./show.component.css']
})
export class ShowComponent implements OnInit {
  public userData : any[];
  public error = null;

  constructor(
    private Auth:AuthService,
    ) { }

  ngOnInit() {
  }

  //Method that is called from the frontend when user 
  //deletes the button
  deleteUser(id:number){
    return this.Auth.delete(id).subscribe(
      data => console.log(data),
      error => console.log(error)
    );
  }

}

Auth Service where I pass the data to the backend

   import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { TokenService } from './token.service';

@Injectable({
  providedIn: 'root'
})

export class AuthService {

  private httpOptions = {
      headers: new HttpHeaders({
      'Content-Type':  'application/json',
      'Authorization': this.Token.get()
      })
  };


  private baseUrl = 'http://localhost/Laravel-anngular-spa/backend/public/api';

  constructor(private http:HttpClient,
        private Token : TokenService
  ) {}

  signup(data:any){
    return this.http.post(`${this.baseUrl}/signup` , data);
  }

  login(data:any){
    return this.http.post(`${this.baseUrl}/login` , data);
  }

  edit(id:number){
    return this.http.put(`${this.baseUrl}/updateUser/${id}, httpOptions`);
  }

  delete(id:number){
    return this.http.delete(`${this.baseUrl}/deleteUser/${id},  httpOptions`);
  }
}

Token Service

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})

export class TokenService {

  private iss = {
    login : 'http://localhost/Laravel-anngular-spa/backend/public/api/login',
    signup : 'http://localhost/Laravel-anngular-spa/backend/public/api/signup'
  };

  constructor() { }

  handle(token:any){
    this.set(token);
  }

  set(token:any){
    localStorage.setItem('token' , token);
  }

  //contains the token of the logged in user
  get(){
    return localStorage.getItem('token');
  }

  remove(){
    return localStorage.removeItem('token');
  }
}

Backend Laravel route

Route::group([
    'middleware' => 'api',
], function () {
    Route::delete('deleteUser/{id}', 'SubmitFormController@deleteUser');
});

SubmitFormController

  public function deleteUser($id){
        dd($id);
    }

CORS.php in Laravel as am using JWT to parse data

 public function handle($request, Closure $next)
    {
        header('Access-Control-Allow-Origin:*');
        header('Access-Control-Allow-Headers:Content-type,X-Auth-Token,Authorization,Origin');
        return $next($request);
    }