Http get 404 Not Found for URL: null

Question

i have tried sample application like Tour of heroes.

am trying to convert service cal to http get(InMemoryDbService) like 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);
    }
}

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;
    }
}

throws below errors:

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() doesn't look like the original..

It returns an object within the "collections" ..

return {heroes};

I guess that lib needs this object to build those 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