URL 找不到 Angular2 404：http://localhost/WebApi2/api/hero

Question

我已经在https://angular.io/docs/ts/latest/tutorial/toh-pt6.html 上尝试了 http Angular 2 和 TypeScript 示例，它可以工作。 https://embed.plnkr.co/?show=preview

更新代码以使用外部 Web Api

private headers = new Headers({'Content-Type': 'application/json'});
// private heroesUrl = 'api/heroes';  // URL to web api
private heroesUrl = 'http://localhost/WebApi2/api/hero';  // URL to web api

constructor(private http: Http) { }

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

现在我想更新它以使用外部 Web Api2 并得到以下错误。

例外：未捕获（承诺中）：响应状态：404 未找到 URL：http://localhost/WebApi2/api/hero" 发生错误 Object { _body: Object, status: 404, ok: false, statusText: "Not Found", headers: Object, type: null, url: "http://localhost/WebApi2/api/hero" }

我已经看过这个解决方案，但它对我不起作用。 Angular2 http get request results into 404

导入错误

import { Injectable }    from '@angular/core';
import { Headers, Http } from '@angular/http';
import { JSONP_PROVIDERS } from '@angular/http';

Http/Http/node_modules/@angular/http/index"' 没有导出的成员 'JSONP_PROVIDERS'。

谁能指出我正确的方向，例如从 Angular2 调用 Web Api2？

Answer 1

我遇到了同样的问题，经过一些令人沮丧的研究后，感谢this，我解决了 404 错误。导入顺序很重要。
希望它可以帮助某人。

Answer 2

在我登陆@mp-loki 的帖子之前，我个人为此奋斗了两个多星期——Angular 2 HTTP GET 404 Not Found for URL——在 stackoverflow 上：因此，功劳真的归于他（或她，为了安全起见）。

在 Angular 设置页面 (https://angular.io/docs/ts/latest/guide/setup.html) 上，您会看到这句话：“安装 Angular QuickStart 种子，以便在您的机器上进行更快、更高效的开发。”

您可能按照该设置页面上的说明进行操作，因此您的项目基于 Angular QuickStart Seed。

这并没有错，只是Angular给出的教程使用了一个in-memory web api，并且拦截了对另一个web api的所有请求，无论你是否直接调用in -memory web api 是否来自您的项目代码。

要向不同的 web api 发出请求，您必须断开与内存中 web api 的连接。如何？只需按照以下步骤操作：

1. 在您的项目根目录中，展开node_modules并删除angular-in-memory-web-api目录
2. 仍然在您的项目根目录中，打开 package.json 文件并从依赖项列表中删除以下行："angular-in-memory-web-api": "~0.2.4",
3. 在src/app目录下，如果存在以下文件，或者与内存相关的文件，请删除：in-memory-data.service.ts、in-memory-data.service.js、in-memory-data.service.js.map
4. 打开 src/app/app.module.ts 并从导入列表中删除以下内容：import { InMemoryWebApiModule } from 'angular-in-memory-web-api'; 和 import { InMemoryDataService } from './in-memory-data.service';
5. 还是在src/app/app.module.ts中，从@NgModule注解中去掉这行代码：InMemoryWebApiModule.forRoot(InMemoryDataService),
6. 在这个阶段，您应该能够向您的 web api 发出请求，但返回的对象很可能没有 data 属性，因此您将其从服务文件中删除：替换：

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

与

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

我希望这会有所帮助。