Ionic 4 infinite scroll not working

Ionic Framework
1 
Ionic:

   Ionic CLI                     : 5.2.0 (/usr/local/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 4.6.0
   @angular-devkit/build-angular : 0.13.9
   @angular-devkit/schematics    : 7.3.9
   @angular/cli                  : 7.3.9
   @ionic/angular-toolkit        : 1.5.1

Utility:

   cordova-res : 0.2.0 (update available: 0.5.1)
   native-run  : 0.2.0 (update available: 0.2.7)

System:

   NodeJS : v10.15.0 (/usr/local/bin/node)
   npm    : 6.9.0
   OS     : macOS High Sierra

package.json

{
  "name": "Ionic4VirtualInfiniteScrollDemo",
  "version": "0.0.1",
  "author": "Ionic Framework",
  "homepage": "https://ionicframework.com/",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/common": "^7.2.2",
    "@angular/core": "^7.2.2",
    "@angular/forms": "^7.2.2",
    "@angular/http": "^7.2.2",
    "@angular/platform-browser": "^7.2.2",
    "@angular/platform-browser-dynamic": "^7.2.2",
    "@angular/router": "^7.2.2",
    "@ionic-native/core": "^5.0.0",
    "@ionic-native/splash-screen": "^5.0.0",
    "@ionic-native/status-bar": "^5.0.0",
    "@ionic/angular": "^4.1.0",
    "core-js": "^2.5.4",
    "rxjs": "~6.5.1",
    "tslib": "^1.9.0",
    "zone.js": "~0.8.29"
  },
  "devDependencies": {
    "@angular-devkit/architect": "~0.13.8",
    "@angular-devkit/build-angular": "~0.13.8",
    "@angular-devkit/core": "~7.3.8",
    "@angular-devkit/schematics": "~7.3.8",
    "@angular/cli": "~7.3.8",
    "@angular/compiler": "~7.2.2",
    "@angular/compiler-cli": "~7.2.2",
    "@angular/language-service": "~7.2.2",
    "@ionic/angular-toolkit": "~1.5.1",
    "@types/node": "~12.0.0",
    "@types/jasmine": "~2.8.8",
    "@types/jasminewd2": "~2.0.3",
    "codelyzer": "~4.5.0",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.1.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~1.1.2",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.4.0",
    "ts-node": "~8.3.0",
    "tslint": "~5.17.0",
    "typescript": "~3.1.6"
  },
  "description": "An Ionic project"
}

home.page.html

<ion-header>
  <ion-toolbar>
    <ion-title>
      Ionic Infinite Scroll
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <div class="ion-padding">

    <ion-list>
      <ion-item *ngFor="let item of items">{{item}}</ion-item>
    </ion-list>

    <ion-infinite-scroll threshold="250px" (ionInfinite)="loadData($event)" [disabled]="numTimesLeft <= 0">
      <ion-infinite-scroll-content
        loadingSpinner="bubbles"
        loadingText="Loading more data...">
      </ion-infinite-scroll-content>
    </ion-infinite-scroll>

  </div>
</ion-content>

home.page.ts

import { Component, ViewChild } from '@angular/core';
import { IonInfiniteScroll } from '@ionic/angular';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {

  items = [];
  numTimesLeft = 5;

  @ViewChild(IonInfiniteScroll) infiniteScroll: IonInfiniteScroll;

  constructor() {
    this.addMoreItems();
  }

  loadData(event) {
    setTimeout(() => {
      console.log('Done');
      this.addMoreItems();
      this.numTimesLeft -= 1;
      event.target.complete();
    }, 2000);
  }

  addMoreItems() {
    for (let i=0; i<20; i++)
      this.items.push(i);
  }

}

Not working on fresh blank project.
Iā€™ve installed this (exactly the same code)
git clone https://github.com/JamiBot/Ionic-4-Infinite-Scroll-Example.git

And unique difference is ā€œpackage-lock.jsonā€ file

Any idea to make infinite scroll working ?

UPDATE:
Iā€™ve discovered than official documentation example not working !!!


Tested on Chrome 75.0.3770.100 and Safari 12.1.1
This is IMPORTANT BUG

2 Likes
2

same problem with me, anyone can us solution ?

1 Like
3

Facing same issue! Any possible hacks?

4

Iā€™m seeing the same issue as well.

5

Currently, you need to downgrade to 4.5.0 as this bug is reported in github: https://github.com/ionic-team/ionic/issues/18632
With other many issues https://github.com/ionic-team/ionic/issues/18655

So version 4.6.0 is totally broken, downgrade or wait until version 4.6.1

6

I have the same problem with Ionicv4

7

Some news about bug?

8

Unfortunately dontā€™t work, Iā€™ve implemented my own button ā€œmoreā€ on bottom of page

9

Can you give an example?
I need something similar.
Thanks

10

I have checked today by updating Ionic(npm i -g ionic) and Project using Npm Update(npm update). Now Infinite Scroll is working fine.

1 Like
11

They Fixed ist in 4.6.2

1 Like
12

in @ionic/angular 4.6.2?
Are you sure?

13

Yes. It fixed. I was also facing the same problem then I upgrade ionic 4.6.0 to 4.6.2 and it working fine.

14

How i can upgrade ionic 4.6.0 to 4.6.2?