White Screen of Death when calling JSON API


#1

Since about a week, I’m trying to get to work a simplest possible app to get the Wordpress JSON API from my localhost server. Every time, when I’m trying to call json with GET, I get blank screen in entire app, and no runtime errors. Anyone is able to help me find what’s wrong with this code? I’m running out of patience… Thanks in advance.
Reppo: https://github.com/scarct/ionic2WPtest/tree/master/src

wordpress-service.ts

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';


@Injectable()
export class WordpressService {
  data1: any;
  constructor(public http: Http) {
    console.log('Hello WordpressService Provider');
  }
  load() {
    if (this.data1) {
      //already loaded data
      return Promise.resolve(this.data1);
    }
    return new Promise(resolve => {
      this.http.get('http://localhost:61588/wp-json/wp/v2/posts')
        .map(res => res.json())
        .subscribe(data => {
          this.data1 = data.results;
          resolve(this.data1);
        });
    })
  }


}

about.ts

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { WordpressService } from "../../providers/wordpress-service"
@Component({
  selector: 'page-about',
  templateUrl: 'about.html',
})

export class AboutPage {
  items: any;
  public wordpress: any;
  
  constructor(public wordpressService: WordpressService, public navCtrl: NavController) {
    this.loadWordpress();
  }

 loadWordpress(){
  this.wordpressService.load()
  .then(data1 => {
    this.wordpress = data1;
  });
} 

}

about.html

<ion-header>
  <ion-navbar>
    <ion-title>
      About
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <ion-list>
    <button ion-item *ngFor="let item of wordpress" (click)="itemTapped($event, item)">
    <h2> {{item.title.rendered}}</h2>
    <p> {{item.exerpt.rendered}}</p>
    </button>
  </ion-list>
</ion-content>

app.module.ts

import { NgModule, ErrorHandler } from '@angular/core';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
import { MyApp } from './app.component';
import { AboutPage } from '../pages/about/about';
import { ContactPage } from '../pages/contact/contact';
import { HomePage } from '../pages/home/home';
import { TabsPage } from '../pages/tabs/tabs';
import {WordpressService} from '../../providers/wordpress-service';
@NgModule({
  declarations: [
    MyApp,
    AboutPage,
    ContactPage,
    HomePage,
    TabsPage
  ],
  imports: [
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    AboutPage,
    ContactPage,
    HomePage,
    TabsPage
  ],
  providers: [WordpressService,
  {provide: ErrorHandler, useClass: IonicErrorHandler}]
})
export class AppModule {}