Angular Tour of Heroes : problems with inMemory Web API

Question

I'm following the famous Angular tutorial, Tour of Heroes, but I'm struggling with one step.

On the sixth course, HTTP, we are using a tool made to mimick API calls to an API.

I think I followed all the steps, up to this point where it is stated the folliwing :

Refresh the browser. The hero data should successfully load from the mock server.

But I may have missed something : the http calls all give http 500 headers with the error being Object(...) is not a function.

Have I missed something about creating a route ? It seems odd to me that inMemory wep API does not seem to need a route.

If the server is returning a 500, it sounds like the error may lie in your server side code, not your client side angular code — user184994
I have literally NO server side code, because as I understod it, inMemory Wep API is made to capture these calls ad answer them (With this configuration file : github.com/MarcBrillault/tourOfHeroes/blob/StackOverflow/src/…) — Marc Brillault

R. Richards R. Richards · Accepted Answer · 2018-03-24T23:06:47

Here is what I had to do in order to get your code to run after pulling it from your repo.

First, downgraded to [email protected]. This means changing the version in the package.json to ^0.5.4 and running npm i.

"angular-in-memory-web-api": "^0.5.4",

I have heard here and there that some were having trouble with the 0.6.0 version of angular-in-memory-web-api, so this was the first step I tried.

According to this, angular-in-memory-web-api version 0.6.0 requires Angular "^6.0.0-rc.0" and RxJS "^6.0.0-beta.1".

So, the downgrade should get you moving forward with the tutorial. Feel free to move to the Angular and RxJS versions above when you are ready.

Then, I needed to make these changes in the hero.service.ts.

Added this import:

import { of } from 'rxjs/observable/of';

Change this:

getHero(id: number): Observable<Hero> {
    return Observable.of({id: 1, name: 'test'});
}

to this:

getHero(id: number): Observable<Hero> {
    return of({id: 1, name: 'test'});
}

All was working after this. Hope this helps you out.