Ngx-infinite-scroll: TypeError: Object(...) is not a function\n at attachScrollEvent

[Tsoko]

hey there i recently try to update to the new version ngx-infinite-scroll(latest) from angular2-infinite-scroll(latest).
And i have this now :

<div     infinite-scroll 
            [infiniteScrollDistance]="2"
            [infiniteScrollThrottle]="500"
            (scrolled)="onScroll()"
            [infiniteScrollDisabled]="!isMaximize"
            [scrollWindow]="false"
            [fromRoot]="true" 
            [infiniteScrollContainer]="flag1 ? '.class-wrapper': flag2 ? '.class-wrapper2' : '.class-wrapper3'">

Everything was working fine at my local environment , also on test server but when we went to staging
and asked some colleagues to test it they catch a bug.
The infinity scroll got stuck and doesn't want to work more . i checked our logs and found that error :
"stacktrace" : "TypeError: Object(...) is not a function\n at attachScrollEvent (0.chunk.js?v=e120c39f29142ed3cef8:176:170011)\n at createScroller (0.chunk.js?v=e120c39f29142ed3cef8:176:169370)\n at 0.chunk.js?v=e120c39f29142ed3cef8:176:172612\n at e.invoke (zone.js/0.8.20/zone.min.js:1:22107)\n at r.run (zone.js/0.8.20/zone.min.js:1:17265)\n at NgZone.runOutsideAngular (prefetch.js?v=4.0.v20180607070147:170:19140)\n at InfiniteScrollDirective.setup (0.chunk.js?v=e120c39f29142ed3cef8:176:172565)\n at InfiniteScrollDirective.ngOnChanges (0.chunk.js?v=e120c39f29142ed3cef8:176:172463)\n at checkAndUpdateDirectiveInline (prefetch.js?v=4.0.v20180607070147:78:4896)\n at checkAndUpdateNodeInline (prefetch.js?v=4.0.v20180607070147:113:6330)"

any way because i couldn't replicate it myself i checked if there is any difference on the builds but i couldn't find . Also i can't provide you with example when i cannot replicate it myself ... (but i see the error in the logs from my colleagues ).
here are the dependencies we use :

"devDependencies": {
    "angular2-router-loader": "^0.3.5",
    "angular2-template-loader": "^0.6.2",
    "css-loader": "^0.28.7",
    "extract-text-webpack-plugin": "^3.0.2",
    "file-loader": "^1.1.5",
    "html-loader": "^0.5.1",
    "html-webpack-plugin": "^2.30.1",
    "nodemon": "1.12.1",
    "null-loader": "^0.1.1",
    "phantomjs-prebuilt": "^2.1.16",
    "raw-loader": "^0.5.1",
    "rimraf": "2.6.2",
    "style-loader": "^0.18.2",
    "ts-loader": "^3.1.1",
    "typescript": "2.6.1",
    "typings": "^2.1.1",
    "webpack": "3.8.1",
    "webpack-merge": "^4.1.1",
    "@angular/compiler": "5.1.1",
    "@angular/compiler-cli": "5.1.1",
    "@ngtools/webpack": "1.9.5"
  },
  "dependencies": {
    "@angular/animations": "5.1.1",
    "@angular/common": "5.1.1",
    "@angular/core": "5.1.1",
    "@angular/forms": "5.1.1",
    "@angular/http": "5.1.1",
    "@angular/platform-browser": "5.1.1",
    "@angular/platform-browser-dynamic": "5.1.1",
    "@angular/router": "5.1.1",
    "ngx-infinite-scroll": "^0.8.4",
    "core-js": "2.5.1",
    "es6-promise": "4.1.1",
    "es6-shim": "0.35.3",
    "intl": "1.2.5",
    "mydatepicker": "2.5.0",
    "process": "0.11.10",
    "reflect-metadata": "0.1.10",
    "rxjs": "5.5.2",
    "setimmediate": "1.0.5",
    "zone.js": "0.8.20"
  },

The steps of reproduction are just to click on button which change the isMaximize variable and then start scrolling.
onScroll is just doing request to the server and updating the results :)

Same thing without
[fromRoot]="true"
on other version of infiniteScroll(angular2-infinite-scroll) works fine and no one can catch that error :)

[Anirban1989]

I am getting the same error on page loading

SlotGamesComponent.html:64 ERROR TypeError: Object(...) is not a function
at attachScrollEvent (ngx-infinite-scroll.es5.js:461)
at createScroller (ngx-infinite-scroll.es5.js:445)
at eval (ngx-infinite-scroll.es5.js:559)
at ZoneDelegate.invoke (zone.js:388)
at Zone.run (zone.js:138)
at NgZone.runOutsideAngular (core.js:4697)
at InfiniteScrollDirective.setup (ngx-infinite-scroll.es5.js:558)
at InfiniteScrollDirective.ngAfterViewInit (ngx-infinite-scroll.es5.js:531)
at callProviderLifecycles (core.js:12706)
at callElementProvidersLifecycles (core.js:12673)

My scroll setting is:
<div infinite-scroll [infiniteScrollDistance]="modalScrollDistance" [infiniteScrollThrottle]="modalScrollThrottle" [scrollWindow]="false" (scrolled)="onModalScrollDown()"> <p>Hey</p> </div>

Can you suggest what might be the issue?

[guigzz]

Same here, just trying to replicate the simple Documentation usecase causes the issue.

[guigzz]

Ok, my bad, the README explicitly says : For Angular 4 < v =< 5.5 - use version [email protected].

With this information in mind, it works like a charm ;)

[orizens]

https://github.com/orizens/ngx-infinite-scroll/blob/master/README.md#angular-support

[Tsoko]

For Angular 4 < v =< 5.5 - use version [email protected]
we tried on [email protected]

[orizens]

@Tsoko i think you need to bump rxjs to 5.5.6

[Tsoko]

@orizens thanks i will try :)