Uncaught (in promise): TypeError: Cannot read property 'create' of undefined (ionic 3.9 , Angularjs 5.0.3)

Question

I'm new to ionic. I want to access the data through an API key, but I got an error like this:

Runtime Error : Uncaught (in promise): Error: Cannot read property 'create' of undefined TypeError: Cannot read property 'create' of undefined at new SamplePage ( http://localhost:8100/build/main.js:1143:41 ) at createClass ( http://localhost:8100/build/vendor.js:12521:20 ) at createDirectiveInstance ( http://localhost:8100/build/vendor.js:12364:37 ) at createViewNodes ( http://localhost:8100/build/vendor.js:13802:53 ) at createRootView ( http://localhost:8100/build/vendor.js:13692:5 ) at callWithDebugContext ( http://localhost:8100/build/vendor.js:15093:42 ) at Object.debugCreateRootView [as createRootView] ( http://localhost:8100/build/vendor.js:14394:12 ) at ComponentFactory_.create ( http://localhost:8100/build/vendor.js:11313:46 ) at ComponentFactoryBoundToModule.create ( http://localhost:8100/build/vendor.js:4275:29 ) at NavControllerBase._viewInit ( http://localhost:8100/build/vendor.js:51546:44 ) at c ( http://localhost:8100/build/polyfills.js:3:19752 ) at Object.reject ( http: //localhost:8100/build/polyfills.js:3:19174 ) at NavControllerBase._fireError ( http://localhost:8100/build/vendor.js:51328:16 ) at NavControllerBase._failed ( http://localhost:8100/build/vendor.js:51321:14 ) at http://localhost:8100/build/vendor.js:51368:59 at t.invoke ( http://localhost:8100/build/polyfills.js:3:14976 ) at Object.onInvoke ( 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 ) at 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>

In Provider folder 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());
    }
}

I don't know how to overcome this. Could anyone please give me some ideas?

Answer 1

I think you missed initializing loadingCtrl as LoadingController to the constructor and hence it does not have access to create property of LoadingController :

constructor(private loadingCtrl: LoadingController)

Answer 2

Please additionally add this below modules in your both components (service and controller)

import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';