Invalid provider Error while consuming webapi using http provider
<p>I am trying to consume a webapi service in angular2/http component. For learning purpose I want to consume the public <a href="https://restcountries.eu/rest/v1/region/Oceania" rel="nofollow">restapi service</a> 
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.   </p>

<p>I have created a plunkr for testing this. <a href="https://plnkr.co/edit/TiTM8worfVpJfJlGGsWh" rel="nofollow">Plunker URL</a>. </p>

<p>I am running into a issue like below in the chrome browser</p>

<pre><code>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)
</code></pre>

<p>any ideas what is the issue? what I am missing?</p>