Angular2 HttpClient使用Rest API

Question

使用Angular2，我已经开发了教程（英雄编辑器）中给出的示例。

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

默认情况下，它使用可在同一示例中创建的Http Client访问的数据调用自存储器存储。

所有这些都在localhost：3000（默认情况下给出的端口）中完美运行。

现在我已经用Java开发了一个rest api服务器，它使用本教程在localhost：8080中完美运行：

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

然而，当我切换Angular服务必须从中获取数据的URL时，我收到以下错误：

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响应：

但我检查了网址并且效果很好。

我是否必须告诉其他任何服务？ 这是应该做的一切。

//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模块（app.module.js）文件中所说，我的应用程序正在从InMemory存储系统中获取数据。

当我评论这一行时：

//InMemoryWebApiModule.forRoot(InMemoryDataService)

它刚刚开始从提供给localhost的URL中获取数据：8080 / heroes Rest API。

很抱歉让你浪费时间。