title: Error: Unhandled Promise rejection in AngularJS 2
body: <p>I'm building a Angular Provider that uses http to get data from The Movie DataBase Api.</p>
  
  <p>But, although, i'm getting this errors in the page that i'm using that provider:
  <a href="https://i.imgur.com/c3YSUMn.png?1" rel="nofollow noreferrer"><img src="https://i.imgur.com/c3YSUMn.png?1" alt="enter image description here"></a></p>
  
  <p>So, the source code of the provider and page is:</p>
  
  <p><strong>tmdb.ts</strong></p>
  
  <pre><code>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) =&gt; res.json())
              .catch((error:any) =&gt; 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) =&gt; res.json())
              .catch((error:any) =&gt; Observable.throw(error.json().error || 'Server error'))
    }
  
    getPosterLargeUrl(){
      return this.posterLargePath;
    }
  
    getPosterMiniUrl(){
      return this.posterMiniPath;
    }
  
  }
  </code></pre>
  
  <p><strong>page.ts</strong></p>
  
  <pre><code>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 =&gt; this.discoverMovies = movies, //Bind to view
                                err =&gt; {
                                    // Log errors if any
                                    console.log(err);
                                });
      this.posterMiniPath = TMDB.getPosterMiniUrl();
      this.posterLargePath = TMDB.getPosterLargeUrl();
    }
  
  }
  </code></pre>
  
  <p>I need to know that is the bug. Can someone help me? Remembering that i'm using Ionic Framework v. 2.</p>
  
  <p><strong>Edit 1:</strong></p>
  
  <pre><code>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 =&gt; this.discoverMovies = movies,
                                err =&gt; {
                                    console.log(err);
                                });
      this.posterMiniPath = tmdb.getPosterMiniUrl();
      this.posterLargePath = tmdb.getPosterLargeUrl();
    }
  
  }
  </code></pre>
  
  <p><strong>Edit 2:</strong></p>
  
  <p>app.module.ts:</p>
  
  <pre><code>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 {}
  </code></pre>
  
  <p>tmdb.ts:</p>
  
  <pre><code>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) =&gt; res.json())
              .catch((error:any) =&gt; 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) =&gt; res.json())
              .catch((error:any) =&gt; Observable.throw(error.json().error || 'Server error'))
    }
  
    getPosterLargeUrl(){
      return this.posterLargePath;
    }
  
    getPosterMiniUrl(){
      return this.posterMiniPath;
    }
  
  }
  </code></pre>