So I've been updating an Angular 6 project to Angular 13 and I've got a problem with datatables (datatables.net). When I'm trying to access a page that has one, this error is displayed in my browser's console: Cannot read properties of undefined (reading 'defaults'). Using the console I can see this error is faced on the following code:

protected applyDefaultConfigurationToDatatable(): void {
 /* Set the defaults for DataTables initialisation */
 $.extend(true, $.fn.dataTable.defaults, {
  dom: "<'row'<'col-sm-6'l><'col-sm-6'f>>" +
  "<'row'<'col-sm-12'tr>>" +
  "<'row'<'col-sm-5'i><'col-sm-7'p>>",
  renderer: 'bootstrap'
 });
}

The problem is on this line: $.fn.dataTable.defaults where $.fn.dataTable is undefined.

I'm not sure but from what I saw online while trying to solve my problem it could be related to jQuery and the imports of my JS scripts. I've tried many things to solve my problem such as :

• Checking I'm importing jQuery only once;
• Checking the compatibility of my different libs;
• Checking the order of the imported JS scripts;
• And many other things...

Here's the part where I import scripts in my angular.json:

"scripts": [
 "node_modules/jquery/dist/jquery.min.js",
 "node_modules/datatables.net/js/jquery.dataTables.js",
 "node_modules/datatables.net-bs/js/dataTables.bootstrap.js",
 "node_modules/datatables.net-fixedcolumns/js/dataTables.fixedColumns.js",
 "node_modules/datatables.net-colreorderwithresize-npm/ColReorderWithResize.js"
],

Here's the part of my package.json that's related to these libs:

"dependencies": {
 "datatables.net": "^1.11.5",
 "datatables.net-bs": "1.11.5",
 "datatables.net-colreorderwithresize-npm": "1.0.4",
 "datatables.net-fixedcolumns": "4.0.2",
 "jquery": "^3.6.0",
 "jquery-color": "1.0.0",
 "jquery-jcrop": "0.9.13",
 "jquery-knob": "1.2.11",
 "jquery-ui-npm": "1.12.0",
 "jquery-validation": "1.16.0",
 "jquery.maskedinput": "1.4.1",
}

I'm stuck on this one problem and any help would be highly appreciated!