What causes the failure of the post request in this Angular 15 and JSON server app?

I have been working an app with Angular 15.

I use a hand-coded JSON and JSON server to perform CRUD oprations on the "employees" JSON below:

{
  "employees": [
    {
      "empno": "2",
      "deptno": "10",
      "firstname": "Sandy",
      "lastname": "Paton",
      "gender": "femele",
      "avatar": "sandy.png",
      "job": "Manager",
      "bio": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam obcaecati veritatis maiore.",
      "skills": [
        "Management"
      ]
    },
    {
      "empno": "4",
      "deptno": "30",
      "firstname": "Hollie",
      "lastname": "Haerr",
      "gender": "femele",
      "avatar": "hollie.png",
      "job": "Programmer",
      "bio": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam obcaecati veritatis maiore.",
      "skills": [
        "HTML5",
        "CSS3",
        "JavaScript",
        "Angular 2+"
      ]
    },
    {
      "empno": "6",
      "deptno": "30",
      "firstname": "Lynde",
      "lastname": "Ailyn",
      "gender": "femele",
      "avatar": "femele.png",
      "job": "Programmer",
      "bio": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam obcaecati veritatis maiore.",
      "skills": [
        "HTML5",
        "CSS3",
        "JavaScript",
        "Angular 2+"
      ]
    }
  ]
}

NOTE:

I start the JSON server with npx json-server --watch ./src/app/data/employees.json --id empno.

In employee-form.component.ts I heve:

import { Component } from '@angular/core';
import { Employee } from '../../models/empModel';
import { EmployeeService } from '../../services/employee.service';
import { NgForm } from '@angular/forms';

@Component({
  selector: 'app-employee-form',
  templateUrl: './employee-form.component.html',
  styleUrls: ['./employee-form.component.scss']
})

export class EmployeeFormComponent {

  constructor(private employeeService: EmployeeService) {}

  public empsArray: Employee[] = [];

  newEmployee: any = {}

  public empno: number = 0;
  public deptno: number = 0;
  public firstname: string = '';
  public lastname: string = '';
  public gender: string = '';
  public avatar: string = '';
  public job: string = '';
  public bio: string = '';
  public skills: string = ''; 

  public pickAvatar(event: any)  {
	let file = event.target.files[0];
	this.avatar = file.name;
  }

  public setAvatar(){
	this.newEmployee.avatar = this.avatar.length ? this.avatar : `${this.gender}.png`;
  }

  public doSkillsArray()  {
	this.newEmployee.skills = this.skills.split(',');
  }
  
  public addEmployee(form: NgForm) {

	this.newEmployee = {
	  empno: this.empno,
	  deptno: this.deptno,
	  firstname: this.firstname,
	  lastname: this.lastname,
	  gender: this.gender,
	  avatar: this.avatar,
	  job: this.job,
	  bio: this.bio,
	  skills: this.skills
	};

	this.setAvatar();

	this.doSkillsArray();

	this.employeeService.addEmployee(this.newEmployee);
  }

}

In employee-form.component.html I have:

<form class="modal-content" #employeeForm="ngForm" (ngSubmit)="addEmployee(employeeForm)">

    <!-- Modal Header -->
    <div class="modal-header">
      <h4 class="modal-title">New employee</h4>
      <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
    </div>

    <!-- Modal body -->
    <div class="modal-body">
      <div class="mb-2">
          <label class="form-label" for="firstName">First name</label>
          <input type="text" class="form-control" name="firstname" id="firstName" placeholder="First name" [(ngModel)]="firstname" />
          <div class="invalid-feedback">First name is required.</div>
      </div>
      <div class="mb-2">
          <label class="form-label" for="lastName">Last name</label>
          <input type="text" class="form-control" name="lastname" id="lastName" placeholder="Last name" [(ngModel)]="lastname" />
          <div class="invalid-feedback">Last name is required.</div>
      </div>
      <div class="mb-2">
        <label class="form-label d-block" for="avatar">Photo</label>
        <input type="file" class="file-upload-btn" name="avatar" id="avatar" [(ngModel)]="avatar" (change)="pickAvatar($event)">
      </div>
      <div class="mb-2">
          <label class="form-label" for="job">Job</label>
          <input type="text" class="form-control" name="job" id="job" placeholder="Job" [(ngModel)]="job"/>
          <div class="invalid-feedback">Job is required.</div>
      </div>
      <div class="mb-2">
        <label class="form-label" for="job">Skills</label>
        <input type="text" class="form-control" name="skills" id="skills" placeholder="Skills" [(ngModel)]="skills"/>
    </div>
      <div class="mb-2">
        <label class="form-label" for="department">Department</label>
        <select class="form-select" name="department" id="department" [(ngModel)]="deptno">
          <option value="10">Management</option>
          <option value="20">Sales</option>
          <option value="30">Software Engineering</option>
          <option value="40">Finance</option>
        </select>
    </div>
      <div class="mb-2">
          <label class="form-label d-block">Gender</label>
          <div class="form-check form-check-inline">
              <input type="radio" class="form-check-input" name="gender" id="mele" value="mele" [(ngModel)]="gender" />
              <label class="form-check-label" for="mele">mele</label>
          </div>
          <div class="form-check form-check-inline">
              <input type="radio" class="form-check-input"  name="gender" id="femele" value="femele" [(ngModel)]="gender" />
              <label class="form-check-label" for="femele">femele</label>
          </div>
      </div>

      <div class="mb-2">
          <label class="form-label" for="bio">Bio</label>
          <textarea class="form-control" name="bio" id="bio" type="text" placeholder="Bio" [(ngModel)]="bio"></textarea>
          <div class="invalid-feedback" data-sb-feedback="bio:required">Bio is required.</div>
      </div>
    </div>

    <!-- Modal footer -->
    <div class="modal-footer">
      <button type="submit" class="btn btn-success">Add employee</button>
      <button type="button" class="btn btn-danger" data-bs-dismiss="modal">Cancel</button>
    </div>
  </form>

In the service employee.service.ts I have:

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Employee } from '../models/empModel';

const httpOptions = {
  headers: new HttpHeaders({
	'Content-Type': 'application/json'
  })
}

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

  apiURL: string = 'http://localhost:3000';

  employees: Employee[] = [];

  constructor(private http: HttpClient) {}

  public getEmployees(): Observable<Employee[]>{
	return this.http.get<Employee[]>(`${this.apiURL}/employees`);
  }

  public addEmployee(newEmployee: Employee):Observable<Employee> {
	console.log(newEmployee);
	return this.http.post<Employee>(`${this.apiURL}/employees`, newEmployee, httpOptions);
  }
}

The lineconsole.log(newEmployee) displays the object as expected:

avatar: "mele.png"
bio: "Test"
deptno: "30"
empno: 0
firstname: "John"
gender: "mele"
job: "Programmer"
lastname: "Doe"
skills: (2) ['JavaSctipt', ' Vue']

The problem

Despite the fact that there are no errors and the newEmployee object looks as expected, no new data is added to the employees JSON.

Questions

1. What am I doing wrong?
2. What is the most reliable way to fix this issue?

What made it work was replacing this.employeeService.addEmployee(this.newEmployee) with

this.employeeService.addEmployee(this.newEmployee).subscribe(
  (_response: Employee) => {
    console.log("Added successfully");
  },
  (error: HttpErrorResponse) => {
    console.log(error.message);
  }
);

Thanks to @user3586286 for the sugestion.