Ionic-framework: Uncaught TypeError: Cannot read property 'ev' of null on navCtrl.push()

[cmorbitzer]

Ionic version: (check one with "x")
[ ] 1.x
[ x ] 2.x

I'm submitting a ... (check one with "x")
[ x ] bug report
[ ] feature request
[ ] support request => Please do not submit support requests here, use one of these channels: https://forum.ionicframework.com/ or http://ionicworldwide.herokuapp.com/

In RC.5 when using this.navCtrl.push() on a specific page:

Uncaught TypeError: Cannot read property 'ev' of null
    at Content._readDimensions (node_modules/ionic-angular/components/content/content.js:539)
    at eval (node_modules/ionic-angular/components/content/content.js:158)
    at SafeSubscriber.schedulerFn [as _next] (node_modules/@angular/core/src/facade/async.js:101)
    at SafeSubscriber.__tryOrUnsub (node_modules/rxjs/Subscriber.js:223)
    at SafeSubscriber.next (node_modules/rxjs/Subscriber.js:172)
    at Subscriber._next (node_modules/rxjs/Subscriber.js:125)
    at Subscriber.next (node_modules/rxjs/Subscriber.js:89)
    at EventEmitter.Subject.next (node_modules/rxjs/Subject.js:55)
    at EventEmitter.emit (node_modules/@angular/core/src/facade/async.js:81)
    at Array.eval (node_modules/ionic-angular/transitions/page-transition.js:26)

The page I am trying to load includes @ViewChild(Content) content: Content; and in the template <custom-component [content]="content"></custom-component>. Inside the component.ts: @Input() content: Content; Although I do similar behavior on another page and this error doesn't happen.

Ionic info:

Ionic Framework Version: 2.0.0-rc.4
Ionic CLI Version: 2.1.18
Ionic App Lib Version: 2.1.9
Ionic App Scripts Version: 1.0.0
ios-deploy version: Not installed
ios-sim version: Not installed
OS: Windows 10
Node Version: v6.9.2
Xcode version: Not installed

Seems related to #9593 .
Rolling back to RC.4 seems to fix it.

[manucorporat]

Fixed! 🎉

[abierbaum]

@manucorporar Thanks for the fix. Until this gets out in a release is there any workaround that we can use in our applications?

[cmorbitzer]

Untested patch attached, if using ionic-angular rc.5.

content.js.patch.txt

[abierbaum]

@cmorbitzer Thanks. Looks pretty simple. I will see if I can work up a way to monkey patch this into place. We are current pulling from the public npm package for ionic-angular and I don't really know a good way to build our own to work around this bug.

[tomaszczechowski]

I'm facing same issue and unfortunately patch (@cmorbitzer) doesn't resolve it. All the same I applyed patch and investigated what causes my issue comparing two pages. And result is:

Working page:

export class OrderDataPage {
  loading: boolean = true;
  ...

Not working page:

export class CategoryPage {
  loading: boolean;
  ...

and both have similar HTML:

<ion-content padding *ngIf="loading">
  <ion-spinner class="page-loader" name="crescent"></ion-spinner>
</ion-content>

<ion-content padding *ngIf="!loading">....</ion-content>

When I assigned default value loading: boolean = true; it began work.

Consider whether you have similar issue, if so my solution may help.

[cmorbitzer]

@tomaszczechowski I've experienced sporadic issues before using multiple <ion-content> tags in the same page. To fix it I refactored the code to use one <ion-content> and placed my different views in <div> tags. For example:

<ion-content padding>
  <div *ngIf="loading">
    <ion-spinner class="page-loader" name="crescent"></ion-spinner>
  </div>
  <div *ngIf="!loading">....</div>
</ion-content>

[JWesorick]

I'm getting this same error with 2.0.0. What's different is I'm trying to swap out two side menus.

<app-side-menu [myContent]="content" [nav]="nav" *ngIf="!sellerMode" (appModeChange)="onAppModeChange($event);"></app-side-menu>
<seller-side-menu [myContent]="content" [nav]="nav" *ngIf="sellerMode"></seller-side-menu>

<app-chat-menu [myContent]="content" [nav]="nav"></app-chat-menu>

<!-- Disable swipe-to-go-back because it's poor UX to combine STGB with side menus -->
<ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>

sellerMode is defined as sellerMode: boolean = false; The error happens when I try switching it to true.

[lincolnthree]

I seem to get this error randomly on certain navigation events. Haven't been able to pinpoint it more closely yet. Working on it...

[chanoch]

Could this be related to attempting to get the scroll event (_scroll) when calling the _readDimensions in Content? There's no null check in this._scroll.ev on line 525 in my distribution. I'm not sure what would cause the property to become null as it is initialised in the contructor.

[bergmito]

@chanoch look this link https://github.com/driftyco/ionic/issues/10186

[chanoch]

Thanks Felipe @bergmito - worked for me

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.