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.

My test code is available here : https://github.com/MarcBrillault/tourOfHeroes/tree/StackOverflow

Answer 1

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

First, downgraded to angular-in-memory-web-api@0.5.4. 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.