search

l-lin / angular-datatables

DataTables with Angular
https://l-lin.github.io/angular-datatables/
MIT License
1.57k stars 486 forks source link

Angular 13 support #1612

Closed alexaka1 closed 2 years ago

alexaka1 commented 2 years ago

:rocket: Feature request

Is your feature request related to a problem? Please describe.

With Angular 13 out, this project should support it.

Describe the solution you'd like

Support Angular 13 and RxJS 7.

Describe alternatives you've considered

Upgrading the parent project to Angular 13 and RxJS 7 breaks the dtTrigger mechanism: ERROR Error: Uncaught (in promise): Both the table and dtOptions cannot be empty

One possible cause is this. RxJS now requires a value for any non void Subjects. The official example shows such behaviour, although it's also not typed, which is required in strict environments. However the latest version of this library uses Subject<ADTSettings>, and this simply using this.dtTrigger.next({}); solves the RxJS compatibility issue in terms of the IDE not giving error, however after such change, the above error is produced at runtime.

The current workaround is to not use dtTrigger at all, in which case the library works with Angular 13 (at least in my app) without any obvious problems.

shanmukhateja commented 2 years ago

Hi @alexaka1

Thank you for the detailed explanation of the problem.

Angular 13 support will be added in the next few days.

Could you try this.dtTrigger.next(this.dtOptions) and see if it works?

alexaka1 commented 2 years ago

Hi @shanmukhateja. Thanks for the quick response and the ETA on support!

We use a Promise for dtOptions so I don't think that would work. (I can't check it until tomorrow.) So I might have to provide a default settings object that's not empty. Although, my guess is that it should work with empty {}, since DataTables can be used without configuration (and not using dtTrigger at all works fine). So this is just the case of comforming to RxJS's new syntax requirements, but keeping behavior the same.

shanmukhateja commented 2 years ago

Hi @alexaka1

I'm migrating the project to Angular 13 and I do not see this issue on the demo project. Could you provide a reproducible GitHub repo to investigate this?

petebacondarwin commented 2 years ago

@shanmukhateja - please be aware that you should not be publishing fully AOT compiled Ivy code to npm. Instead you should be publishing the portable partial Ivy format, which is stable across different versions of Angular.

Your current published library could stop working at any patch release of Angular.

See https://angular.io/guide/creating-libraries#publishing-libraries

shanmukhateja commented 2 years ago

Hi @petebacondarwin

Thanks for your input. A PR is always welcome ☺️

petebacondarwin commented 2 years ago

@shanmukhateja - here you go: https://github.com/l-lin/angular-datatables/pull/1620

shanmukhateja commented 2 years ago

Hi @petebacondarwin ,

v13.0.1 has been released with your changes as well as a few goodies for ng add feature.

I'm closing this issue now. Feel free to re-open it.

petebacondarwin commented 2 years ago

Glad you got it sorted.