无法使用http提供商;预期值'HttpClient'由模块'appModule'导入

时间:2018-01-28 15:02:46

标签: angular ionic3 httpmodule

我将一个新手传递给ionic3和Angular。我看了一些youtube并阅读了一些tuto来做一个简单的应用程序来调用ajax服务器。但是当使用Http模块时,我遇到了编译错误:

Error: Unexpected value 'HttpClient' imported by the module 'AppModule'. 
Please add a @NgModule annotation.
at syntaxError (http://localhost:8100/build/vendor.js:78094:34)
at http://localhost:8100/build/vendor.js:92717:44
at Array.forEach (<anonymous>)
at CompileMetadataResolver.getNgModuleMetadata 
(http://localhost:8100/build/vendor.js:92700:49)
at JitCompiler._loadModules 
(http://localhost:8100/build/vendor.js:111170:87)
at JitCompiler._compileModuleAndComponents 
(http://localhost:8100/build/vendor.js:111131:36)
at JitCompiler.compileModuleAsync 
(http://localhost:8100/build/vendor.js:111047:37)
at CompilerImpl.compileModuleAsync 
(http://localhost:8100/build/vendor.js:76930:49)
at PlatformRef.bootstrapModule 
(http://localhost:8100/build/vendor.js:5799:25)
at Object.204 (http://localhost:8100/build/main.js:310:109)

这里是代码的git:ionic app

我当时使用http provier。但是当我将类注入构造函数时,就是在我收到错误时:

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import 'rxjs/add/operator/do';
/*
  Generated class for the GetDataProvider provider.

  See https://angular.io/guide/dependency-injection for more info on providers
  and Angular DI.
*/
@Injectable()
export class GetDataProvider {

private url: string = '192.168.0.110/ajax_inputs';

  constructor(private http: HttpClient) {
console.log('Hello GetDataProvider Provider');
  }

getData(){
return this.http.get(this.url)
.do(res => console.log(res));
}

}

1 个答案:

答案 0 :(得分:0)

您需要在app.module.ts中导入HttpClientModule而不是HttpClient。 如下图所示。

function test() {
  var twitchChannels = ["imaqtpie", "summit1g", "tyler1", "greekgodx"];

  function make_callback(index) {
    return function (channel) {
        console.log(index + " " + twitchChannels[index]);

        if (channel["stream"] == null) {
          console.log("Offline: " + twitchChannels[index])
          document.getElementById(twitchChannels[index]).style.backgroundColor = "red";
        } else {
          console.log("Online: " + twitchChannels[index])
          document.getElementById(twitchChannels[index]).style.backgroundColor = "green";
        }
    }
  }

  for (var i = 0; i < twitchChannels.length; i++) {
    console.log(i + " " + twitchChannels[i]);

    $.getJSON('https://api.twitch.tv/kraken/streams/' + twitchChannels[i] + '?client_id=XXXX', make_callback(i));
  }

}

然后在导入数组中添加如下所示。

import { HttpClientModule } from '@angular/common/http';