AngularJS 2 : json 파일에서 데이터를 가져 오지 못함

Question

각도 서비스 hero.service.ts에서 json 데이터를 가져 오려고합니다. 가짜 http API inMemoryDataService를 사용할 때 모든 것이 잘 작동하고 in-memory-data.service.ts 파일에서 json 데이터를 가져옵니다. 그러나 실제 json 파일에서 데이터를 가져 오려고하면 작동하지 않으며 브라우저에 'collection not found'오류가 표시됩니다.

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 : 여기

(모든 3 개 개의 파일이 응용 프로그램/폴더에있는) 파일의 내용입니다

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 browser

. 감사!

Answer 1

발견! InMemoryBackendService 및 InMemoryDataService이 main.ts 파일에 사용되어 http.get 메소드에서 호출을 '리디렉션'하는 것 같습니다. 브라우저에서 (3004/응용 프로그램/heroes.json : // localhost를 HTTP)

// 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 
     */ 
    ]);