Ionic-framework: [v4] infinite-scroll is not working when calling complete()

[PoiScript]

Bug Report

Ionic Info
Run ionic info from a terminal/cmd prompt and paste the output below.

cli packages: (/home/poi/.config/yarn/global/node_modules)

   @ionic/cli-utils  : 2.0.0-rc.5
   ionic (Ionic CLI) : 4.0.0-rc.5

local packages:

   @angular-devkit/core       : 0.6.0
   @angular-devkit/schematics : 0.6.0
   @angular/cli               : 6.0.0
   @ionic/schematics-angular  : 1.0.0-rc.5
   Ionic Framework            : @ionic/angular 4.0.0-alpha.4

System:

   NodeJS : v9.11.1
   npm    : not installed
   OS     : Linux 4.16

Describe the Bug
In my case, I'm not doing some async operations, I just don't want to show too many items at once, so I use the infinite scroll. But I got such error when I trying to finish it:

core.js:1601 ERROR TypeError: infiniteScroll.complete is not a function
    at contract.page.ts:24
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:421)
    at Object.onInvokeTask (core.js:4062)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:420)
    at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:188)
    at push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask (zone.js:496)
    at ZoneTask.invoke (zone.js:485)
    at timer (zone.js:2054)

Steps to Reproduce
Steps to reproduce the behavior:
See my code below.

Related Code

  limit = 10;

  data = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20];

  doInfinite(infiniteScroll) {
    this.limit += 5;
    infiniteScroll.complete();
  }

  <ion-list no-lines>
    <ion-item *ngFor="let item of data | slice:0:limit">
      <ion-label color="primary">{{item}}</ion-label>
    </ion-item>
  </ion-list>

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

Expected Behavior
No error occurs.

Additional Context
List any other information that is relevant to your issue. Stack traces, related issues, suggestions on how to fix, Stack Overflow links, forum links, screenshots, OS if applicable, etc.

[PoiScript]

BTW, I had already check the BREAKING.md and the infinite scroll document in master branch but nethier of them has mentioned this.

[daftclaud]

Getting the same error

[AlanCrevon]

Hi. Same pb here.

If i helps :

cli packages: (/Users/alan/.nvm/versions/node/v9.8.0/lib/node_modules)

   @ionic/cli-utils  : 2.0.0-rc.6
   ionic (Ionic CLI) : 4.0.0-rc.6

global packages:

   cordova (Cordova CLI) : 8.0.0

local packages:

   @angular-devkit/core       : 0.6.0
   @angular-devkit/schematics : 0.6.0
   @angular/cli               : 6.0.1
   @ionic/schematics-angular  : 1.0.0-rc.6
   Cordova Platforms          : none
   Ionic Framework            : @ionic/angular 4.0.0-alpha.7

System:

   ios-deploy : 1.9.2
   NodeJS     : v9.8.0
   npm        : 5.6.0
   OS         : macOS High Sierra

Cheers.
Alan

[mhartington]

Hi there! So this is a change in the kind of events that are emitted in V4.
In v3 we were emitting synthetic Angular events, but in V4 we're emitted HTML events, meaning you need to access the complete method from the event target. The correct way to handle this now is with

 doInfinite(infiniteScrollEvent) {
    this.limit += 5;
    infiniteScrollEvent.target.complete();
  }

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