unable to use http provider ; expected value 'HttpClient' imported by the module 'appModule'

Question

I'm relay a newbie into ionic3 and Angular. I look some youtube and read some tuto to do a simple app that makes call to an ajax server. But when it came for using Http module, I got a compile error :

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)

Here the git for the code: ionic app

I was to use http provier. but when I inject the class into the constructor, it is when I got the error:

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));
}

}

Answer 1

You need to import HttpClientModule rather than HttpClient in your app.module.ts. as shown below.

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

And then add this within imports array as below.

imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp),
    //HttpModule,
    HttpClientModule
],