angular 2 consume REST api - rest

Question

I have the heroes app from angular tutorial and i am trying to make it consume REST API. API is build in DRF. I removed the in memory providers from app.module.ts and added HTTP_PROVIDERS. Here is the app.module.ts file now.
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 {
}
In hero.service.ts i changed just the 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))
}
}
As far as i can tell from google chrome developer tools i got the answer from django with no problem what so ever but its not showing on the page.
No errors in console also.
Headers from api request:
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
Response:
[{"name":"noname","id":1},{"name":"noname3","id":2},{"name":"noname3","id":3},{"name":"noname2","id":4},{"name":"noname2","id":5},{"name":"noname2","id":6}]
Do not know if it is important or not but here are my nginx conf
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

remove HTTP_PROVIDERS from declarations. HTTP_PROVIDERS are deprecated and aren't needed when importing HttpModule.