CODEWITHSUNDEEP
angularionic2
R.Anandan
R.Anandan

Reputation: 342

Ionic 2 exception handling not working?

I am trying to create an ionic-2 hybrid app using angular 2. In that, I have implemented the ErrorHandlerinterface, but when an error occurs, nothing will happen. I don't know if that is the correct way to implement the error handler This is my first app in ionic 2.

This is my app module code here

import { NgModule, ErrorHandler} from '@angular/core';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
import { MyApp } from './app.component';
import { Page1 } from '../pages/page1/page1';
import { Page2 } from '../pages/page2/page2';
import { homePage } from '../pages/home/homePage';
import { MyPage } from '../pages/my-page/my-page';
import { FormsPage } from '../pages/forms/forms';
import { SharedData } from '../providers/shared-data';
import {MyExceptionHandler} from '../validators/myhandler';


@NgModule({
  declarations: [
    MyApp,
    Page1,
    Page2,
    homePage,
    MyPage,
    FormsPage

  ],
  imports: [
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    Page1,
    Page2,
    homePage,
    MyPage,
    FormsPage

  ],
  providers: [{provide: ErrorHandler, useClass: IonicErrorHandler},SharedData]
})
export class AppModule {}

my appcomponent

import { NgModule,Component, ViewChild,ErrorHandler} from '@angular/core';
//import {provide} from '@angular2/core';
import { Nav, Platform, } from 'ionic-angular';
import { StatusBar, Splashscreen } from 'ionic-native';

import { Page1 } from '../pages/page1/page1';
import { Page2 } from '../pages/page2/page2';
import{homePage} from '../pages/home/homePage';
import { FormsPage } from '../pages/forms/forms';
import {MyExceptionHandler} from '../validators/myhandler';
@NgModule({
  providers: [{provide: ErrorHandler, useClass: MyExceptionHandler}]
})

@Component({
  templateUrl: 'app.html'

})
export class MyApp {
  @ViewChild(Nav) nav: Nav;
  rootPage: any = homePage;
  pages: Array<{title: string, component: any}>;

  constructor(public platform: Platform) {
    this.initializeApp();

    // used for an example of ngFor and navigation
    this.pages = [
      { title: 'gotohomepage', component: homePage },
      { title: 'gotopage1', component: Page1 },
      { title: 'gotopage2', component: Page2 },
      { title: 'forms', component: FormsPage }
    ];

  }

   initializeApp() {
    this.platform.ready().then(() => {
      // Okay, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need.
      StatusBar.styleDefault();
      Splashscreen.hide();
    });
  }

  openPage(page) {
    // Reset the content nav to have just this page
    // we wouldn't want the back button to show in this scenario
    this.nav.setRoot(page.component);
  }
}

and my handler page

import { Component,ViewChild,ErrorHandler } from '@angular/core';

export class MyErrorHandler extends IonicErrorHandler {
  handleError(err: any): void {
  super.handleError(err);//call parent handleError
 }

  ionViewDidLoad() {
    alert('ionViewDidLoad FormsPage');
  }
}

Thanks,

Upvotes: 4

Views: 1552

Answers (1)

Suraj Rao
Suraj Rao

Reputation: 29625

  1. You need to override handleError function in your custom class.

    handleError(err: any): void { super.handleError(err);//call parent handleError // do something with the error }

  2. Also you set IonicErrorHandler as your provider.Check here and this is the github link

You can either set the provider array as:

 providers: [{provide: ErrorHandler, useClass: MyExceptionHandler },SharedData]

Or I suggest trying to extend IonicErrorHandler instead. 

import { Component,ViewChild,ErrorHandler } from '@angular/core';

export class MyExceptionHandler extends IonicErrorHandler implements ErrorHandler{
 handleError(err: any): void {
super.handleError(err);//call parent handleError
// do something with the error
 }
}

Upvotes: 4

Related Questions