error TS2707 Generic type 'ɵɵDirectiveDeclaration' requires between 6 and 8 type arguments

Question

After installing angular material and adding angular material imports in app.module.ts to the project im having errors and all solutions didn't work so far. I have angular 14, node 16. First error, which in reality is way longer:

Error: node_modules/@angular/cdk/a11y/index.d.ts:152:18 - error TS2707: Generic type 'ɵɵDirectiveDeclaration' requires between 6 and 8 type arguments.

152     static ɵdir: i0.ɵɵDirectiveDeclaration<CdkAriaLive, "[cdkAriaLive]", ["cdkAriaLive"], { "politeness": "cdkAriaLive"; "duration": "cdkAriaLiveDuration"; }, {}, never, never, false, never>;
                     ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~


Error: node_modules/@angular/cdk/a11y/index.d.ts:175:18 - error TS2707: Generic type 'ɵɵDirectiveDeclaration' requires between 6 and 8 type arguments.

175     static ɵdir: i0.ɵɵDirectiveDeclaration<CdkMonitorFocus, "[cdkMonitorElementFocus], [cdkMonitorSubtreeFocus]", ["cdkMonitorFocus"], {}, { "cdkFocusChange": "cdkFocusChange"; }, never, never, false, never>;
                     ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~


Error: node_modules/@angular/cdk/a11y/index.d.ts:208:18 - error TS2707: Generic type 'ɵɵDirectiveDeclaration' requires between 6 and 8 type arguments.

208     static ɵdir: i0.ɵɵDirectiveDeclaration<CdkTrapFocus, "[cdkTrapFocus]", ["cdkTrapFocus"], { "enabled": "cdkTrapFocus"; "autoCapture": "cdkTrapFocusAutoCapture"; }, {}, never, never, false, never>;
                     ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~


Error: node_modules/@angular/cdk/bidi/index.d.ts:37:18 - error TS2707: Generic type 'ɵɵDirectiveDeclaration' requires between 6 and 8 type arguments.

37     static ɵdir: i0.ɵɵDirectiveDeclaration<Dir, "[dir]", ["dir"], { "dir": "dir"; }, { "change": "dirChange"; }, never, never, false, never>;
                    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

{
  "name": "highlight",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^14.2.4",
    "@angular/cdk": "^15.0.0",
    "@angular/common": "^14.2.4",
    "@angular/compiler": "^14.2.4",
    "@angular/core": "^14.2.4",
    "@angular/forms": "^14.2.4",
    "@angular/material": "^15.0.0",
    "@angular/platform-browser": "^14.2.4",
    "@angular/platform-browser-dynamic": "^14.2.4",
    "@angular/router": "^14.2.4",
    "@fortawesome/angular-fontawesome": "^0.11.1",
    "@fortawesome/fontawesome-svg-core": "^6.2.0",
    "@fortawesome/free-solid-svg-icons": "^6.2.0",
    "@ng-bootstrap/ng-bootstrap": "^13.0.0",
    "@popperjs/core": "^2.11.6",
    "@syncfusion/ej2-angular-calendars": "^20.3.56",
    "apexcharts": "^3.36.3",
    "bootstrap": "^5.2.2",
    "jwt-decode": "^3.1.2",
    "ng-apexcharts": "^1.7.4",
    "rxjs": "~6.6.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^14.2.4",
    "@angular/cli": "^14.2.4",
    "@angular/compiler-cli": "^14.2.4",
    "@angular/localize": "^14.2.4",
    "@types/jasmine": "~3.8.0",
    "@types/node": "^12.11.1",
    "jasmine-core": "~3.8.0",
    "karma": "~6.3.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.0.3",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "~1.7.0",
    "typescript": "4.7"
  }
}

I tried to delete node_modules, .angular and npm install. Didn't work. Next i tried to reinstall angular material - npm install --save @angular/material @angular/cdk - gave me error, but different one. Im suspecting this is showing more clear reason of my actual error. As suggested in error i tried commands npm install --legacy-peer-deps, --force, npm install --save --legacy-peer-deps ,did not work. Maybe someone have more experience and recognize the problem?

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: [email protected]
npm ERR! Found: @angular/[email protected]
npm ERR! node_modules/@angular/common
npm ERR!   @angular/common@"^14.2.4" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer @angular/common@"^15.0.0 || ^16.0.0" from @angular/[email protected]
npm ERR! node_modules/@angular/cdk
npm ERR!   @angular/cdk@"^15.0.0" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.

My ng v outcome:

Angular CLI: 14.2.10
Node: 16.10.0
Package Manager: npm 7.24.0 
OS: darwin x64

Angular: 14.2.12
... animations, common, compiler, compiler-cli, core, forms
... localize, platform-browser, platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1402.10
@angular-devkit/build-angular   14.2.10
@angular-devkit/core            14.2.10
@angular-devkit/schematics      14.2.10
@angular/cdk                    15.0.1
@angular/cli                    14.2.10
@angular/material               15.0.1
@schematics/angular             14.2.10
rxjs                            6.6.7
typescript                      4.7.4

Answer 1

I had the same error after running, ng update @angular/core@14 @angular/cl1@14. Some other packages were updated to v15.04 in my pacakge.json. I'm guessing these are all dependencies I should have chained to the ng update command to have them all update evenly to v14. The solution was just to downgrade the versions of all packages that were in v15 to the v14-lst.

I think that because my @angular/compiler and @angular/compiler-cli had been updated to v15 is what triggered the compilation error when running ng serve

Update:

Ran into this again after configuring all my linters. I don't think you want to lint or check on build node modules unless you really need to. Having typescript check node modules is important especially if you don't want different packages or different copies of the same package having conflicting type declarations. To solve this, under compiler options in your tsconfig.json add skipLibCheck: true

tsconfig.json

{
    ...
    complilerOptions: {
        ...
        "skipLibCheck": true
    }
}

Here are the official docs on skipLibCheck