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

@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.

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

Yep, I have the same problem.