error: "Collection 'heroes' not found" when trying to access data in InMemoryDataService

[ejavier2018]

I am stuck at HTTP > Get heroes with HttpClient section of the tutorial This section doesn't seem to be able to retrieve Hero list from my InMemoryDataService.

/** GET heroes from the server */
getHeroes (): Observable<Hero[]> {
  return this.http.get<Hero[]>(this.heroesUrl)
}

The list doesn't display in the browser and when I inspect elements from browser to see error, I see this error:

error: "Collection 'heroes' not found" status: 404 statusText: "Not Found" url: "api/heroes"

I have followed the sequence of importing the HttpClientModule first before HttpHttpClientInMemoryWebApiModule in NgModule but I still get same error. I wonder if anyone is able to tell what I've missed.

I have uploaded my code to this repository: https://github.com/ejavier2018/angular-tour-of-heroes.git

Thanks! Edward

[ejavier2018]

I found that I've missed the {} in InMemoryDataService. :( It worked after I changed return heroes; to return {heroes};

export class InMemoryDataService implements InMemoryDbService{
  createDb(){
    let heroes: Hero[] = [
      { id: 11, name: 'Mr. Nice' },
      { id: 12, name: 'Narco' },
      { id: 13, name: 'Bombasto' },
      { id: 14, name: 'Celeritas' },
      { id: 15, name: 'Magneta' },
      { id: 16, name: 'RubberMan' },
      { id: 17, name: 'Dynama' },
      { id: 18, name: 'Dr IQ' },
      { id: 19, name: 'Magma' },
      { id: 20, name: 'Tornado' }
    ];
    return heroes;    <<---- this should be return {heroes}; 
  }