Http get 404 Not Found for URL: null

Question

I tried an example application such as Tour of heroes.

I am trying to convert cal service to http get (InMemoryDbService) as below

hero.service.ts

import {Injectable} from '@angular/core'; import {HttpModule, Headers, Http} from '@angular/http'; import 'rxjs/add/operator/toPromise'; import {Hero} from './hero'; @Injectable() export class HeroService { private heroesUrl = 'app/heroes'; constructor(private http : Http) { } // working code //getHeroes(): Promise<Hero[]> { // return Promise.resolve(HEROS); //} getHeroes(): Promise<Hero[]> { debugger; return this.http.get(this.heroesUrl).toPromise().then(responce => responce.json().data as Hero[]).catch(this.handleError); } private handleError(error: any): Promise<any> { console.error('An error occurred', error); // for demo purposes only return Promise.reject(error.message || error); } } 

<strong> in memory-data.service.ts

  import {InMemoryDbService} from 'angular-in-memory-web-api'; export class InMemoryDataService implements InMemoryDbService { createDb() { let heroes = [ { id: 1, name: 'Thulasi' }, { id: 2, name: 'Bala' }, { id: 3, name: 'Thulasi' }, { id: 4, name: 'Thulasi' }, { id: 5, name: 'Thulasi' }, { id: 6, name: 'Thulasi' }, { id: 7, name: 'Thulasi' }, { id: 8, name: 'Thulasi' }, { id: 9, name: 'Thulasi' }, { id: 10, name: 'Thulasi' }, { id: 11, name: 'Thulasi' } ]; return heroes; } } 

causes errors below:

 hero-service.ts:25 An error occurred Response_body: Object headers: Header sok: false status: 404 statusText: "Not Found" type: null url: null __proto__: Body HeroService.handleError @ hero-service.ts:25 ZoneDelegate.invoke @ zone.js:232 onInvoke @ core.umd.js:5975 ZoneDelegate.invoke @ zone.js:231 Zone.run @ zone.js:114 (anonymous function) @ zone.js:502 ZoneDelegate.invokeTask @ zone.js:265 onInvokeTask @ core.umd.js:5966 ZoneDelegate.invokeTask @ zone.js:264 Zone.runTask @ zone.js:154 drainMicroTaskQueue @ zone.js:401 ZoneTask.invoke @ zone.js:339 core.umd.js:2837 EXCEPTION: Uncaught (in promise): Response with status: 404 Not Found for URL: null 

Answer 1

One thing I see is your createDb() not like the original.

It returns an object inside "collections".

return {heroes};

I assume lib needs this object to create these urls.

Docs: https://github.com/angular/in-memory-web-api

Hero-Tour: https://angular.io/docs/ts/latest/guide/server-communication.html#!#appendix-tour-of-heroes-in-memory-server