Угловые 2 потребляют REST api

Question

У меня есть приложение-герои от angular tutorial, и я пытаюсь заставить его использовать REST API. API построен в DRF. Я удалил в памяти поставщиков от app.module.ts и добавил HTTP_PROVIDERS. Вот файл app.module.ts.

import { NgModule }  from '@angular/core'; 
import { BrowserModule } from '@angular/platform-browser'; 
import { FormsModule } from '@angular/forms'; 
import { HttpModule, HTTP_PROVIDERS }  from '@angular/http'; 

import { AppComponent } from './app.component'; 
import { routing }  from './app.routing'; 

import { HeroesComponent }  from './heroes.component'; 
import { DashboardComponent } from './dashboard.component'; 
import { HeroDetailComponent } from './hero-detail.component'; 
import { HeroService }   from './hero.service'; 
import { HeroSearchComponent } from './hero-search.component'; 

@NgModule({ 
    imports: [ 
    BrowserModule, 
    FormsModule, 
    routing, 
    HttpModule 
    ], 
    declarations: [ 
     AppComponent, 
     HeroesComponent, 
     DashboardComponent, 
     HeroDetailComponent, 
     HeroSearchComponent, 
    ], 
    providers: [ 
    HeroService, 
    HTTP_PROVIDERS, 
    ], 
    bootstrap: [ AppComponent ] 
}) 
export class AppModule { 
} 

В hero.service.ts я изменил только URL.

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

import 'rxjs/add/operator/toPromise' 

import { Hero } from './hero' 


@Injectable() 
export class HeroService{ 
    private heroesUrl = 'http://127.0.0.1/api/heroes/heroes/'; // URL to web api 

    constructor(private http: Http){} 

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

    private post(hero: Hero): Promise<Hero> { 
     let headers = new Headers({ 
      'Content-Type': 'application/json' 
     }); 

     return this.http 
      .post(this.heroesUrl, JSON.stringify(hero), {headers: headers}) 
      .toPromise() 
      .then(res => res.json().data) 
      .catch(this.handleError) 
    } 

    private put(hero: Hero): Promise<Hero> { 
     let headers = new Headers(); 
     headers.append('Content-Type', 'application.json'); 

     let url = `${this.heroesUrl}/${hero.id}`; 

     return this.http 
      .put(url, JSON.stringify(hero), {headers: headers}) 
      .toPromise() 
      .then(() => hero) 
      .catch(this.handleError) 
    } 

    delete(hero: Hero): Promise<Response> { 
     let headers = new Headers(); 
     headers.append('Content-Type', 'application/json'); 

     let url = `${this.heroesUrl}/${hero.id}`; 

     return this.http 
      .delete(url, {headers: headers}) 
      .toPromise() 
      .catch(this.handleError) 
    } 

    save(hero: Hero): Promise<Hero> { 
     if (hero.id) { 
      return this.put(hero); 
     } else { 
      return this.post(hero); 
     } 
    } 

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

    getHero(id: number): Promise<Hero> { 
     return this.getHeroes().then(heroes => heroes.find(hero => hero.id === id)) 
    } 
} 

Насколько я могу сказать от Google инструментов разработчика Chrome я получил ответ от Джанго без проблем, что так всегда, но его не показывает на этой странице. Ошибок в консоли также нет.

заголовки из запроса API:

Request URL:http://127.0.0.1/api/heroes/heroes/ 
Request Method:GET 
Status Code:200 OK 
Remote Address:127.0.0.1:80 
Allow:GET, POST, HEAD, OPTIONS 
Connection:keep-alive 
Content-Type:application/json 
Date:Mon, 22 Aug 2016 11:01:39 GMT 
Server:nginx/1.4.6 (Ubuntu) 
Transfer-Encoding:chunked 
Vary:Accept, Cookie 
X-Frame-Options:SAMEORIGIN 

Ответ:

[{"name":"noname","id":1},{"name":"noname3","id":2},{"name":"noname3","id":3},{"name":"noname2","id":4},{"name":"noname2","id":5},{"name":"noname2","id":6}] 

Не знаю, если это важно или нет, но вот мой Nginx конф

server { 

    listen 80; 
    server_name team_up.org; 
    charset utf-8; 
    root /opt/team_up/team_up-web-client/; 
    index index.html; 

    location/{ 
     try_files $uri$args $uri$args/ $uri/ /index.html =404; 
    } 

} 

Answer 1

удалить HTTP_PROVIDERS из деклараций. HTTP_PROVIDERS устарели и не нужны при импорте HttpModule.