title: DI error on service constructor
body: <p>I just start hacking Angular 2 and now I am trying to develop my first 'real world' app. Its meant to retrieve data from a restfull webservice, so I wrote this code:</p>
  
  <p>boot.ts:</p>
  
  <pre><code>import {bootstrap} from 'angular2/platform/browser'
  import {AppComponent} from './component/app.component'
  import {Http, Headers} from 'angular2/http';
  
  bootstrap(AppComponent);
  </code></pre>
  
  <p>app.component.ts:</p>
  
  <pre><code>import {Component} from 'angular2/core';
  import {AuthComponent} from './auth.component';
  
  @Component({
      selector: 'my-app',
      templateUrl: 'app/template/my-app.html',
      styleUrls: ['app/style/my-app.css'],
      directives: [AuthComponent]
  })
  
  export class AppComponent {
  
  }
  </code></pre>
  
  <p>auth.service.ts:</p>
  
  <pre><code>import {Injectable} from 'angular2/core';
  import {Http, Headers, HTTP_PROVIDERS} from 'angular2/http';
  import {toPromise} from 'rxjs/operator/toPromise';
  import {Credentials} from '../model/credentials';
  
  @Injectable()
  export class AuthService {
  
    headers : Headers;
    http: Http;
  
    constructor(headers: Headers, http: Http){
      console.log('CHAMOU CONSTRUTOR SERVICE');
      this.headers = headers;
      this.http = http;
      this.headers.append('Content-Type', 'application/json');
    }
  }
  </code></pre>
  
  <p>index.html:</p>
  
  <pre><code>&lt;html&gt;
  
    &lt;head&gt;
      &lt;title&gt;MegaSíndico&lt;/title&gt;
  
      &lt;link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"&gt;
      &lt;script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"&gt;&lt;/script&gt;
      &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materialize.min.js"&gt;&lt;/script&gt;
  
      &lt;!-- 1. Load libraries --&gt;
      &lt;script src="node_modules/angular2/bundles/angular2-polyfills.js"&gt;&lt;/script&gt;
      &lt;script src="node_modules/systemjs/dist/system.src.js"&gt;&lt;/script&gt;
      &lt;script src="node_modules/rxjs/bundles/Rx.js"&gt;&lt;/script&gt;
      &lt;script src="node_modules/angular2/bundles/angular2.dev.js"&gt;&lt;/script&gt;
  
      &lt;!-- 2. Configure SystemJS --&gt;
      &lt;script&gt;
        System.config({
         packages: {
           app: {
             format: 'register',
             defaultExtension: 'js'
            }
          }
        });
        System.import('app/boot')
              .then(null, console.error.bind(console));
      &lt;/script&gt;
  
    &lt;/head&gt;
  
    &lt;!-- 3. Display the application --&gt;
    &lt;body&gt;
      &lt;my-app&gt;Loading...&lt;/my-app&gt;
    &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>I am getting this weird syntax error on my console:</p>
  
  <pre><code>Uncaught SyntaxError: Unexpected token &lt;
  Evaluating http://localhost:3000/angular2/http
  Error loading http://localhost:3000/app/boot.js
  </code></pre>
  
  <p>Its really weird because when I delete the constructor of the service layer it works and my html is rendered on the browser.</p>