title: Separate component for Loader :Error: Uncaught (in promise): false
body: <p>I have create a loading component to show and hide loader.
  it work fine on the login page and home page,bus as soon as i call it again from another page it gives the error</p>
  
  <p>I want to create a separate component for loading and not repeat the code in every page</p>
  
  <p>ERROR Error: Uncaught (in promise): false</p>
  
  <p>Below is the code of the loading.modal.ts</p>
  
  <pre><code>import { Component } from '@angular/core';
  import { LoadingController } from 'ionic-angular';
  
  
  /**
   * Generated class for the LoadingModal component.
   *
   * See https://angular.io/docs/ts/latest/api/core/index/ComponentMetadata-class.html
   * for more info on Angular Components.
   */
  @Component({
    selector: 'loading-modal',
    templateUrl: 'loading-modal.html',
    providers:[]
  })
  export class LoadingModal {
  
    text: string;
    loader: any;
  
    constructor( public loadingCtrl: LoadingController ) {
      this.text = 'Hello World';
      this.loader=this.loadingCtrl.create({
      content: 'Please wait...'
      });
    }
  
    showModal()
    {
      this.loader.present();
    }
  
    hideModal()
    {
      //alert("hide modal");
      this.loader.dismiss().catch(() =&gt; {});
    }
  
  }
  </code></pre>
  
  <p>From the home page when the next page is pushed then in the constructor of the new page i try to show the loader again</p>
  
  <pre><code>/**
   * Generated class for the ProductCatalog page.
   *
   * See http://ionicframework.com/docs/components/#navigation for more info
   * on Ionic pages and navigation.
   */
  @IonicPage()
  @Component({
    selector: 'page-product-catalog',
    templateUrl: 'product-catalog.html',
  })
  export class ProductCatalog {
  
  public currentCatId:any;
  public productArray=[];
  public imageBaseUrl:string;
  
    constructor(public navCtrl: NavController, public navParams: NavParams, public prdServ: ProductService,public appService:AppService, public loaderService: LoadingModal) {
  
  
        this.imageBaseUrl=appService.ThumbNailUrl
        this.currentCatId=navParams.get("catId");
        loaderService.showModal();
        prdServ.getProductsforCategory(this.currentCatId).subscribe(data =&gt; {
  
              this.productArray=data.items;
           loaderService.hideModal();      
  
          });
    }
  
    loadDescription(product){
    var p=product;
  
    this.navCtrl.push(ProductDescription,{product:p});
  
    }
  
    ionViewDidLoad() {
    }
  
  }
  </code></pre>
  
  <p>Below is the ionic Info:</p>
  
  <pre><code>Cordova CLI: 7.0.0 
  Ionic Framework Version: 3.0.1
  Ionic CLI Version: 2.2.3
  Ionic App Lib Version: 2.2.1
  Ionic App Scripts Version: 1.3.0
  ios-deploy version: Not installed
  ios-sim version: Not installed
  OS: Linux 4.4
  Node Version: v7.4.0
  Xcode version: Not installed
  </code></pre>
  
  <p>I have read a lot of threads where people have the same issue but not able to figure out how to solve this.</p>
  
  <p>Thanks!</p>