Having problems installing angular datatables

Question

I tried installing angular datatables following their documentation(https://www.npmjs.com/package/angular-datatables?activeTab=readme) but after installing and adding the import in app.module I receive this error

Error: node_modules/angular-datatables/src/angular-datatables.directive.d.ts:40:18 - error TS2707: Generic type 'ɵɵDirectiveDeclaration' requires between 6 and 8 type arguments.

40     static ɵdir: i0.ɵɵDirectiveDeclaration<DataTableDirective, "[datatable]", never, { "dtOptions": "dtOptions"; "dtTrigger": "dtTrigger"; }, 
{}, never, never, false, never>;

My package.json

{
  "name": "angular14-rxjs7-sample-app",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "jest",
    "install:local": "npm install ../../../lib/msal-angular/dist ../../../lib/msal-browser",
    "install:published": "npm install @azure/msal-angular@latest @azure/msal-browser@latest"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^14.0.0-next.0",
    "@angular/cdk": "^14.0.0-next.0",
    "@angular/common": "^14.0.0-next.0",
    "@angular/compiler": "^14.0.0-next.0",
    "@angular/core": "^14.0.0-next.0",
    "@angular/flex-layout": "^14.0.0-beta.41",
    "@angular/forms": "^14.0.0-next.0",
    "@angular/material": "^14.0.0-next.0",
    "@angular/platform-browser": "^14.0.0-next.0",
    "@angular/platform-browser-dynamic": "^14.0.0-next.0",
    "@angular/router": "^14.0.0-next.0",
    "@azure/msal-angular": "^2.5.0",
    "@azure/msal-browser": "^2.32.0",
    "angular-datatables": "^15.0.0",
    "core-js": "^3.21.1",
    "datatables.net": "^1.11.3",
    "datatables.net-dt": "^1.11.3",
    "jquery": "^3.6.3",
    "rxjs": "~7.5.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^14.0.0-next.7",
    "@angular/cli": "^14.2.6",
    "@angular/compiler-cli": "^14.0.0-next.0",
    "@types/datatables.net": "^1.10.21",
    "@types/jasmine": "~4.0.0",
    "@types/jasminewd2": "^2.0.10",
    "@types/jquery": "^3.5.16",
    "@types/node": "^17.0.23",
    "autoprefixer": "^10.4.13",
    "jasmine-core": "~4.0.0",
    "jasmine-spec-reporter": "^7.0.0",
    "jest": "^27.5.1",
    "karma": "~6.3.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.2.0",
    "karma-coverage-istanbul-reporter": "^3.0.3",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "~1.7.0",
    "postcss": "^8.4.20",
    "protractor": "^7.0.0",
    "schematics-scss-migrate": "^1.3.15",
    "tailwindcss": "^3.2.4",
    "ts-node": "^10.7.0",
    "tslint": "^6.1.3",
    "typescript": "~4.6.2"
  },
  "description": "`npm install @azure/msal-browser @azure/msal-angular@latest`",
  "main": "jest.config.js",
  "directories": {
    "test": "test"
  },
  "author": "",
  "license": "ISC"
}

What can i do to make it work? I tried unistalling and installing again and installing manual but is not working

Your angular-datatables and angular versions don't match (15 vs 14) — Clashsoft, Feb 02 '23 at 12:54

score 0 · Accepted Answer · answered Feb 02 '23 at 14:17

The package you installed clearly states

The major version of the project (it's using a Semantic versioning) is synchronized with the major version of Angular.

Meaning you have to match your used angular version. If you really need to stick with angular 14, you have to downgrade angular-datatables to version 14. Otherwise upgrade your angular version to 15 and leave angular-datatables as is.

Having problems installing angular datatables

1 Answers1