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并得到以下错误。

EXCEPTION：未捕获（在承诺中）：状态为响应：网址为404：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

我个人用这个战斗了两个多星期才登陆@ 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提供的教程使用了内存中的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和{{ 1}}
打开 src / app / app.module.ts 并从导入列表中删除以下内容：in-memory-data.service.js.map和import { InMemoryWebApiModule } from 'angular-in-memory-web-api';
仍然在 src / app / app.module.ts 中，从@NgModule注释中删除此行代码：import { InMemoryDataService } from './in-memory-data.service';
在此阶段，您应该能够向您的网络API发出请求，但很可能返回的对象没有 InMemoryWebApiModule.forRoot(InMemoryDataService), 属性，因此您将其从服务中删除文件：替换：

data

带

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

我希望这会有所帮助。

Answer 2

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

找不到针对URL的Angular2 404：http：// localhost / WebApi2 / api / hero

2 个答案: