DI error on service constructor

Question

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:

boot.ts:

import {bootstrap} from 'angular2/platform/browser'
import {AppComponent} from './component/app.component'
import {Http, Headers} from 'angular2/http';

bootstrap(AppComponent);

app.component.ts:

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 {

}

auth.service.ts:

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

index.html:

<html>

  <head>
    <title>MegaSíndico</title>

    <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materialize.min.js"></script>

    <!-- 1. Load libraries -->
    <script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>
    <script src="node_modules/rxjs/bundles/Rx.js"></script>
    <script src="node_modules/angular2/bundles/angular2.dev.js"></script>

    <!-- 2. Configure SystemJS -->
    <script>
      System.config({
       packages: {
         app: {
           format: 'register',
           defaultExtension: 'js'
          }
        }
      });
      System.import('app/boot')
            .then(null, console.error.bind(console));
    </script>

  </head>

  <!-- 3. Display the application -->
  <body>
    <my-app>Loading...</my-app>
  </body>

</html>

I am getting this weird syntax error on my console:

Uncaught SyntaxError: Unexpected token <
Evaluating http://localhost:3000/angular2/http
Error loading http://localhost:3000/app/boot.js

Its really weird because when I delete the constructor of the service layer it works and my html is rendered on the browser.

Possible duplicate of [Angular2 beta - bootstrapping HTTP\_PROVIDERS - "Unexpected Token <"](http://stackoverflow.com/questions/34401354/angular2-beta-bootstrapping-http-providers-unexpected-token) — Eric Martinez, Jan 09 '16 at 05:35

score 4 · Answer 1 · answered Jan 09 '16 at 04:13

Based on the information provided, whatever module loader you are using is trying to load http://localhost:3000/angular2/http, and probably your Web server is returning a 404 with an HTML document body, which the module loader tries to evaluate as JavaScript and fails. If you look at the network tab of your browser you can confirm this is the case.

Since you haven’t said which module loader you are trying to use it’s not possible to say what you need to do to configure it correctly, but basically: your module loader is not configured correctly and isn’t applying proper path/file extension mapping to your imports. It needs to be (at least) adding a .js to imported module paths to load from the correct URL on the server.

Thierry Templier · Accepted Answer · 2016-01-09T07:53:35.500

3

Do you include the http.dev.js file from the Angular2 distribution into the main HTML page of your application?

Moreover you need to add HTTP_PROVIDERS with the second parameter of the bootstrap function:

bootstrap(AppComponent, [ HTTP_PROVIDERS ]);

Hope it helps you, Thierry

edited Jan 09 '16 at 07:53

answered Jan 09 '16 at 07:47

Thierry Templier

198,364
44
396
360

DI error on service constructor

2 Answers2