l-lin / angular-datatables

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

Angular 14 + angular-datatables 14 dtTrigger and ADTSettings #1692

Closed h5aaimtron closed 1 year ago

h5aaimtron commented 1 year ago

:beetle: bug report

I had this working prior to upgrading to Angular 14 and angular-datatables 14. Post upgrade, [dtTrigger] requires a Subject passed to it and that Subject's next method must pass an ADTSettings type object. As far as I can tell, ADTSettings is an interface that extends the Settings object, but I haven't a clue how this is suppose to be used.

:microscope: Minimal Reproduction

https://github.com/h5aaimtron/angular-datatables-bugged

Step-by-step Instructions:

  1. Create Angular 14.2.x app.
  2. run ng add angular-datatables
  3. Follow code from here: http://l-lin.github.io/angular-datatables/#/advanced/rerender

:8ball: Expected behavior

I expected the documentation to guide the process for utilizing the package. Unfortunately, it looks like major breaking changes happened with the latest version and there is a lack of documentation on how to implement any of it.

:camera: Screenshots

image

:globe_with_meridians: Your Environment

:memo: Additional context

A couple notes for the documentation to be corrected.

  1. dtElement: DataTableDirective; is not valid syntax in Angular 14, it must be dtElement!: DataTableDirective;
  2. rxjs requires a value be passed on any Subject's next method now.
h5aaimtron commented 1 year ago

I've been playing with it a lot. I'm using rxjs 7.5 and tried passing the dtOptions on the dtTrigger next method as it's as close to ADTSettings as I could get:

image

h5aaimtron commented 1 year ago

I added a basic repo using angular cli 14.2.10: https://github.com/h5aaimtron/angular-datatables-bugged

  1. I created a new angular 14 app.
  2. ran ng add angular-datatables
  3. added DataTablesModule import in app.module.ts which caused the app to throw eeInjectorDeclaration.
  4. added basic code from: http://l-lin.github.io/angular-datatables/#/advanced/rerender and modified to match Angular 14 coding practices.

Result is eeInjectorDeclaration errors and dtTrigger error from previous comment.

h5aaimtron commented 1 year ago

Also wanted to note that while the npm package angular-datatables packages.json references @angular/core 14, it's node_modules @angular/core appears to be 9 per its packages.json. Same deal with rxjs. Root package rerences 7.4.0, but 6.6.7 shows up in the node_modules sub folder. Not sure if this is an issue or why.

h5aaimtron commented 1 year ago

Built your repo as-is and then copied it's node_modules folder over the sample repo's angular-datatables package node_modules which resolved the eeInjectorDeclaration error, but the trigger now says its not compatible.

h5aaimtron commented 1 year ago

Downgraded back to 13.1 for now. That doesn't seem to have any issues.

shanmukhateja commented 1 year ago

@h5aaimtron can you try building the repo with Node v14 and NPM v6 and then using install-local to install it?

As mentioned here, I ran into the same issue with your repo.

The downgrade while disappointing ensures you have a working lib.

PR is always welcome if you can find a solution.

h5aaimtron commented 1 year ago

@shanmukhateja the build and local install worked without issue, however; it's not a viable solution as I have a team working on an app and each dev would need to do this to keep it working. If the local build works as-such, I would assume releasing a new version 14.0.1 to npm might resolve the issue.

shanmukhateja commented 1 year ago

@shanmukhateja the build and local install worked without issue, however; it's not a viable solution as I have a team working on an app and each dev would need to do this to keep it working. If the local build works as-such, I would assume releasing a new version 14.0.1 to npm might resolve the issue.

Glad to know local build works. I was planning on doing just that as a quick fix but I'm not sure if it's still doable after the move to GitHub Actions.

I'll update when I have more info.

l-lin commented 1 year ago

@h5aaimtron, v14.0.2 has been released and I tested your sample using the newest version and there is no build error.