AngularJS 2 : Getting data from json file not working

Question

I am trying to get the json data from an Angular service hero.service.ts. When using the fake http API inMemoryDataService, everything works fine and I am getting the json data from the in-memory-data.service.ts file. But when I try to get the data from a real json file, it does not work and I am getting an error 'collection not found' in the browser.

Here are the files contents (all 3 files are located in the app/ folder):

hero.service.ts :

import { Injectable } from '@angular/core';
import { Headers, Http , Response} from '@angular/http';

import 'rxjs/add/operator/toPromise';

import { Hero } from './hero';

@Injectable()
export class HeroService {

    private heroesUrl = 'app/fakeListOfHeroes';  // URL to web api
    //private heroesUrl = 'app/heroes.json'; // URL to JSON file

    constructor(private http: Http) { }

    getHeroes(): Promise<Hero[]>
    {
        return this.http.get(this.heroesUrl)
                .toPromise()
                .then(response => response.json().data)
                .catch(this.handleError);
    }

    private handleError(error: any)
    {
        console.error('An error occurred', error);
        return Promise.reject(error.message || error);
    }
}

hero.service.ts :

    export class InMemoryDataService {
      createDb() {
        let fakeListOfHeroes = [
        {id: 11, name: 'Mr. Nice'},
        {id: 12, name: 'Narco'},
        {id: 13, name: 'Bombasto'},
        {id: 14, name: 'Celeritas'},
        {id: 15, name: 'Magneta'},
        {id: 16, name: 'RubberMan'},
        {id: 17, name: 'Dynama'},
        {id: 18, name: 'Dr IQ'},
        {id: 19, name: 'Magma'},
        {id: 20, name: 'Tornado'}
        ];
        return {fakeListOfHeroes};
      }
  }

heroes.json :

    {
        "data": [{
            "id": 11,
            "name": "Mr. Nice"
        }, {
            "id": 12,
            "name": "Narco"
        }, {
            "id": 13,
            "name": "Bombasto"
        }, {
            "id": 14,
            "name": "Celeritas"
        }, {
            "id": 15,
            "name": "Magneta"
        }, {
            "id": 16,
            "name": "RubberMan"
        }, {
            "id": 17,
            "name": "Dynama"
        }, {
            "id": 18,
            "name": "Dr IQ"
        }, {
            "id": 19,
            "name": "Magma"
        }, {
            "id": 20,
            "name": "Tornado"
        }]
    }

Error in the browser:

error in browser

Any help would be appreciated. Thanks!

Answer 1

Found it ! It was due to the InMemoryBackendService and InMemoryDataService used in main.ts file, that seem to 'redirect' the calls from http.get method. Commenting those lines from main.ts file resolved the issue :

    // Imports for loading & configuring the in-memory web api
    import { XHRBackend } from '@angular/http';

    //import { InMemoryBackendService, SEED_DATA } from 'angular2-in-memory-web-api';
    //import { InMemoryDataService }               from './in-memory-data.service';

    // The usual bootstrapping imports
    import { bootstrap }      from '@angular/platform-browser-dynamic';
    import { HTTP_PROVIDERS } from '@angular/http';

    import { AppComponent }         from './app.component';
    import { appRouterProviders }   from './app.routes';

    bootstrap(AppComponent, [
        appRouterProviders,
        HTTP_PROVIDERS
        /*,
        { provide: XHRBackend, useClass: InMemoryBackendService }, // in-mem server
        { provide: SEED_DATA, useClass: InMemoryDataService }      // in-mem server data
        */
    ]);