Angular2 HttpClient, um Rest API zu verbrauchen

Question

Mit Angular2 habe ich das Beispiel aus dem Tutorial (The Hero Editor) entwickelt.

https://angular.io/tutorial/toh-pt6

standardmäßig nennt es einen Selbst In-Memory-Speicher mit den Daten, die zugänglich durch den HTTP-Client im selben Beispiel erstellt ist.

All dies läuft perfekt in localhost: 3000 (der Port standardmäßig angegeben).

Jetzt habe ich eine Pause api-Server in Java entwickelt, die perfekt in localhost läuft:

http://spring.io/guides/gs/rest-service/

Trotzdem, wenn ich schalte die URL der Angular-Dienst die Daten zu erhalten, hat von: 8080 dieses Tutorial mit , bekomme ich folgende Fehlermeldung:

ERROR Error: Uncaught (in promise): Response with status: 404 Not Found for URL: http://localhost:8080/heroes 
at resolvePromise (zone.js:769) 
at resolvePromise (zone.js:740) 
at zone.js:817 
at ZoneDelegate.invokeTask (zone.js:424) 
at Object.onInvokeTask (ng_zone.ts:253) 
at ZoneDelegate.invokeTask (zone.js:423) 
at Zone.runTask (zone.js:191) 
at drainMicroTaskQueue (zone.js:584) 
at XMLHttpRequest.ZoneTask.invoke (zone.js:490) 

komplette hTTP-Antwort:

Aber ich überprüfe die URL und es funktioniert perfekt.

Muss ich dem Service noch etwas anderes mitteilen? Dies ist der Punkt, wo alles getan werden sollte.

//private heroesUrl = 'api/heroes'; // Old URL (to get the own data storage) 
private heroesUrl = `http://localhost:8080/heroes`; // New URL to get the data from working local Rest API running in other port. 

constructor (private http: Http) { } 

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

Edit: Beantworten eines Kommentars, zeige ich unten den App-Modul-Code. Übrigens, es ist eine genaue Kopie der app.module.ts aus dem Hero Editor Angular Tutorial ich am Anfang der Frage verknüpft.

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

import { AppRoutingModule }  from './app-routing.module'; 

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

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


@NgModule({ 
    imports:  [ 
    BrowserModule, 
    FormsModule, 
    HttpModule, 
    InMemoryWebApiModule.forRoot(InMemoryDataService), 
    AppRoutingModule 
    ], 
    declarations: [ 
    AppComponent, 
    HeroDetailComponent, 
    HeroesComponent, 
    DashboardComponent, 
    HeroSearchComponent 
    ], 
    providers: [ HeroService ], 
    bootstrap: [ AppComponent ] 
}) 
export class AppModule { } 

Irgendeine Idee jemand? Ich habe einige Beispiele gesehen, in denen sie den Kopfzeilen weitere Informationen hinzufügen. Ist das notwendig? Irgendein Problem bezüglich der Sicherheit?

Answer 1

Ich habe die Lösung.

@ AJT_82 gab mir den Hauptschlüssel.

Wie in der Datei des App-Moduls (app.module.js) gesagt wurde, nahm meine App die Daten von einem InMemory-Speichersystem.

Wenn ich diese Zeile kommentiert:

//InMemoryWebApiModule.forRoot(InMemoryDataService) 

es gerade erst begonnen, die Daten aus der URL auf den lokalen Host zur Verfügung stellt: 8080/Helden REST-API.

Es tut uns leid, dass Sie Ihre Zeit verschwenden.