Aufruf von REST api aus angular2

Ich habe das angular2 heroies Tutorial https://angular.io/docs/ts/latest/tutorial/ abgeschlossen und nun versuche ich eine RESTApi aufzurufen, die ich mit Node, Postgresql und Express erstellt habe.Aufruf von REST api aus angular2

...

export class HeroService{ 

    private heroesUrl = 'http://192.168.4.13:3000/api/boxes'; //URL til api 
    private headers = new Headers({'Content-Type': 'application/json'}); 
    constructor(private http: Http) {} 

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

...

Der Browser-Konsole zeigt:

Der angular2 Code Aufruf der API wie folgt aussieht

ist ein Fehler aufgetreten Antwort {_body : Objekt, Status: 404, ok: false, statusText: "Not Found", Header: Kopfzeilen ...} AUSNAHME: Uncaught (in Versprechung): Antwort mit Status: 404 Not F ound für URL: null

Picture from REST API

Und ich kann meine API isen't genannt werden sehen, dass. Irgendwelche Ideen, was ich verpasse?

Mit freundlichen Grüßen.

Quelle

2016-12-12 Tony

Die Fehlermeldung schlägt vor, dass Sie die URL falsch erhalten haben, d. H. Es gibt '404' zurück. Wenn Sie versuchen, '.json()' auf der 'response' zu nennen, wird es fehlschlagen, weil der Inhalt nicht JSON ist. Wie lautet die API-URL, die Sie aufrufen möchten? Wie haben Sie diese API auf der Serverseite definiert? –

Leider ist die API nicht öffentlich verfügbar, aber ich habe meinen Beitrag mit einem Bild aktualisiert, so dass Sie die Struktur des Ergebnisses aus der API sehen können. – Tony

Das könnte dumm sein, aber haben Sie versucht, den 'http: //' Teil von der URL zu entfernen? Sie können auch die Browserkonsole öffnen, die Registerkarte "Netzwerk" auswählen und die Seite aktualisieren, von der Sie erwarten, dass sie aufgerufen wird. Das könnte helfen, das Problem besser zu verstehen. –

ich figurd darauf hin, dass ich diese Zeilen zu entfernen, die für das Backend aufgerufen werden:

// Imports for faking the http service - in-memory web api 
import { InMemoryWebApiModule } from 'angular-in-memory-web-api'; 
import { InMemoryDataService } from './in-memory-data.service';

Ich dachte, dass Angular2 sie würde ignorieren, wenn sie nicht verwendet werden, aber die den neuen Backend-API nicht verursacht sein namens.

Quelle

2016-12-12 13:31:37 Tony

Aufruf von REST api aus angular2

Antwort

Verwandte Themen