Support Angular 13

[gloriousjob]

Angular 13 enables Ivy and removes the View Engine. Please update dependencies and configs to support Angular 13.

The following warning shows during a compile:
⠙ Generating browser application bundles (phase: setup)...Processing legacy "View Engine" libraries:

• ngx-virtual-scroller [es2015/esm2015] (git+https://github.com/rintoj/ngx-virtual-scroller.git)
  Encourage the library authors to publish an Ivy distribution.

NOTE: Someone has already opened a PR, which appears to be just running through the ng update's from where the code was at:
#514

[c-goldschmidt]

It looks a lot like this package has been abandoned. The last tag was Feb 2020 and there are no accepted pull request since Nov 2020.

@rintoj @speige @kykint are listed as maintainers but they all haven't interacted with this repository since 2020. I guess we'll have to look for an alternative, which is really sad, because this package is just the best for the job, as far as i know.

[nerumo]

@iharbeck published an angular 13 version on npm:
https://www.npmjs.com/package/@iharbeck/ngx-virtual-scroller
https://github.com/iharbeck/ngx-virtual-scroller

[pjc2007]

Maybe now Angular 14

[iharbeck]

Currently working on Angular 14 version, waiting for fxLayout to be released for Angular 14 to complete final testing.

[lincolnthree]

@iharbeck Awesome! Keep us posted! Is there anywhere we can check out the progress?

[iharbeck]

@lincolnthree @pjc2007
Just pushed a new release, please give it a try.

@iharbeck/[email protected]

https://www.npmjs.com/package/@iharbeck/ngx-virtual-scroller
https://github.com/iharbeck/ngx-virtual-scroller

[pjc2007]

Thankyou @iharbeck . I have updated this and Angular to 14. So far so good.

[pjc2007]

@iharbeck Actually, I just realised I did not point to the correct npm (@iharbeck/[email protected])

I've now done that, deleted my node_modules, reinstalled, but am getting this error (in both IDE and when I compile)

Any ideas why this would be?

[iharbeck]

just change the import to @iharbeck as well. The IDE should fix it if you remove the import and use the code completion.

[pjc2007]

Thankyou again @iharbeck . The above worked and now have it incorporated, and all looks good my initial tests in my use case (our QA now be testing the app)

[joseluiz98]

@lincolnthree @pjc2007 Just pushed a new release, please give it a try.

@iharbeck/[email protected]

https://www.npmjs.com/package/@iharbeck/ngx-virtual-scroller https://github.com/iharbeck/ngx-virtual-scroller

I'm having this error with that version :(

Error: ../condition/node_modules/ngx-virtual-scroller/virtual-scroller.d.ts:1:23 - error TS2688: Cannot find type definition file for 'tween.js'.

1 /// <reference types="tween.js" />

[iharbeck]

@joseluiz98

try to add following dependencies to your project:
"@tweenjs/tween.js"
"@types/tween.js"

[ewalddieser]

@iharbeck will your improvements be merged into this repo?

[iharbeck]

@ewalddieser the rintoj repository is not maintained anymore. You can use my fork instead.

[ewalddieser]

@iharbeck That's really cool. Is there a way for you to take over the main repo? So that people don't get confused and also could just install using npm install ngx-virtual-scroller

I'm currently evaluating this lib and so far it looks really promising. The requirement is to render really long documents (laws) where the chapters are loaded lazily. It works already nicely when normally scrolling up and down.

The difficulty is that user should also be able to quickly scroll hundreds of chapters up/down by dragging the scroll bar. I tried to solve that by creating placeholder chapter objects with estimated heights and then load the real chapters when they are scrolled into view. This works, but not good enough. The document then jumps back and forth awkwardly.

[marian-simonca]

I am really stuck in Angular 12 and it seems that @iharbeck's package supports only versions 13 and 14.
Do you guys have any idea what I could do?
Perhaps I'm asking stupid questions but my brain is fried from looking around for virtual scroll libraries for the whole day

[gloriousjob]

@marian-simonca
Just use the @iharbeck/ngx-virtual-scroller package instead of ngx-virtual-scroller package, as the thread says. It’s the same but supporting angular 13/14. I’m keeping this issue open here so people are aware of the other package. If you really are stuck in 12, I want to say this repo worked for me. I think 13 was when something stopped working.

[whyboris]

@iharbeck thank you for your fork: https://github.com/iharbeck/ngx-virtual-scroller 🤝

I think we'll be able to get this repository updated sometime in the near future too 🤞 cheers!

[majora2007]

@whyboris does this imply the maintainer is going to also update to Angular 15? I'm in the process of updating the code to Angular 14 (including strict typing) and was planning to raise a PR back to iHarbeck's repository. Should I retarget here or just let the maintainer take care of it?

Edit: I did raise a PR for Angular 14 (minus 2 lines which need help on).
iharbeck#1

[gloriousjob]

@iharbeck I'm not sure what's happening on this repo but do you think you'll do Angular 15 in your fork?
Btw, you've made my life easier by providing the 14 version so keep up the good work!

[iharbeck]

@gloriousjob Just released version 15, please give a try.

[gloriousjob]

Thanks, @iharbeck! Works well!

[ysk3a]

@iharbeck thanks for the v15 fork!
i was wondering if you could look into the demo folder? of course if you time.

also, it seems like you need both ngx-virtual-scroller and @iharbeck/ngx-virtual-scroller to make it work?

I tried to open the demo folder in stackblitz but it seems like there is an issue with the path src/virtual-scroller in list-with-api.component.ts
https://stackblitz.com/github/iharbeck/ngx-virtual-scroller/tree/master/demo?file=src/app/lists/list-with-api.component.ts

opening rintoj's demo folder in stackblitz seemed to work fine though
https://stackblitz.com/github/rintoj/ngx-virtual-scroller/tree/master/demo?file=package.json

[lincolnthree]

There is another library (not a fork) that I think deserves a look:
https://github.com/lVlyke/lithium-ngx-virtual-scroll

It's actually quite simple, supports responsive changes to the viewport size very well, and is quite configurable. Just make sure you specify both [itemHeight] and [itemWidth], or it wont render more than one item.

I think with a little love, and maybe a few features brought over from this lib, this one has a LOT of potential. We are going to try it in our app and see how it goes.

[ichepurnoy]

Dear @iharbeck, I tried your fork, and I have the following build error. Can you pls suggest a workaround?

Error: node_modules/@iharbeck/ngx-virtual-scroller/virtual-scroller.d.ts:148:29 - error TS2315: Type 'Tween' is not generic.
protected currentTween: tween.Tween<any>;

I'm on Angular 13.3.11. The folder of @types/tween.js does not contain d.ts file. It says, typings are now included inside "@tweenjs/tween.js". I played around, added them manually to my project, still wasn't able to fix it.
Tween is actually generic, so I do not know what's going on.
UPDATE: with installing Tween 20.0.3 and manually suppressing the error with // @ts-ignore I was able to build, and get the scroller kind of working. But what's wrong with the normal install procedure?

[iharbeck]

@ichepurnoy please add

"skipLibCheck": true,

in tsconfig.json