服务构造函数的DI错误

Question

I just start hacking Angular 2 and now I am trying to develop my first 'real world' app. 我刚刚开始攻击Angular 2，现在我正在尝试开发我的第一个“真实世界”应用程序。 Its meant to retrieve data from a restfull webservice, so I wrote this code: 它的意思是从restfull webservice中检索数据，所以我编写了这段代码：

boot.ts: 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: 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: 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: 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. 它真的很奇怪，因为当我删除服务层的构造函数时它工作，我的html在浏览器上呈现。

Answer 1

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. 根据提供的信息，您使用的任何模块加载器都在尝试加载http://localhost:3000/angular2/http ，并且您的Web服务器可能正在返回带有HTML文档正文的404，模块加载器会尝试评估该文档正文作为JavaScript并失败。 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. 它需要（至少）将.js添加到导入的模块路径，以从服务器上的正确URL加载。

Answer 2

Do you include the http.dev.js file from the Angular2 distribution into the main HTML page of your application? 您是否将Angular2发行版中的http.dev.js文件包含到应用程序的主HTML页面中？

Moreover you need to add HTTP_PROVIDERS with the second parameter of the bootstrap function: 此外，您需要使用引导函数的第二个参数添加HTTP_PROVIDERS ：

bootstrap(AppComponent, [ HTTP_PROVIDERS ]);

Hope it helps you, Thierry 希望它对你有帮助，蒂埃里

服务构造函数的DI错误

问题描述

2 个解决方案

解决方案1
4 2016-01-09 04:13:59

解决方案2
3 已采纳 2016-01-09 07:47:12

服务构造函数的DI错误

问题描述

2 个解决方案

解决方案1 4 2016-01-09 04:13:59

解决方案2 3 已采纳 2016-01-09 07:47:12

解决方案1
4 2016-01-09 04:13:59

解决方案2
3 已采纳 2016-01-09 07:47:12