Angular 17 in-memory-web-api cannot find the route to the in-memory data?

I am new to Angular. I followed the Tour of Hero tutorial to the step of using httpClient to retrieve data from the in-memory-web-api. I got an error of 'Unexpected token '<', "<!DOCTYPE "... is not valid JSON'. status code is: 200. I inspect the network traffic on the developer tool and noticed that the URL is : localhost/4200. The response is the entire html of the page. It should be just the json data. I also got the following run time error in the terminal : ERROR RuntimeError: NG04002: Cannot match any routes. URL Segment: 'api/heroes'

what am I missing? I did not define any routes.

The app.config.ts is the following:

    export const appConfig: ApplicationConfig = {
      providers: [
        provideRouter(routes),
        provideClientHydration(),
        importProvidersFrom(HttpClientModule),
        //provideHttpClient(withFetch()),
        importProvidersFrom(HttpClientInMemoryWebApiModule.forRoot(InMemoryDataService))
      ]
      
    };

hero.service.ts:

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

    import { Hero } from './hero';
    import { HttpClient } from '@angular/common/http';
    import {
      Observable,
      catchError,
      tap,
    } from 'rxjs';
    
    @Injectable({
      providedIn: 'root'
    })
    export class HeroService {
      private heroesURL = 'api/heroes';
      constructor(private http: HttpClient) { }
    
      getHeroes() : Observable<Hero[]>
      {
        return this.http.get<Hero[]>(this.heroesURL);
      }
    }
    
    hero.ts:[enter image description here][1]
    export interface Hero {
        id: number;
        name: string;
    }