Ionic-framework: [v4.6.0] bug: ionInfinite not emitted

Created on 26 Jun 2019 · 14Comments · Source: ionic-team/ionic-framework

Bug Report

Ionic version:
[x] 4.x

Current behavior:
The ionInfinite event is never emitted when Ionic One is used. I observed this in a Stencil One PWA but others (see messages below) are reporting facing the same behavior in Angular apps.

<ion-infinite-scroll threshold="100px" id="infinite-scroll" onIonInfinite={($event) => console.log('Nothing happens')}>
          <ion-infinite-scroll-content>
          </ion-infinite-scroll-content>
        </ion-infinite-scroll>

Steps to reproduce:
I provide a super simple sample repo:

git clone https://github.com/peterpeterparker/infinite
cd infinite
npm install
npm run start

Try to scroll, ionInfinite will not be emitted

Other information:

"@ionic/core": "^4.6.0",
"@stencil/core": "^1.1.2"

core bug

Source

peterpeterparker

👍11

Most helpful comment

Same problem in an Angular app: "@ionic/angular": "4.6.0"

ionInfinite event never emitted

  <ion-infinite-scroll threshold="100px" (ionInfinite)="loadData($event)">
    <ion-infinite-scroll-content
      loadingSpinner="bubbles"
      loadingText="Loading more data...">
    </ion-infinite-scroll-content>
  </ion-infinite-scroll>

Works fine with "@ionic/angular": "4.5.0"

ralscha on 26 Jun 2019

👍5

All 14 comments

Same problem in an Angular app: "@ionic/angular": "4.6.0"

ionInfinite event never emitted

  <ion-infinite-scroll threshold="100px" (ionInfinite)="loadData($event)">
    <ion-infinite-scroll-content
      loadingSpinner="bubbles"
      loadingText="Loading more data...">
    </ion-infinite-scroll-content>
  </ion-infinite-scroll>

Works fine with "@ionic/angular": "4.5.0"

ralscha on 26 Jun 2019

👍5

+1.
And docs demo don't work too.
https://ionicframework.com/docs/api/infinite-scroll

rdlabo on 27 Jun 2019

That still work fine in v4.4.2, got error (not emitted) when upgrade to 4.5/4.6

quynh-ng on 27 Jun 2019

Downgrade "@ionic/angular": "4.5.0" works for me.
@quynh-ng this is my package.json.

{
  "name": "bible-miner-cli",
  "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.5.0",
    "cordova-android": "8.0.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",
    "@ionic/lab": "2.0.4",
    "@types/jasmine": "~2.8.8",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~12.0.0",
    "codelyzer": "~4.5.0",
    "cordova-plugin-device": "^2.0.2",
    "cordova-plugin-ionic-keyboard": "^2.1.3",
    "cordova-plugin-ionic-webview": "^4.1.1",
    "cordova-plugin-splashscreen": "^5.0.2",
    "cordova-plugin-statusbar": "^2.4.2",
    "cordova-plugin-whitelist": "^1.3.3",
    "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",
  "cordova": {
    "plugins": {
      "cordova-plugin-whitelist": {},
      "cordova-plugin-statusbar": {},
      "cordova-plugin-device": {},
      "cordova-plugin-splashscreen": {},
      "cordova-plugin-ionic-webview": {
        "ANDROID_SUPPORT_ANNOTATIONS_VERSION": "27.+"
      },
      "cordova-plugin-ionic-keyboard": {}
    },
    "platforms": [
      "android"
    ]
  }
}

rernesto on 27 Jun 2019

I'm honestly not sure what changed, but I submitted a PR that fixes it

https://github.com/ionic-team/ionic/pull/18647

positlabs on 28 Jun 2019

Version 4.5.0 works fine, seems a massive upgrade to Stencil One which happened in version 4.6.0 caused the issue.

AlirezaAsadi on 30 Jun 2019

same issue here

supperdsj on 30 Jun 2019

Downgrade "@ionic/angular": "4.5.0" works for me.
@quynh-ng this is my package.json.

{
  "name": "bible-miner-cli",
  "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.5.0",
    "cordova-android": "8.0.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",
    "@ionic/lab": "2.0.4",
    "@types/jasmine": "~2.8.8",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~12.0.0",
    "codelyzer": "~4.5.0",
    "cordova-plugin-device": "^2.0.2",
    "cordova-plugin-ionic-keyboard": "^2.1.3",
    "cordova-plugin-ionic-webview": "^4.1.1",
    "cordova-plugin-splashscreen": "^5.0.2",
    "cordova-plugin-statusbar": "^2.4.2",
    "cordova-plugin-whitelist": "^1.3.3",
    "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",
  "cordova": {
    "plugins": {
      "cordova-plugin-whitelist": {},
      "cordova-plugin-statusbar": {},
      "cordova-plugin-device": {},
      "cordova-plugin-splashscreen": {},
      "cordova-plugin-ionic-webview": {
        "ANDROID_SUPPORT_ANNOTATIONS_VERSION": "27.+"
      },
      "cordova-plugin-ionic-keyboard": {}
    },
    "platforms": [
      "android"
    ]
  }
}

this package.json is wrok for me, thx

supperdsj on 30 Jun 2019

Downgrading @ionic/angular version from 4.6.0 to 4.5.0 fixed it for me too.

rodolfofranco on 30 Jun 2019

Guys... we get it. It works in 4.5.0.

It would be great to hear what the actual regression was

positlabs on 30 Jun 2019

Agree.

Also note, as stated in the issue I opened, I'm building a PWA using Stencil One, therefore a downgrade isn't really a solution as I would have to downgrade both Stencil and my app too.

peterpeterparker on 30 Jun 2019

When fixing this, maybe you can also take this in consideration: https://github.com/ionic-team/ionic/issues/18653

Especially the "Additional Information" part (last paragraph).

RafaelKr on 1 Jul 2019

Thanks for the issue! I am going to close this as it has been fixed in Stencil, it will be in the 4.6.1 hotfix release. Please follow #18655 for updates on this. 🙂

brandyscarney on 1 Jul 2019

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.