使用 http 提供程序使用 webapi 时出现无效的提供程序错误

Question

我正在尝试使用 angular2/http 组件中的 webapi 服务。出于学习目的，我想消费 public restapi service returns 国家列表。我编写了一个 angular2 组件，它会调用 CountryService 组件来使用实际的 restapi 服务，然后迭代列表并显示给用户。

我创建了一个 plunkr 来测试它。 Plunker URL。

我运行在 chrome 浏览器中遇到如下问题

angular2.dev.js:24821 Error: Uncaught (in promise): Failed to load appcomponent.html
at resolvePromise (angular2-polyfills.js:564)
at angular2-polyfills.js:600
at ZoneDelegate.invokeTask (angular2-polyfills.js:382)
at Object.onInvokeTask (angular2.dev.js:2177)
at ZoneDelegate.invokeTask (angular2-polyfills.js:381)
at Zone.runTask (angular2-polyfills.js:282)
at drainMicroTaskQueue (angular2-polyfills.js:500)
at XMLHttpRequest.ZoneTask.invoke (angular2-polyfills.js:452)

任何想法是什么问题？我缺少什么？

Answer 1

您正在使用 angular2 的 beta 版本，但尝试像 RC 一样导入：

import {bootstrap} from '@angular/platform-browser-dynamic';

对于测试版，它应该是：

import {bootstrap} from 'angular2/platform/browser';

查看更新的 plunkr https://plnkr.co/edit/VbLby6wa3RTW6U0m4FPv?p=preview

我还在 AppComponent 的注释中添加了 moduleId 属性:

@Component({
    moduleId: __moduleName, <== this line
    selector: 'my-app',
    templateUrl: 'appcomponent.html',
    providers: [CountryService]
})

否则您将收到 404 错误。

在本页 Angular2 中查看有关组件相对路径的更多信息 http://blog.thoughtram.io/angular/2016/06/08/component-relative-paths-in-angular-2.html

使用 http 提供程序使用 webapi 时出现无效的提供程序错误

Invalid provider Error while consuming webapi using http provider

angular

angular2-services