title: Invalid provider Error while consuming webapi using http provider
body: <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>