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

问题描述

我正在尝试在 angular2/http 组件中使用 webapi 服务.出于学习目的，我想使用公共 restapi 服务它返回国家/地区列表.我编写了一个 angular2 组件，它会调用 CountryService 组件来使用实际的 restapi 服务，然后迭代列表并向用户显示.

I am trying to consume a webapi service in angular2/http component. For learning purpose I want to consume the public restapi servicewhich returns the list of countries. I have written a angular2 component which would invoke the CountryService component to consume the actual restapi service and then iterate the list and dispaly to the user.

我创建了一个 plunkr 来测试这个.Plunker URL.

I have created a plunkr for testing this. Plunker URL.

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

I am running into a issue like below in the chrome browser

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)

任何想法是什么问题?我错过了什么?

any ideas what is the issue? what I am missing?

推荐答案

您正在使用 angular2 的测试版，但试图像 RC 一样导入:

You're using beta version of angular2 but trying to import like RC:

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

对于测试版，它应该是:

For beta version it should be:

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

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

See the updated plunkr https://plnkr.co/edit/VbLby6wa3RTW6U0m4FPv?p=preview

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

I also added moduleId property to annotation of AppComponent:

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

否则您会收到 404 错误.

Otherwise you'll receive an 404 error.

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

See more information about component relative paths in Angular 2 at this page http://blog.thoughtram.io/angular/2016/06/08/component-relative-paths-in-angular-2.html

这篇关于使用 http 提供程序使用 webapi 时出现无效提供程序错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！