angular - DI-feil på servicekonstruktør

Jeg begynte akkurat å hacke Angular 2, og nå prøver jeg å utvikle min første 'virkelige' app. Den er ment å hente data fra en RESTful webtjeneste, så jeg skrev denne koden:

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>

Jeg får denne rare syntaksfeilen på konsollen min:

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

Det er virkelig rart fordi når jeg sletter konstruktøren til tjenestelaget, fungerer det og HTML-en min gjengis i nettleseren.

Svar #1

Basert på informasjonen som er gitt, prøver hvilken som helst modulinnlastingsprogram du bruker å laste http://localhost:3000/angular2/http, og sannsynligvis returnerer din webserver en 404 med en HTML-dokumentkropp, som modulinnlastingsprogrammet prøver å evaluere som JavaScript og mislykkes. Hvis du ser på nettverksfanen i nettleseren din, kan du bekrefte at dette er tilfelle.

Siden du ikke har sagt hvilken modul-laster du prøver å bruke, er det ikke mulig å si hva du trenger å gjøre for å konfigurere den riktig, men i utgangspunktet: modul-laseren din er ikke konfigurert riktig og anvender ikke riktig stiangivelse/filforlengelse på importene dine. Den må (i det minste) legge til en .js til importerte modulstier for å laste fra riktig URL på serveren.

Svar #2

Inkluderer du http.dev.js-filen fra Angular2-distribusjonen i hoved-HTML-siden til applikasjonen din?

Videre må du legge til HTTP_PROVIDERS med den andre parameteren i bootstrap-funksjonen:

bootstrap(AppComponent, [ HTTP_PROVIDERS ]);

Håper det hjelper deg, Thierry

Relaterte artikler