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

Angular2 404 Not Found for URL: http://localhost/WebApi2/api/hero

提问by mark s

I have tried the http Angular 2 and TypeScript example on https://angular.io/docs/ts/latest/tutorial/toh-pt6.htmlit works. https://embed.plnkr.co/?show=preview

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

Updated code to use external Web Api

更新代码以使用外部 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);
}

Now I want to update it to use an external Web Api2 and get the error below.

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

EXCEPTION: Uncaught (in promise): Response with status: 404 Not Found for URL: http://localhost/WebApi2/api/hero" An error occurred Object { _body: Object, status: 404, ok: false, statusText: "Not Found", headers: Object, type: null, url: "http://localhost/WebApi2/api/hero" }

例外：未捕获（承诺）：响应状态：404 未找到 URL：http://localhost/WebApi2/api/hero“发生错误对象 { _body: Object, status: 404, ok: false, statusText:”未找到”，标题：对象，类型：空，网址：“ http://localhost/WebApi2/api/hero”}

I have looked at this solution but it does not work for me. Angular2 http get request results into 404

我看过这个解决方案，但它对我不起作用。 Angular2 http 获取请求结果为 404

Error on import

导入时出错

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

Http/Http/node_modules/@angular/http/index"' has no exported member 'JSONP_PROVIDERS'.

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

Could anyone point me in the correct direction, example of calling Web Api2 from Angular2?

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

回答by mtchuente

I personnaly fought with this for over two weeks before I landed on a post by @mp-loki -- Angular 2 HTTP GET 404 Not Found for URL-- here on stackoverflow: The credit therefore really goes to him (or her, to be safe).

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

On the Angular setup page (https://angular.io/docs/ts/latest/guide/setup.html), you are greeted with this sentence: "Install the Angular QuickStart seed for faster, more efficient development on your machine."

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

You probably followed the instructions on that setup page and your project is therefore based on the Angular QuickStart Seed.

您可能遵循了该设置页面上的说明，因此您的项目基于Angular QuickStart Seed。

There's nothing wrong with that, only that the tutorial given by Angular uses an in-memory web api, and that intercepts all requests to another web api, whether you make a direct call to the in-memory web api from your project code or not.

这没有任何问题，只是 Angular 给出的教程使用内存中的 web api，并且拦截了对另一个 web api 的所有请求，无论您是否从项目代码中直接调用内存中的 web api .

To make requests to a different web api, you therefore have to disconnect from the in-memory web api. How? Just follow the steps below:

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

1. In your project root directory, expand node_modulesand delete the angular-in-memory-web-apidirectory
2. Still in your project root directory, open the package.jsonfile and remove the following line from the list of dependencies: "angular-in-memory-web-api": "~0.2.4",
3. In the src/appdirectory, if the following files exit, or any files related to in-memory, delete them: in-memory-data.service.ts, in-memory-data.service.js, and in-memory-data.service.js.map
4. Open src/app/app.module.tsand remove the following from the list of imports: import { InMemoryWebApiModule } from 'angular-in-memory-web-api';, and import { InMemoryDataService } from './in-memory-data.service';
5. Still in src/app/app.module.ts, remove this line of code from the @NgModule annotation: InMemoryWebApiModule.forRoot(InMemoryDataService),
6. At this stage you should be able to make requests to your web api, but most likely the object returned doesn't have a dataproperty, so you remove it from your service file: Replace:

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().data as Hero[])
               .catch(this.handleError);
}

with

和

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

I hope this helps.

我希望这有帮助。

回答by esseara

I had the same issue, after some frustrating researches I solved the 404 error thanks to this. The order of imports matters.
Hope it helps someone.

我有同样的问题，经过一番折腾研究我解决了404个错误感谢这个。进口的顺序很重要。
希望它可以帮助某人。