0

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

Evan Carroll
  • 78,363
  • 46
  • 261
  • 468
RickG
  • 1
  • 1
  • download the working solution provided and compare to your own – danday74 Oct 09 '18 at 09:55
  • Did you simply check out there code and see if it works? I've found that the Angular docs don't quite keep up with the development, especially for Angular 6. Might be that the error is not on your side after all. – AirLancer Oct 09 '18 at 09:56

1 Answers1

0

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);
kkckrnz
  • 56
  • 1
  • 2