Error：AngularJS 2で未処理のPromise拒否

Question

私は、Movie DataBase Apiからデータを取得するためにhttpを使用するAngular Providerを構築しています。

しかし、にもかかわらず、私はそのプロバイダを使用していますページにこのエラーを取得しています：

ので、プロバイダやページのソースコードは次のとおりです。

TMDB。 TS

import { Injectable } from '@angular/core'; 
import { Http, Headers, RequestOptions, Response } from '@angular/http'; 
import 'rxjs/add/operator/map'; 
import 'rxjs/add/operator/catch'; 
import {Observable} from 'rxjs/Rx'; 

@Injectable() 

export class TMDB { 
    apiUrl: string = "https://api.themoviedb.org/3"; 
    apiKey: string = "xxx"; 
    apiLang: string = "pt-BR"; 

    posterLargePath: string = "https://image.tmdb.org/t/p/w500_and_h281_bestv2"; 
    posterMiniPath: string = "https://image.tmdb.org/t/p/w116_and_h174_bestv2"; 

    constructor(public http: Http) { 
    } 

    getSearchMovie(query: string){ 
    let body = {"api_key":this.apiKey, "language":this.apiLang, "query":query, "include_adult": false}; 
    let headers = new Headers({ 'Content-Type': 'application/json' }); 
    let options = new RequestOptions({ headers: headers }); 
     return this.http.get(this.apiUrl + "/search/movie?" + JSON.stringify(body), options) 
      .map((res:Response) => res.json()) 
      .catch((error:any) => Observable.throw(error.json().error || 'Server error')) 
    } 

    getDiscoverMovies(){ 
    let body = {"api_key":this.apiKey, "language":this.apiLang, "page":1, "sort_by":"popularity.desc", "include_video": false, "include_adult": false}; 
     let headers = new Headers({ 'Content-Type': 'application/json' }); 
    let options = new RequestOptions({ headers: headers }); 
    return this.http.get(this.apiUrl + "/discover/movie?" + JSON.stringify(body), options) 
      .map((res:Response) => res.json()) 
      .catch((error:any) => Observable.throw(error.json().error || 'Server error')) 
    } 

    getPosterLargeUrl(){ 
    return this.posterLargePath; 
    } 

    getPosterMiniUrl(){ 
    return this.posterMiniPath; 
    } 

} 

page.ts

import { Component } from '@angular/core'; 
//import{ Http } from '@angular/http'; 
import { NavController } from 'ionic-angular'; 
//import 'rxjs/add/operator/map' 
import { TMDB } from '../../providers/tmdb.ts'; 

@Component({ 
    selector: 'page-home', 
    templateUrl: 'home.html' 
    //,providers: [TMDB] 
}) 
export class HomePage { 
    discoverMovies: any; 
    posterMiniPath: string; 
    posterLargePath: string; 

    constructor(public navCtrl: NavController) { 
    TMDB.getDiscoverMovies().subscribe(
           movies => this.discoverMovies = movies, //Bind to view 
           err => { 
            // Log errors if any 
            console.log(err); 
           }); 
    this.posterMiniPath = TMDB.getPosterMiniUrl(); 
    this.posterLargePath = TMDB.getPosterLargeUrl(); 
    } 

} 

私はそれがバグであることを知る必要があります。誰か助けてくれますか？ 。私はイオン性フレームワークvを使用していることを思い出し2.

編集1：

import { Component } from '@angular/core'; 
import { NavController } from 'ionic-angular'; 
import { TMDB } from '../../providers/tmdb.ts'; 

@Component({ 
    selector: 'page-home', 
    templateUrl: 'home.html', 
    providers: [TMDB] 
}) 
export class HomePage { 
    discoverMovies: any; 
    posterMiniPath: string; 
    posterLargePath: string; 

