Ionic-framework: [v2] Ion-infinite-scroll error when leaving page

[jboothe]

Just wanted to bring to your attention the following error when leaving a page that uses ion-infinite-scroll:

EXCEPTION: TypeError: Cannot read property 'removeEventListener' of null

  <ion-infinite-scroll (infinite)="doInfiniteScroll($event)">
    <ion-infinite-scroll-content></ion-infinite-scroll-content>
  </ion-infinite-scroll>

Reproduce by:

1. Add the above code to a list page
2. Navigate to that page
3. Navigate to another page
4. View console output

My system information:

Cordova CLI: 6.0.0
Ionic Version: 2.0.0-beta.2
Ionic CLI Version: 2.0.0-beta.19
Ionic App Lib Version: 2.0.0-beta.9
ios-deploy version: 1.8.5
ios-sim version: 5.0.6
OS: Mac OS X El Capitan
Node Version: v4.3.1
Xcode version: Xcode 7.2.1 Build version 7C1002

Not positive, but this could also be related to this similar issue.

[adamdbradley]

I updated this test to have the ion-infinite-scroll within a nav, but I'm not getting an error when going to and from the page: https://github.com/driftyco/ionic/tree/2.0/ionic/components/infinite-scroll/test/basic

What do I need to update so I can replicate that error? Thanks

[jboothe]

Thanks, Adam for taking a look at this. Here are the steps to reproduce.

> ionic start tut tutorial --v2 --ts
> cd tut

Add the following code:

// list.html
...
</ion-list>

  <ion-infinite-scroll (infinite)="doInfiniteScroll($event)">
    <ion-infinite-scroll-content></ion-infinite-scroll-content>
  </ion-infinite-scroll>

  <div *ngIf="selectedItem" padding>

then...

// list.ts
...
doInfiniteScroll(infiniteScroll) {
    console.log('Begin async operation');
  }

then...
> ionic serve

Click menu > My First List
Click menu > Hello Ionic

This error is thrown twice:
EXCEPTION: TypeError: Cannot read property 'removeEventListener' of null

[jboothe]

I noticed something that may help zero in on the issue. If you do this, no error is thrown:

Click menu > My First List
Click a list item
Click the Back arrow

However, clicking _menu > My First List_, then _menu > Hello Ionic_, the error is thrown.

[BugsBunnyBR]

It seems to happen with the ion-refresher too.

[mebibou]

Yep confirming I have the same problem since I put the <ion-refresher> on my page, and leaving the page I always get this error

[iignatov]

I can confirm that the bug still exists in beta.3. As @jboothe mentioned, the exception is thrown when leaving the page that contains <ion-infinite-scroll> component. Also, as pointed out by the others, the bug affects also the <ion-refresher> component.

Steps to reproduce:

1. Open: https://plnkr.co/edit/qh5So0FetPKKzjYu3CYf?p=preview
2. Follow the instructions in the demo environment.

Other information:
I did some debugging and realized that the exception is thrown when the InfiniteScroll component tries to remove an event-handler after the element to which the handler is attached is already removed by Content.ngOnDestroy(). The removal procedure is triggered by InfiniteScroll.ngOnDestroy(), which for some reason is called after Content.ngOnDestroy() (InfiniteScroll's host component) has been already completed. A null-check in the function returned by Content._addListener() should fix the problem but I'm not sure if the remaining handler will be removed automatically. In theory when the component's ngOnDestroy() is called before the one of its host component has completed, everything should work fine, but I have no idea why in practice it's called after. I guess that it might be either async by design (without a guarantee which is called first) or due to a bug in Angular 2.

export class Content extends Ion {
  // ...
  private _addListener(type: string, handler: any): Function {
    if (!this.scrollElement) { return; }

    // ensure we're not creating duplicates
    this.scrollElement.removeEventListener(type, handler);
    this.scrollElement.addEventListener(type, handler);

    return () => {
      // NOTE: The exception is thrown here, this.scrollElement is NULL.
      // NOTE: Triggered by InfiniteScroll._setListeners(false) after Content.ngOnDestroy().
      // this.scrollElement && // <- this should fix the problem, but what about the remaining handler?
      this.scrollElement.removeEventListener(type, handler);
    }
  }
  // ...
  // NOTE: Executed and completes before the one of its nested component.
  ngOnDestroy() {
    this._scLsn && this._scLsn();
    // NOTE: The scrollElement is destroyed before InfiniteScroll removes the handler.
    this.scrollElement = this._scLsn = null;
  }
  // ...
}

export class InfiniteScroll {
  // ...
  // NOTE: Executed later than Content.ngOnDestroy().
  ngOnDestroy() {
    // NOTE: This triggers the remove function returned by Content._addListener().
    this._setListeners(false);
  }
}

Which Ionic Version? 2.x

Run ionic info from terminal/cmd prompt:

Your system information:

Cordova CLI: 6.0.0
Ionic Version: 2.0.0-beta.3
Ionic CLI Version: 2.0.0-beta.19
Ionic App Lib Version: 2.0.0-beta.9
OS: Windows 8.1
Node Version: v5.8.0

[thiphariel]

Confirming same bug on ion-refresher too. Back button & swipe back throws the error.

[apat183]

Confirmed same for me when adding ion-refresher.

Your system information:

Cordova CLI: 6.0.0
Ionic Version: 2.0.0-beta.3
Ionic CLI Version: 2.0.0-beta.19
Ionic App Lib Version: 2.0.0-beta.9
ios-deploy version: 1.8.5 
ios-sim version: 5.0.6 
OS: Mac OS X El Capitan
Node Version: v5.4.0
Xcode version: Xcode 7.2 Build version 7C68 

[tuongaz]

I got the same issue

[wangtiantian2016]

I got the same issue.

Your system information:

Cordova CLI: 6.0.0
Ionic Version: 2.0.0-beta.3
Ionic CLI Version: 2.0.0-beta.19
Ionic App Lib Version: 2.0.0-beta.9
OS: Windows 7 SP1
Node Version: v4.3.1

[cperez87]

Experiencing same problem.

My system info:
Cordova CLI: 6.1.0 (cordova-lib@undefined)
Gulp version: CLI version 3.9.1
Gulp local: Local version 3.9.1
Ionic Version: 2.0.0-beta.3
Ionic CLI Version: 2.0.0-beta.23
Ionic App Lib Version: 2.0.0-beta.13
Node Version: v5.9.1

[warnerpinz]

I'm stuck on this error.
Are there any workaround for this?

[Artfloriani]

@warner-pinz I guess we have to wait til beta.4

[iignatov]

@warner-pinz You could apply the fix directly in your project:

1. From inside of your project's folder open the following path:
   node_modules/ionic-angular/components/content/content.js
2. Search for this string:
   _this.scrollElement.removeEventListener(type, handler);
3. Add a new line right before it and there paste the following:
   if (!_this.scrollElement) { return; }
4. Save the file.
5. The problem should be fixed.

[denkomanceski]

Yep, I have the same problem.

[adamdbradley]

Is this still an issue with beta4?

[thiphariel]

@adamdbradley Hey, I tried, and the problem is solved for me, but with ion-refresher as mentionned (https://github.com/driftyco/ionic/issues/5760#issuecomment-198284301)
So it's probably solved for ion-infinite-scroll too.

Waiting for confirmation :)

Thanks !

[perdjurner]

Fixed for me.

[adamdbradley]

Great thanks!

[iignatov]

I updated the demo plunker environment to beta.4 and can confirm that the problem is fixed for both <ion-infinite-scroll> and <ion-refresher>.

[prathyushp1]

thanks problem fixed....thankyou IIgnatov...