Angular typescript pagination plug-in not loaded

vascool

Link to test case: https://stackblitz.com/edit/stackblitz-starters-z9dpyg?file=src%2Fapp%2Fapp.component.ts
Error messages shown:
ERROR TypeError: Cannot read properties of undefined (reading 'fnInit')
at _fnFeatureHtmlPaginate (jquery.dataTables.mjs:4958:10)
at _fnAddOptionsHtml (jquery.dataTables.mjs:3694:18)
at _fnInitialise (jquery.dataTables.mjs:4776:2)
at loadedInit (jquery.dataTables.mjs:1237:5)
at HTMLTableElement.<anonymous> (jquery.dataTables.mjs:1250:4)
at Function.each (jquery.js:383:19)
at jQuery.fn.init.each (jquery.js:205:17)
at jQuery.fn.init.DataTable [as dataTable] (jquery.dataTables.mjs:802:7)
at $.fn.DataTable (jquery.dataTables.mjs:15666:17)
at new DataTable (jquery.dataTables.mjs:22:22)
Description of problem:
It seems that the pagination plugins are not being "loaded", so when I try to use pagingType input, that error occurs.
In the line with plugin = DataTable.ext.pager[ type ],, inspecting the pager object I see that the input and other pagination plug-ins are missing.

allan

I don't see where you are adding the input plug-in to DataTables?

It isn't in main.ts, app.component.ts, app.component.spec.ts, or app.module.ts.

Allan

vascool

It's in angular.json scripts array. https://angular.io/guide/workspace-config#extra-build-and-test-options

An object containing JavaScript script files to add to the global context of the project. The scripts are loaded exactly as if you had added them in a <script> tag inside index.html

vascool

It seems that pagination plug-ins are not ready to ESM according the blog post so this might be the reason for them not being loaded
https://datatables.net/blog/2023-02-28-esm-plugins