Post error 404 not found using in-memory Angular

here

Im trying to create a in memory services` , but when i tried to post it, it gives a POST ERROR 404 (NOT FOUND). how to fix this one tried to copy the tour of heroes but got this error and i think i got it correctly but its weird that i got the error 404(NOT FOUND).

IN MEMORY SERVICES

@Injectable({
  providedIn: 'root'
})
export class InMemoryDataService implements InMemoryDbService {

  createDb() {
    const serials = [
  
  {id: 1, deliveryReceiptDetailsId: 0, itemCode:'testing', qtyReceived:0 },
  {id: 2, deliveryReceiptDetailsId: 0, itemCode:'sample1', qtyReceived:0  },
  {id: 3, deliveryReceiptDetailsId: 0, itemCode:'sample2', qtyReceived:0  },
  {id: 4, deliveryReceiptDetailsId: 0, itemCode:'sample3', qtyReceived:0 },
  {id: 5, deliveryReceiptDetailsId: 0, itemCode:'sample4', qtyReceived:0 },
  {id: 6, deliveryReceiptDetailsId: 0, itemCode:'sample5', qtyReceived:0 },
];
console.log(serials)
return {serials};
}

SERVICES

const httpOptions = {
  headers: new HttpHeaders({
    'Content-Type' : 'application/json',
    'Authorization' : 'my-auth-token'
  })
}

@Injectable({
  providedIn: 'root'
})
export class SerialCodeService {
  url = 'api/serials';


  constructor(private http: HttpClient) { }

  getHeroes(): Observable<SerialCodeDTO[]> {
    return this.http.get<SerialCodeDTO[]>(this.url)
      .pipe(
        catchError(this.handleError)
      );
  }
  /** POST: add a new hero to the database */
  addHero(serial: SerialCodeDTO): Observable<SerialCodeDTO> {
    return this.http.post<SerialCodeDTO>(this.url, serial, httpOptions)
      .pipe(
        catchError(this.handleError)
      );
  }