title: Injection error: Cannot resolve all parameters
body: <p>I'm getting this error when trying to inject the <code>Http</code> service into my <code>PanelsService</code>.</p>
  
  <pre><code>import {Component} from 'angular2/core';
  import {Http} from 'angular2/http';
  
  export class PanelsService {
  
    constructor(public http:Http) { }
  
    getPanelFilters() {
      var url = '../../data/panelFilters/' + 13677 + '.json'
  
      return this.http.get(url)
    }
  
  }
  </code></pre>
  
  <p>I'm attempting to access the <code>PanelsService</code> from my <code>SidebarComponent</code>:</p>
  
  <pre><code>import {PanelsService} from '../panels/panels.service';
  
  @Component({
    ....
    providers: [PanelsService]
  })
  
  export class SidebarComponent implements OnInit {
  
    constructor(public panelsService:PanelsService) { }
  
    ngOnInit() {
      console.log('I am the sidebar component');
    }
  
  }
  </code></pre>
  
  <p>It should be noted that my <code>tsconfig.json</code> also has the lines:</p>
  
  <pre><code>"emitDecoratorMetadata": true,
  "experimentalDecorators": true,
  </code></pre>
  
  <p>I've tried using <code>@Injectable</code> as demonstrated <a href="http://blog.thoughtram.io/angular/2015/09/17/resolve-service-dependencies-in-angular-2.html" rel="noreferrer">here</a> but  when I decorate my class with <code>@Injectable()</code> I get an error in the console:</p>
  
  <p><a href="https://i.stack.imgur.com/NbfmJ.png" rel="noreferrer"><img src="https://i.stack.imgur.com/NbfmJ.png" alt="enter image description here"></a></p>
  
  <p><code>boot.js</code> simply bootstraps my app component, it doesn't inject any dependencies:</p>
  
  <pre><code>import {bootstrap} from 'angular2/platform/browser';
  import {AppComponent} from './components/app.component';
  
  bootstrap(AppComponent).catch(err =&gt; console.error(err));
  </code></pre>
  
  <p>Any help would be appreciated.</p>