Ionic-framework: [4.6.1] bug: runOutsideAngular problem in IonVirtualScroll

[petrot]

Bug Report

Ionic version:


[x] 4.x

Current behavior:

This bug appeared in 4.6.1 (4.6.0, too?). With 4.5 there were no errors.

I got the following error on every page where I use IonVirtualScroll:

ERROR TypeError: Cannot read property 'runOutsideAngular' of undefined
    at IonVirtualScroll.set (fesm5.js:1386)

The problem is on the proxyInputs function:

function proxyInputs(Cmp, inputs) {
    /** @type {?} */
    var Prototype = Cmp.prototype;
    inputs.forEach((/**
     * @param {?} item
     * @return {?}
     */
    function (item) {
        Object.defineProperty(Prototype, item, {
            get: /**
             * @return {?}
             */
            function () { return this.el[item]; },
            set: /**
             * @param {?} val
             * @return {?}
             */
            function (val) {
                var _this = this;
                this.z.runOutsideAngular((/**  <--- ERROR SOURCE
                 * @return {?}
                 */
                function () { return _this.el[item] = val; }));
            },
        });
    }));
}

Expected behavior:
Work normally

Steps to reproduce:

Other information:

Ionic info:

Ionic:

   Ionic CLI                     : 5.2.1 (/Users/tomi/.nvm/versions/node/v10.14.1/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 4.6.1
   @angular-devkit/build-angular : 0.11.4
   @angular-devkit/schematics    : 7.3.9
   @angular/cli                  : 7.3.9
   @ionic/angular-toolkit        : 1.5.1

Cordova:

   Cordova CLI       : 9.0.0 ([email protected])
   Cordova Platforms : android 8.0.0, ios 5.0.1
   Cordova Plugins   : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 4.1.1, (and 21 other plugins)

Utility:

   cordova-res : 0.3.0 (update available: 0.5.2)
   native-run  : 0.2.7 

System:

   Android SDK Tools : 26.1.1 (/Users/tomi/Library/Android/sdk)
   ios-deploy        : 1.9.4
   ios-sim           : 8.0.1
   NodeJS            : v10.14.1 (/Users/tomi/.nvm/versions/node/v10.14.1/bin/node)
   npm               : 6.10.0
   OS                : macOS Mojave
   Xcode             : Xcode 10.2.1 Build version 10E1001

[rernesto]

I was pushed to downgrade to 4.5 because scroll event never was triggered in 4.6. I upgraded to 4.6.1 and everything it's running smoothly. I manually delete www directory and run ionic repair after updates.

[petrot]

@rernesto deleting www folder and run ionic reapair didn't solve the problem :(

[rernesto]

@rernesto deleting www folder and run ionic reapair didn't solve the problem :(

Ionic:

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

Cordova:

   Cordova CLI       : 9.0.0 ([email protected])
   Cordova Platforms : android 8.0.0
   Cordova Plugins   : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 4.1.1, (and 6 other plugins)

Utility:

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

System:

   Android SDK Tools : 26.1.1 (/opt/android-sdk)
   NodeJS            : v10.16.0 (/usr/bin/node)
   npm               : 6.9.2
   OS                : Linux 4.15

Can you sow us your ion-infinite implementation?
Mine look like this:

...
<ion-infinite-scroll *ngIf="records.length > 0"  threshold="100px" (ionInfinite)="loadMore($event)">
    <ion-infinite-scroll-content
        loadingSpinner="bubbles">
    </ion-infinite-scroll-content>
  </ion-infinite-scroll>

...
loadMore(event) {
    this.page++;
    if (this.page > this.info.maxPage) {
      event.target.complete();
    } else {
      setTimeout(() => {
        this.apiService.searchData(
            this.searchValue, this.bibleVersionValue.id, this.page
        ).subscribe(response => {
          this.records = this.records.concat(response.results);
          this.info = response.info;
          event.target.complete();
        });
      }, 500);
    }
  }
...

[zeusstl]

Seeing the same error as @petrot when I upgraded to 4.6.1. Had to revert, bc I couldn't find a solution.

<ion-virtual-scroll [items]="sessionsList" checkRange="5" scrollY="true" [approxItemHeight]="getApproxItemHeight()">
            <ion-card *virtualItem="let session;">

Worked fine until the update to 4.6.1.

[petrot]

@rernesto the problem is with the virtual-scroll, not with the infinite-scroll.

[DouglasLapsley]

I'm having this problem too. Updated to 4.6.1 just now because ionInfinite event wasn't being triggered. Now I get the following from the ion-virtual-scroll component (which was working fine in my previous version (4.1 I think):

ERROR TypeError: Cannot read property 'runOutsideAngular' of undefined at IonVirtualScroll.set (fesm5.js:1386) at updateProp (core.js:22305) at checkAndUpdateDirectiveInline (core.js:22056) at checkAndUpdateNodeInline (core.js:23363) at checkAndUpdateNode (core.js:23325) at debugCheckAndUpdateNode (core.js:23959) at debugCheckDirectivesFn (core.js:23919) at Object.eval [as updateDirectives] (HomePage.html:52) at Object.debugUpdateDirectives [as updateDirectives] (core.js:23911) at checkAndUpdateView (core.js:23307)

[petrot]

Thanks for the fix! :)

[brandyscarney]

We're going to release a 4.6.2 today with this fix in it. 🙂

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