Getting Error While implementing jquery datatables in angular

I want to implement jquery datatbles in angular so that's why i added these packages: npm install angular-datatables,npm install jquery,npm install datatables.net, npm install datatables.net-dt But getting error like this

Error: node_modules/angular-datatables/src/angular-datatables.directive.d.ts:31:25

• error TS2503: Cannot find namespace 'DataTables'.

31 dtInstance: Promise<DataTables.Api>; ~~~~~~~~~~

Error: node_modules/angular-datatables/src/models/settings.d.ts:3:38 - error TS2503: Cannot find namespace 'DataTables'.

3 export interface ADTSettings extends DataTables.Settings { ~~~~~~~~~~

Error: node_modules/angular-datatables/src/models/settings.d.ts:6:37 - error TS2503: Cannot find namespace 'DataTables'.

6 export interface ADTColumns extends DataTables.ColumnSettings { ~~~~~~~~~~

× Failed to compile.

This is my component.html code:

<section class="content">
    <div class="content-block">
      <div class="block-header" *ngFor="let breadscrum of breadscrums">
        <!-- breadcrumb -->
        <app-breadcrumb [title]="breadscrum.title" [items]="breadscrum.items" [active_item]="breadscrum.active">
        </app-breadcrumb>
      </div>
      <div class="row clearfix">
        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
          <div class="card">
            <div class="header">
              <h2>Angular Data Tables</h2>
            </div>
            <div class="body">
                
              <!-- Add content here -->
              <table>
                <thead>
                    <th>Code</th>
                    <th>Product</th>
                    <th>Amount</th>
                    <th>Type</th>
                    <th>IsActive</th>
                </thead>
                <tbody>
                    @for(item of productlist;track item){
                        <tr>
                            <td>{{item.code}}</td>
                            <td>{{item.product}}</td>
                            <td>{{item.amount}}</td>
                            <td>{{item.type}}</td>
                            <td>{{item.isActive}}</td>
                        </tr>
                    }
                </tbody>
              </table>

            </div>
          </div>
        </div>
      </div>
    </div>
  </section>



  

This is my typescriptcode:

import { Component, OnInit } from '@angular/core';
import { Subject } from 'rxjs';
import { products} from '../../core/models/products'
import { MasterService } from '../../core/service/master.service';
import { DataTablesModule } from 'angular-datatables';
import { Config } from 'datatables.net';

@Component({
  selector: 'app-angular-datatables',
  templateUrl: './angular-datatables.component.html',
  styleUrls: ['./angular-datatables.component.sass'],
  //imports: [DataTablesModule]
})
export class AngularDatatablesComponent implements OnInit {
  breadscrums = [
    {
      title: 'Tables',
      items: ['Extra'],
      active: 'Datatables',
    },
  ];

  productlist! : products[]
  //dtoptions: Config={}
  dtoptions: Config = {};
  dttrigger:Subject<any>=new Subject<any>();

  constructor(private service: MasterService) {}
  ngOnInit() {
    this.loadproducts();
  }

  loadproducts(){
    this.service.Loadproducts().subscribe(item=>{
      this.productlist=item;
      this.dttrigger.next(null);
    })
  }

}

This is my angulat.json:

"assets": ["src/favicon.ico", "src/assets"],
            "styles": [
              "./node_modules/bootstrap/dist/css/bootstrap.min.css",
              "./node_modules/@swimlane/ngx-datatable/index.css",
              "./node_modules/@swimlane/ngx-datatable/themes/material.css",
              "./node_modules/@swimlane/ngx-datatable/assets/icons.css",
              "src/assets/scss/style.scss",
              "src/assets/scss/theme/all-themes.scss",
              "src/styles.scss",
              "./node_modules/datatables.net-dt/css/dataTables.dataTables.min.css",
              "./node_modules/datatables.net-dt/css/dataTables.dataTables.css"
            ],
            "scripts": [
              "./node_modules/moment/min/moment.min.js",
              "./node_modules/chart.js/dist/Chart.bundle.js",
              "./node_modules/apexcharts/dist/apexcharts.min.js",
              "./node_modules/jquery/dist/jquery.min.js",
              "./node_modules/datatables.net/js/dataTables.min.js"
            ],

Even I re install all the packages but not able to fix the issue