加载@ angular/common/http时出错-angular 2 [英] Error loading @angular/common/http - angular 2

问题描述

我正在尝试在Angular 2中实现服务.

I am trying to implement a service in 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");

}

}

一切正常，但是一旦我在组件类下的构造函数中创建服务实例，就会在控制台收到错误消息.

Everything works fine but as soon as I create an instance of service in constructor under component class, I get an error at the console.

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

Error loading http://localhost:3002/node_modules/@angular/common/bundles/common.umd.js/http as "@angular/common/http" from http://localhost:3002/app/app.service.js

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

If I remove constructor part, I get output.

我需要创建一个Constructor实例，然后调用服务.

I need to create an instance of Constructor and then call service.

我做错什么了吗?

推荐答案

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

Importing HttpModule in app.module like below

import { HttpModule} from '@angular/http'

和

按如下所示将Http导入服务中

Importing Http in service as below

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

解决了问题.

这篇关于加载@ angular/common/http时出错-angular 2的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！