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

Question

我试图建立一个简单的@Injectable称为HttpApi然后我在使用app.ts 。 但是我收到以下错误： No provider for Http! (AppComponent -> HttpApi -> Http) 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 个解决方案

解决方案1
0 2017-07-18 12:28:30

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

问题描述

1 个解决方案

解决方案1 0 2017-07-18 12:28:30

解决方案1
0 2017-07-18 12:28:30