    constructor(public navCtrl: NavController, public tmdb: TMDB) { 
    tmdb.getDiscoverMovies().subscribe(
           movies => this.discoverMovies = movies, 
           err => { 
            console.log(err); 
           }); 
    this.posterMiniPath = tmdb.getPosterMiniUrl(); 
    this.posterLargePath = tmdb.getPosterLargeUrl(); 
    } 

} 

編集2：

app.module.ts：

import { NgModule } from '@angular/core'; 
import { IonicApp, IonicModule } from 'ionic-angular'; 
import { MyApp } from './app.component'; 
import { HomePage } from '../pages/home/home'; 
import { PageIntro } from '../pages/intro/page'; 
import { TMDB } from '../providers/tmdb.ts'; 

@NgModule({ 
    declarations: [ 
    MyApp, 
    HomePage, 
    PageIntro 
    ], 
    imports: [ 
    IonicModule.forRoot(MyApp) 
    ], 
    bootstrap: [IonicApp], 
    entryComponents: [ 
    MyApp, 
    HomePage, 
    PageIntro 
    ], 
    providers: [ TMDB ] 
}) 
export class AppModule {} 

tmdb.ts：

import { Injectable } from '@angular/core'; 
import { Http, Headers, RequestOptions, Response } from '@angular/http'; 
import 'rxjs/add/operator/map'; 
import 'rxjs/add/operator/catch'; 
import {Observable} from 'rxjs/Rx'; 

/* 
    Generated class for the TMDB provider. 

    See https://angular.io/docs/ts/latest/guide/dependency-injection.html 
    for more info on providers and Angular 2 DI. 
*/ 
@Injectable() 

export class TMDB { 
    apiUrl: string = "https://api.themoviedb.org/3"; 
    apiKey: string = "xxxx"; 
    apiLang: string = "pt-BR"; 

    posterLargePath: string = "https://image.tmdb.org/t/p/w500_and_h281_bestv2"; 
    posterMiniPath: string = "https://image.tmdb.org/t/p/w116_and_h174_bestv2"; 

    constructor(public http: Http) { 
    } 

    getSearchMovie(query: string){ 
    let body = {"api_key":this.apiKey, "language":this.apiLang, "query":query, "include_adult": false}; 
    let headers = new Headers({ 'Content-Type': 'application/json' }); 
    let options = new RequestOptions({ headers: headers }); 
     return this.http.get(this.apiUrl + "/search/movie?" + JSON.stringify(body), options) 
      .map((res:Response) => res.json()) 
      .catch((error:any) => Observable.throw(error.json().error || 'Server error')) 
    } 

    getDiscoverMovies(){ 
    let body = {"api_key":this.apiKey, "language":this.apiLang, "page":1, "sort_by":"popularity.desc", "include_video": false, "include_adult": false}; 
     let headers = new Headers({ 'Content-Type': 'application/json' }); 
    let options = new RequestOptions({ headers: headers }); 
    return this.http.get(this.apiUrl + "/discover/movie?" + JSON.stringify(body), options) 
      .map((res:Response) => res.json()) 
      .catch((error:any) => Observable.throw(error.json().error || 'Server error')) 
    } 

    getPosterLargeUrl(){ 
    return this.posterLargePath; 
    } 

    getPosterMiniUrl(){ 
    return this.posterMiniPath; 
    } 

} 

Answer 1

がのインスタンスメソッドの場合は、静的に呼び出そうとしています。何をすべきかあなたは何をすべきか、@NgModule.providersにそれを追加し、我々は今インスタンスとしてTMDBを使用して、なく静的にしているHomePage

@NgModule({ 
    providers: [ TMDB ] 
}) 
class AppModule {} 

@Component({}) 
class HomePage { 
    constructor(private tmdb: TMDB) { 
    tmdb.getDiscoverMovies().subscribe(
     movies => this.discoverMovies = movies, //Bind to view 
     err => console.log(err)); 
    this.posterMiniPath = tmdb.getPosterMiniUrl(); 
    this.posterLargePath = tmdb.getPosterLargeUrl(); 
    } 
} 

お知らせに注入されます。