加载 @angular/common/http 时出错 - angular 2

Question

我正在尝试在 Angular 2 中实现一项服务。

服务：

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';
import { BrowserModule } from '@angular/platform-browser';


@Injectable()
export class DemoService {


constructor(private http: HttpClient
         ) { }
  GetData(): Observable<String> {
    const baseUrl = 'http://localhost:54037/api/home'; // this  part  will  come from  config  file  in futer
   // const url = '?resourceId=' + primaryId + '&showDate=' + selectedDate;
    // http://localhost:55174/api/Resource?resourceId=3&showDate=2017-06-06
    return this.http
      .get<String>(baseUrl);
  }

}

组件：

import { Component, OnInit } from '@angular/core';
import { DemoService } from './app.service';
import { BrowserModule } from '@angular/platform-browser';

@Component({
  selector: 'my-app',
  template: `<h1>Hello {{name}}</h1>`,

})
export class AppComponent implements OnInit  { 

  constructor(private s: DemoService){} 
  name = 'Angular 2'; 
ngOnInit(){
console.log("Inidialization completed");

}

}

一切正常，但只要我在组件类下的构造函数中创建服务实例，控制台就会出现错误。

加载错误 http://localhost:3002/node_modules/@angular/common/bundles/common.umd.js/http 作为“@angular/common/http”来自 http://localhost:3002/app/app.service.js

如果我删除构造函数部分，我会得到输出。

我需要创建一个构造函数的实例，然后调用服务。

我做错了什么吗？

Answer 1

在 app.module 中导入 HttpModule，如下所示

import { HttpModule} from '@angular/http'

和

在服务中导入Http如下

import { Http, Response} from '@angular/http'

解决了问题。