Angular 14 + angular-datatables 14 dtTrigger and ADTSettings

[h5aaimtron]

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

🔬 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

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

📷 Screenshots

🌐 Your Environment

• NodeJS version: 16.13
• Angular version: 14.2.9
• Angular CLI version: 14.2.10
• jQuery version: 3.6.1
• DataTables version: Whatever comes with running ng add angular-datatables.
• angular-datatables version: 14

📝 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]

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:

[h5aaimtron]

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]

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]

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]

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

[shanmukhateja]

@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]

@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]

@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]

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