Question

我刚刚开始攻击Angular 2，现在我正在尝试开发我的第一个“真实世界”应用。它的意思是从restfull webservice中检索数据，所以我写了这段代码：

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在浏览器上呈现。

Answer 1

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

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

Answer 2

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

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

bootstrap(AppComponent, [ HTTP_PROVIDERS ]);

希望它可以帮到你，亨利

服务构造函数的DI错误

2 个答案: