angular – 服务构造函数的DI错误

发布时间：2020-12-17 17:21:30 所属栏目：安全来源：网络整理

导读：我刚刚开始攻击Angular 2,现在我正在尝试开发我的第一个“真实世界”应用程序.它的意思是从restfull webservice中检索数据,所以我编写了这段代码： boot.ts： import {bootstrap} from 'angular2/platform/browser'import {AppComponent} from './component/

我刚刚开始攻击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在浏览器上呈现.

解决方法

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

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

bootstrap(AppComponent,[ HTTP_PROVIDERS ]);

希望它能帮到你,蒂埃里

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!