服务构造函数上的 DI 错误答案

【问题标题】：DI error on service constructor服务构造函数上的 DI 错误
【发布时间】：2016-04-13 20:18:10
【问题描述】：

我刚开始破解 Angular 2，现在我正在尝试开发我的第一个“现实世界”应用程序。它的目的是从一个完整的网络服务中检索数据，所以我写了这段代码：

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>

我的控制台上出现了这个奇怪的语法错误：

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

这真的很奇怪，因为当我删除服务层的构造函数时它会起作用，并且我的 html 会在浏览器上呈现。

【问题讨论】：

Angular2 beta - bootstrapping HTTP_PROVIDERS - "Unexpected Token <"的可能重复

标签： angular typescript

【解决方案1】：

根据提供的信息，您使用的任何模块加载器都在尝试加载 http://localhost:3000/angular2/http，并且您的 Web 服务器可能正在返回带有 HTML 文档正文的 404，模块加载器尝试将其评估为 JavaScript 并失败。如果您查看浏览器的网络选项卡，您可以确认是这种情况。

由于您没有说您尝试使用哪个模块加载器，因此无法说出正确配置它需要做什么，但基本上：您的模块加载器配置不正确并且没有应用正确的路径/文件扩展名映射到您的导入。它需要（至少）在导入的模块路径中添加一个.js，以便从服务器上的正确 URL 加载。

【讨论】：

【解决方案2】：

您是否将 Angular2 发行版中的 http.dev.js 文件包含到应用程序的主 HTML 页面中？

此外，您需要在引导函数的第二个参数中添加HTTP_PROVIDERS：

bootstrap(AppComponent, [ HTTP_PROVIDERS ]);

希望对你有帮助蒂埃里

【讨论】：