本文介绍了使用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.

我已经创建了一个测试该插件的工具. 柱塞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?

推荐答案

您使用的是beta2版本的angular2,但尝试像RC那样导入:

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

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

对于Beta版本,它应该是:

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时,无效的提供程序错误的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

07-23 10:09
查看更多