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

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

我需要创建一个Constructor实例，然后调用service。

我做错了吗？

Answer 1

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

MusicdownsGet:
  Type: AWS::ApiGateway::Method
  Properties:
    RestApiId: !Ref ApiGateway
    ResourceId: !Ref MusicdownResource
    HttpMethod: GET
    RequestParameters:
      method.request.querystring.filter: true
    AuthorizationType: NONE
    RequestModels:
      application/json: !Ref MusicdownModel
    Integration:
      Type: AWS
      IntegrationHttpMethod: POST
      Uri: !Sub arn:aws:apigateway:${AWS::Region}:lambda:path/2015-03-31/functions/${Lambda.Arn}/invocations
      IntegrationResponses:
        - StatusCode: 200
      RequestTemplates:
        application/json: "{ \"filter\": \"$input.params('filter')\" }"
    MethodResponses:
      - StatusCode: 200

和

在服务中导入Http，如下所示

import { HttpModule} from '@angular/http'

解决了这个问题。

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

1 个答案: