Angular2 HttpClientがRest APIを使用する

Question

Angular2を使用して、私はチュートリアル（The Hero Editor）に示されている例を開発しました。デフォルトでは

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

、それが同じ例で作成されたHTTPクライアントを介してアクセス可能なデータを自己のインメモリ・ストアを呼び出します。

これらはすべてlocalhost：3000（デフォルトで指定されたポート）で完全に実行されます。私は角度サービスからデータを取得するために持っているURLを切り替えると、それにも関わらず

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

：このチュートリアルを使用して8080：今はlocalhostに完全に実行するJavaでの残りのAPIサーバーのIを開発した

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) 

完全なHTTPレスポンス：

、私は次のエラーを取得します

しかし、私はURLをチェックし、それは完全に動作します。

サービスに何か他のことを伝えなければなりませんか？ これはすべてが行われるべきポイントです。

//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 

編集：コメントに答えるため、私はアプリケーションモジュールのコードの下に示します。ちなみに、それは質問の冒頭でリンクしているHero Editor Angularチュートリアルのapp.module.tsの正確なコピーです。

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 { } 

ヘッダーにいくつかの情報を追加する例をいくつか見てきました。それは必要ですか？セキュリティに関する問題？

Answer 1

私は解決策を得ました。

@ AJT_82は私に主要な手がかりを与えました。

アプリモジュール（app.module.js）ファイルで言われたように、私のアプリはInMemoryストレージシステムからデータを取得していました。私はこの行をコメントし

：8080 /英雄のREST API：

//InMemoryWebApiModule.forRoot(InMemoryDataService) 

それだけでローカルホストに提供されたURLからデータを取得するために始めました。

ご迷惑をおかけして申し訳ございません。