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

Posted 2023-03-13

【中文标题】URL 找不到 Angular2 404：http://localhost/WebApi2/api/hero

【英文标题】：Angular2 404 Not Found for URL: http://localhost/WebApi2/api/hero

【发布时间】：2017-07-08 08:51:24

【问题描述】：

我已经在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？

【问题讨论】：

服务器上不存在该资源。所以，要么你使用了错误的 URL，要么是服务器问题，这与 Angular 无关。

您提供的 Plunker 链接不包含您的任何代码。将其更新为绝对链接

Angular 2 本身是否有 Promise 方法，或者您正在尝试使用 ES6 (TypeScript) Promise？

资源确实存在我已经在IIS中测试过了。

【参考方案1】：

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

【讨论】：

天哪，谢谢！有完全相同的问题。他们真的应该更新文档。

确实很有帮助。只需使用反引号 => ` 而不是单引号就可以了。非常感谢~

【参考方案2】：

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

在 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 的连接。如何？只需按照以下步骤操作：

在您的项目根目录中，展开node_modules并删除angular-in-memory-web-api目录 仍然在您的项目根目录中，打开 package.json 文件并从依赖项列表中删除以下行："angular-in-memory-web-api": "~0.2.4", 在src/app目录下，如果存在以下文件，或者与内存相关的文件，请删除：in-memory-data.service.ts、in-memory-data.service.js、in-memory-data.service.js.map 打开 src/app/app.module.ts 并从导入列表中删除以下内容：import InMemoryWebApiModule from 'angular-in-memory-web-api'; 和 import InMemoryDataService from './in-memory-data.service'; 还是在src/app/app.module.ts中，从@NgModule注解中去掉这行代码：InMemoryWebApiModule.forRoot(InMemoryDataService), 在这个阶段，您应该能够向您的 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);

我希望这会有所帮助。

【讨论】：

感谢 mtchuente 的所有帮助。

谢谢美人，你好！