Ionic 2 error not showing in nav.push(somePage);

Ionic Framework ionic-v3
1

I’m working on a Ionic 2 app with about 5 pages.
What is happening is that I can only see error in pages that are set to rootPage( I have a side menu)

After I set the rootPage, and inside that view do this.nav.push(anotherPage) error in anotherPage are not shown. The app does not navigate and not error is shown.

I debugged the code and found the error being thrown at
line 2174 of es6-shim.js

var promiseReactionJob = function (handler, promiseCapability, argument) { var handlerResult, f; if (promiseCapability === PROMISE_FAKE_CAPABILITY) { // Fast case, when we don't actually need to chain through to a // (real) promiseCapability. return handler(argument); } try { handlerResult = handler(argument); f = promiseCapability.resolve; } catch (e) { HERE I CAN SEE THE ERROR handlerResult = e; f = promiseCapability.reject; } f(handlerResult); };

Regards.

2

Did you import the page you want to .push to and set nav in constructor?`

import {EventListPage} from '../event-list/event-list';
...
 constructor(public nav: NavController) {
    this.nav = nav;
  }
navigateToList(){
    this.nav.push(EventListPage);
}
3

The problem is not the error itself. The problem is the error not bubbling up to the root so it caan show it on the console.

4

Are you sure you have error handlers on all your Promises? I could imagine this being the result of overly optimistic Promise handling.

5

This is an example project. Basically it is start tab project from ‘ionic start test --v2 --ts’.
I added a Page4 and called it from Page1. Added an error on purpose on Page4 that does not show.

<ion-navbar *navbar>
  <ion-title>Tab 1</ion-title>
</ion-navbar>

<ion-content padding class="page1">
  <h2>Welcome to Ionic!</h2>
  <p>
    This starter project comes with simple tabs-based layout for apps
    that are going to primarily use a Tabbed UI.
  </p>
  <p>
    Take a look at the <code>app/</code> directory to add or change tabs,
    update any existing page or create new pages.
  </p>
  <button (click)="goToPage4()">Page 4</button>
</ion-content>


import {Page, NavController} from 'ionic-angular';
import {Page4} from '../page4/page4';

@Page({
    templateUrl: 'build/pages/page1/page1.html',
})
export class Page1 {
    constructor(private nav: NavController) {

    }
  
    goToPage4() {
        this.nav.push(Page4);
    }
}

import {Page} from 'ionic-angular';

@Page({
    templateUrl: 'build/pages/page4/page4.html'
})
  export class Page4 {

    something: Object;

    constructor() {
         this.something.foo = 100;
    }
}

If you push Button on Page1 no error shows.

6

NavController.push returns a Promise<any>, which you’re not handling.

7

Change it for

goToPage4() {
    this.nav.push(Page4).then(
      response => {
        console.log('Response ' + response);
      },
      error => {
        console.log('Error: ' + error);
      }
    ).catch(exception => {
      console.log('Exception ' + exception);
    });;
  }

nothing gets executed

2 Likes
8

I’m not positive, but perhaps the problem is in NavController.loadPage. It calls this._compiler.compileInHost(view.componentType) but then appears neither to return the promise that comes back from that function nor handles its rejection. I am seeing what I think is that promise being rejected with the DI error that I suspect you are expecting to see (about Page4’s something being undefined).

9

I created this plunkr and here it works, but not if you run with ionic serve in your local

10

I am having the same issue. In my case I tried to load the page using nav.setRoot(page1) and error doesn’t show if any error occur in page1. It just don’t load the page. It’s very difficult to work without getting the actual error message.

12

@aftab0000 Are you using the latest release - 2.0.0-beta.6 (with Angular 2.0.0-beta.15)? If not, I guess that updating your project to beta.6 might solve the problem. I think that there was an issue in some of the older Angular releases that prevented the errors to be passed properly through the stack.

13

Thanks for your reply. I was using 2.0.0-beta.4 with Angular 2.0.0-beta.14 and updated to 2.0.0-beta.6 with Angular 2.0.0-beta.15 but still having the same issue. These are the packages I am using

"angular2": "2.0.0-beta.15",
"es6-promise": "^3.1.2",
"es6-shim": "^0.35.0",
"ionic-angular": "2.0.0-beta.6",
"ionic-native": "^1.2.0",
"ionicons": "3.0.0-alpha.3",
"lodash": "4.11.2",
"ng2-ui-auth": "2.1.0",
"reflect-metadata": "0.1.2",
"rxjs": "5.0.0-beta.2",
"zone.js": "0.6.12"

This time I also tried to throw exception manually (throw new Error(“Exception from a page”); ) but not getting the error message in console.

14

whats the issue? Please try to provide a small demo in a git repo that we can look at.

15

@aftab0000 Are you by any chance using Mac OS X, could you run ionic info and paste the output here?

16

I see it fixed with the new version beta 6 and angular beta 15

17

@iignatov Yes I am using Mac OS X and here is my ionic info result

Cordova CLI: Not installed
Gulp version: CLI version 3.9.0
Gulp local: Local version 3.9.1
Ionic Framework Version: 2.0.0-beta.6
Ionic CLI Version: 2.0.0-beta.25
Ionic App Lib Version: 2.0.0-beta.15
ios-deploy version: 1.8.6
ios-sim version: 5.0.8
OS: Mac OS X El Capitan
Node Version: v4.2.3
Xcode version: Xcode 7.3 Build version 7D175

I have also add one demo code in git. In the list.ts I have throw an exception

1 Like
18

@aftab0000 Thanks for the confirmation! I guess that this is something platform-specific. A similar behavior on OS X was reported in 2 other topics (1st and 2nd) so I’ll open a new issue for further investigation.

19

@iignatov: I suspect it’s not platform-specific. The code that I was concerned about upthread was modified in this recent commit.

20

Not sure about this, but thanks for pointing it out - I’ll take a closer look. I was not able to reproduce this behavior on Windows (check out the test results). Furthermore all reports for similar issues that I’ve seen until now are on Mac OS X.

21

If my suspicions are correct, that would be a different issue. I suspect a (now fixed) bug in NavController here, and that thread didn’t mention using NavController. It’s really easy to forget to handle rejected Promises in application code, which will result in losing errors without there actually being any framework bugs.