Нужна помощь в преодолении этой ошибки в Ionic v3

Question

Каждый раз, когда я пытаюсь добавить моего провайдера в конструктор файла .ts, я получаю следующую ошибку при запуске моего приложения. https://imgur.com/a/pRn9lrJ

здесь мой TS-файл и соответствующий html-файл вместе с ts-файлом провайдера. Кажется, все в порядке после простого импорта провайдера в файл TS, но всякий раз, когда я вхожу в провайдер в конструкторе, я получаю эту ошибку. Что-то о HTTP-клиенте, но я не помню, чтобы когда-либо создавался провайдер для HTTP-клиента в классе, поэтому я не уверен, как поступить.

TS

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { Storage } from '@ionic/storage';
import { CurrencyRatesProvider } from '../../providers/currency-rates/currency-rates';


@IonicPage()
@Component({
  selector: 'page-converter',
  templateUrl: 'converter.html',
})

export class ConverterPage {
changingFrom:string;
changingTo:String;
conversion:number=0;

 constructor(public navCtrl: NavController, public navParams: NavParams, private storage: Storage, private currencyRatesProvider: CurrencyRatesProvider) {
  }

  ionViewDidLoad() {
   console.log('ionViewDidLoad ConverterPage');

    }


  onSave(){
console.log(this.changingFrom+" "+this.changingTo);

this.storage.set("changingFrom",this.changingFrom);
this.storage.set("changingTo",this.changingTo);


  }
     ionViewWillEnter(){
  this.storage.get("changingFrom").then((data) => {
      this.changingFrom=data;
  })
    .catch((err) => {
      console.log("Error = " + err);
    })


    this.storage.get("changingTo").then((data) => {
      this.changingTo=data;
  })
    .catch((err) => {
      console.log("Error = " + err);
    })

}


 }

HTML

<ion-header>
  <ion-navbar>
    <ion-title text-center>Converter</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <ion-list>
    <ion-item>

      <ion-input type="number" placeholder="Enter amount" floating>    </ion-input>
      <ion-select [(ngModel)]="changingFrom">
        <ion-option value="euro">Euro</ion-option>
      </ion-select>
    </ion-item>
  </ion-list>


   <ion-list>

     <ion-item>

       <ion-select right [(ngModel)]="changingTo">
    <ion-option value="euro">Euro</ion-option>
    <ion-option value="usd">USDollars</ion-option>
    <ion-option value="aud">Austrailian Dollars</ion-option>
    <ion-option value="cad">Canadian Dollars</ion-option>
    <ion-option value="sek">Swedish Krona</ion-option>
    <ion-option value="mxn">Mexican Peso</ion-option>
  </ion-select>
   </ion-item>
     <ion-item>
        <h2> Your amount is {{conversion}}</h2>
      <button ion-button large color="secondary"  (onclick)="onSave()">Convert</button>
    </ion-item>

  </ion-list>

 </ion-content>

поставщик ts

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

@Injectable()
export class CurrencyRatesProvider {

constructor(public http: HttpClient) {
console.log('Hello CurrencyRatesProvider Provider');
}

  GetMovieData():Observable<any>{
return this.http.get("http://data.fixer.io/api/latest?access_key=2d41e1b777f6f0002852f4e1608af906&symbols=USD,AUD,CAD,PLN,MXN&format=1")

   } 

 }

Answer 1

Как сказал JBNizet, в свой файл module.ts (в основном app.module.ts) добавьте HttpClientModule

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

    @NgModule({
      imports:      [ BrowserModule, FormsModule, HttpClientModule ],
      ...
    })
    export class AppModule { }