Problem with HttpClientInMemoryWebAPI in Tour of Heroes

Question

I've been doing the Tour of Heroes tutorials again since I'm coming off of a 4 month hiatus from Angular. Everything was going fine until I hit the http section. Specifically the HttpClientInMemoryAPI section. From what I've found searching it sounds like its a compatibility issue. I found this article as well as this one and tried reverting to version 0.5.4. I also tried deleting the node_modules directory and doing a npm install (I did make sure the ver for the InMemAPI stayed at 0.5.4 before running install). Most of the other articles I found were geared towards Angular 2 so I didn't spend much time trying those. The error I'm currently getting is:

ERROR in node_modules/angular-in-memory-web-api/http-backend.service.d.ts(2,75): error TS2307: Cannot find module '@angular/http'. node_modules/angular-in-memory-web-api/http-backend.service.d.ts(3,10): error TS2305: Module '"C:/Development/Working/tour-of-heroes/node_modules/rxjs/Observable"' has no exported member 'Observable'. node_modules/angular-in-memory-web-api/http-client-backend.service.d.ts(2,10): error TS2305: Module '"C:/Development/Working/tour-of-heroes/node_modules/rxjs/Observable"' has no exported member 'Observable'. node_modules/angular-in-memory-web-api/http-in-memory-web-api.module.d.ts(2,28): error TS2307: Cannot find module '@angular/http'. node_modules/angular-in-memory-web-api/interfaces.d.ts(1,10): error TS2305: Module '"C:/Development/Working/tour-of-heroes/node_modules/rxjs/Observable"' has no exported member 'Observable'. node_modules/rxjs/Observable.d.ts(1,15): error TS2307: Cannot find module 'rxjs-compat/Observable'.

I hope I've done enough research not to get flamed for asking this, if not please at least point me to a good url as the 2 articles I posted above seem to be the most relevant and recent.

Thank you all, your help is greatly appreciated!

DeborahK DeborahK · Accepted Answer · 2018-11-29T16:42:43

I would not recommend going to an older version of the library if possible. Are you targeting an older version of Angular?

The current version of the InMemoryWebAPI targets Angular v7, so if you are using Angular v7 you should use the current version of the InMemoryWebAPI (v0.7)

Confirm that your package.json does contain @angular/http. This should have been added when your app was created. Mine package.json looks like this:

  "dependencies": {
    "@angular/animations": "~7.0.0",
    "@angular/common": "~7.0.0",
    "@angular/compiler": "~7.0.0",
    "@angular/core": "~7.0.0",
    "@angular/forms": "~7.0.0",
    "@angular/http": "~7.0.0",         // <-- This should be here already
    "@angular/platform-browser": "~7.0.0",
    "@angular/platform-browser-dynamic": "~7.0.0",
    "@angular/router": "~7.0.0",
    // ...

So even though we now use HttpClientModule in the code:

import { HttpClientModule } from '@angular/common/http';

We still pull in @angular/http in the package.json file. (If you use the Angular CLI, it should already put this in for you.)

Problem with HttpClientInMemoryWebAPI in Tour of Heroes

1 Answers