node.jsangulartypescriptangular-material

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


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

Solution

  • Had the same issue. Go with ngrx/component 14.3.2, if you use Angular 14. Or update directly to Angular 15.