Invalid provider Error while consuming webapi using http provider

问题

I am trying to consume a webapi service in angular2/http component. For learning purpose I want to consume the public restapi service which 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.

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

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?

回答1:

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';

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

I also added moduleId property to annotation of AppComponent:

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

Otherwise you'll receive an 404 error.

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

来源：https://stackoverflow.com/questions/37868080/invalid-provider-error-while-consuming-webapi-using-http-provider

标签

angular

angular2-services