Question

Angular using DataTables error while importing DataTables.Settings

I am trying to use DataTables with Angular to view some data in my application. I installed DataTables by ng add angular-datatables and imported the DataTablesModule in the app.module.ts but when I tried to configure the table:

dtOptions: DataTables.Settings = {};
dtTrigger: Subject<any> = new Subject<any>();

it automatically imported this for me: import DataTables from 'datatables.net';

and I got this error:

'DataTables' only refers to a type, but is being used as a namespace here.

I searched for the error in many places and was not able to find the solution.

 2  25  2
1 Jan 1970

Solution

 1

As discussed in this GitHub issue, by adding the @types/datatables.net into devDependencies with:

"@types/datatables.net": "^1.10.8"

Or running the NPM command

npm i @types/datatables.net --save-dev

should solve the issue. By right, you shouldn't need to import manually with import DataTables from 'datatables.net';.

Otherwise, you need to follow the instructions from the official docs by migrating DataTables.Settings to Config.

import { Config } from 'datatables.net';

dtOptions: Config = {};
2024-07-24
Yong Shun