在Ionic v3中需要幫助克服此錯誤

Question

每次我嘗試將我的提供程序delcare到.ts文件的構造函數時，運行我的應用程序時會出現以下錯誤。 https://imgur.com/a/pRn9lrJ

這里是我的TS文件和相應的html文件以及提供者的ts文件。 將提供程序導入ts文件似乎沒問題，但每當我進入構造函數的提供程序時，我都會收到該錯誤。 關於HTTP客戶端的一些事情，但我不記得曾經在課堂上為HTTP Client創建一個提供程序，所以我不確定如何繼續。

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 { }