未捕获（承诺）：TypeError：无法读取未定义的属性'create'（离子3.9，Angularjs 5.0.3）

我是离子的新手 . 我想通过API密钥访问数据，但是我收到如下错误：

运行时错误：未捕获（在承诺中）：错误：无法读取未定义的属性'create'TypeError：无法在新的SamplePage中读取未定义的属性'create'（http：// localhost：8100 / build / main.js：1143： 41）在createClass（http：// localhost：8100 / build / vendor.js：12521：20）的createDirectiveInstance（http：// localhost：8100 / build / vendor.js：12364：37）at createViewNodes（http：/ /lhosthost:8100/build/vendor.js:13802:53）在callWithDebugContext的createRootView（http：// localhost：8100 / build / vendor.js：13692：5）（http：// localhost：8100 / build / vendor） .js：15093：42）在ComponentFactory_.create的Object.debugCreateRootView [as createRootView]（http：// localhost：8100 / build / vendor.js：14394：12）（http：// localhost：8100 / build / vendor） .js：11313：46）在NavControllerBase._viewInit（http：// localhost：8100 / build / vendor.js：51546）的ComponentFactoryBoundToModule.create（http：// localhost：8100 / build / vendor.js：4275：29） ：44）at c（http：// localhost：8100 / build / polyfills.js：3：19752）at Object.reject（http：// localhost：8100 / buil） d / polyfills.js：3：19174）NavControllerBase._fireError（http：// localhost：8100 / build / vendor.js：51328：16）在NavControllerBase._failed（http：// localhost：8100 / build / vendor . js：51321：14）在http：// localhost：8100 / build / vendor.js：51368：59 at at at toke（http：// localhost：8100 / build / polyfills.js：3：14976） . on.vun（http：// localhost：8100 / build / vendor.js：4982：33）at t.invoke（http：// localhost：8100 / build / polyfills.js：3：14916）at r.run（http： //localhost:8100/build/polyfills.js:3:10143）在http：// localhost：8100 / build / polyfills.js：3：20242

sample.ts

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { HttpProvider } from '../../providers/http/http';
import { NavController, LoadingController } from 'ionic-angular';
import 'rxjs/add/operator/map';

/**
* Generated class for the SamplePage page.
 *
* See https://ionicframework.com/docs/components/#navigation for more info 
   on
* Ionic pages and navigation.
*/

@IonicPage()
@Component({
    selector: 'page-sample',
    templateUrl: 'sample.html',
    providers: [HttpProvider]
})
export class SamplePage {
    newsData: any;
    loading: any;

    constructor(public navCtrl: NavController, public navParams:
        NavParams, private httpProvider: HttpProvider) {
        this.loading = this.loadingCtrl.create({
            content: `
      <ion-spinner ></ion-spinner>`
        });
        this.getdata();
    }

    ionViewDidLoad() {
        console.log('ionViewDidLoad SamplePage');
    }
    getdata() {
        this.httpProvider.getJsonData().subscribe(
            result => {
                this.newsData = result.data.children;
                console.log("Success : " + this.newsData);
            },
            err => {
                console.error("Error : " + err);
            },
            () => {
                console.log('getData completed');
            }
        );
    }
}

sample.html

<ion-header>
     <ion-navbar>
         <ion-title>sample</ion-title>
     </ion-navbar>
 </ion-header>
 <ion-content padding>
     <ion-list >
         <ion-item text-wrap *ngFor="let item of newsData" >
             <p >{{item.data.title}}</p>
         </ion-item>
     </ion-list>
 </ion-content>

在Provider文件夹http.ts中

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

/*
Generated class for the HttpProvider provider.

See https://angular.io/guide/dependency-injection for more info on 
providers
and Angular DI.
   */
@Injectable()
export class HttpProvider {
    constructor(public http: HttpClient) {
        console.log('Hello HttpProvider Provider');
    }
    getJsonData() {
        return this.http.get('https://www.reddit.com/r/worldnews/.json').map(r es 
            => res.json());
    }
}

我不知道如何克服这一点 . 有谁能请给我一些想法？