Angular 6 - Tour of Heroes - getHero - Error 404

Question

I'm following the Angular 6 Tour of Heroes tutorial from https://angular.io/tutorial/toh-pt6 and all works well. The in-memory service works for the Dashboard, and the list of heroes displays fine.

But when a hero is clicked and the hero detail's component getHero() method gets executed, even though the "id" parameter gets passed with the correct value, no hero object gets returned by the in-memory service, and the FireFox developer tools console shows a response with error 404 "not found".

I've compared my code to the one posted on the tutorial pages until making them the same. I've searched the web, read and tried several suggested fixes, with no positive results.

I'm pretty sure I've followed the tutorial step by step, but at this point I need some help. Why calling this method to get one hero by id fails, and the method that retrieves all heroes works fine? If anyone passed through the same experience and could share some light on this 404 error, I'd greatly appreciate it. TIA

Best regards,

Rick

Answer 1

I've encountered the same problem. I wish someone could provide more elegant solution but here's how I fixed it.

replace this block:

return of(HEROES.find(hero => {
      hero.id === id;
    }))

with this block:

let thisHero;
    for (let i = 0; i < HEROES.length; i++) {
      if (HEROES[i].id === id) {
        thisHero = HEROES[i]
      }
    }
return of(thisHero);