Question

我正在尝试设置一个名为@Injectable的简单HttpApi，然后我将其用于app.ts。但我得到以下错误： No provider for Http! (AppComponent -> HttpApi -> Http)

使用以下命令构建两个TypeScript文件：

tsc -m commonjs -t es5 --experimentalDecorators --emitDecoratorMetadata app.ts

我确实理解错误，但我不知道如何解决它。我在俯瞰什么？

的index.html：

<!DOCTYPE html>
<html>

<head>
  <script src="../node_modules/systemjs/dist/system.src.js"></script>
  <script src="../node_modules/angular2/bundles/angular2.dev.js"></script>
  <script src="../node_modules/angular2/bundles/http.dev.js"></script>
</head>

<body>
  <app></app>
  <script>
    System.config({
      map: {
        httpApi: 'src/httpApi.js'
      }
    });
    System.import('src/app.js');
  </script>
</body>

</html>

httpApi.ts：

///<reference path="typings/angular2/angular2.d.ts"/>
///<reference path="typings/angular2/http.d.ts"/>

import {Injectable, bind} from 'angular2/angular2';
import {Http, Headers} from 'angular2/http';

@Injectable()
export class HttpApi {
  constructor(public http: Http) {
  }

  public getChampions() {
    return this.http.get('http://localhost:12345/champions')
      .toRx()
      .map(res => this.ResponseToArray(res));
  }
}

app.ts：

/// <reference path="typings/angular2/angular2.d.ts" />

import {Component, View, bootstrap, Inject} from 'angular2/angular2';
import {HttpApi} from 'server';

@Component({
  selector: 'app',
  bindings: [HttpApi]
})
@View({
  templateUrl: 'some.html'
})

class AppComponent {
  champions: Object;
  constructor(httpApi: HttpApi) {
    httpApi.getChampions()
      .subscribe(champions => this.champions = champions);
  }
}

bootstrap(AppComponent, [HttpApi]);

Answer 1

此问题是在Angular发布之前提出的，因此此时导致unknown provider Http的问题不同。

实际角度释放（2+）。您需要在提供服务的模块中导入HttpModule：

import { Http } from '@angular/http';
import { NgModule } from '@angular/core'

@NgModule({
    imports: [
        HttpModule
    ],
    providers: [
        HttpApi
    ]
})
export class HttpSwProxyModule {}

Angular2：简单的@Injectable HttpApi的未知提供者Http

1 个答案: