Angular9 application is not compiling after installation of angular material

Question

In Angular9, I have installed angular-material but it is giving following error.

ERROR in The target entry-point "@angular/material/sidenav" has missing dependencies:

• @angular/cdk/platform
• @angular/cdk/scrolling
• @angular/cdk/a11y
• @angular/cdk/bidi
• @angular/cdk/coercion
• @angular/cdk/keycodes

I have tried to downgrade the material version but it is still giving error.

Answer 1

Angular material has dependencies on angular/cdk and angular/animations.

Did you install with ng add, or npm install? Either way, you probably need to specify version 9.

Please post your package.json if you still need help.

Answer 2

This is the package.json file which I am using.

{
  "name": "microservice-builder-client",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "start": "ng serve --proxy-config proxy.config.json",
  "private": true,
  "dependencies": {
    "@angular/animations": "~9.0.0",
    "@angular/cdk": "^14.0.4",
    "@angular/common": "~9.0.0",
    "@angular/compiler": "~9.0.0",
    "@angular/core": "~9.0.0",
    "@angular/forms": "~9.0.0",
    "@angular/material": "^11.2.3",
    "@angular/platform-browser": "~9.0.0",
    "@angular/platform-browser-dynamic": "~9.0.0",
    "@angular/router": "~9.0.0",
    "@clr/angular": "^3.1.4",
    "@clr/core": "^3.1.4",
    "@clr/icons": "^3.1.4",
    "@clr/ui": "^3.1.4",
    "http-server": "^0.12.3",
    "ngx-toastr": "^12.1.0",
    "npm-install-peers": "^1.2.1",
    "rxjs": "~6.5.4",
    "rxjs-compat": "^6.6.0",
    "rxjs-tslint": "^0.1.8",
    "swagger-editor-dist": "^3.11.6",
    "tslib": "^1.13.0",
    "zone.js": "~0.10.2"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^0.901.9",
    "@angular/cli": "~9.0.0",
    "@angular/compiler-cli": "~9.0.0",
    "@angular/language-service": "~9.0.0",
    "@types/jasmine": "~3.5.0",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "^12.11.1",
    "codelyzer": "^5.1.2",
    "jasmine-core": "~3.5.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.3.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage-istanbul-reporter": "~2.1.0",
    "karma-jasmine": "~2.0.1",
    "karma-jasmine-html-reporter": "^1.4.2",
    "protractor": "~5.4.3",
    "ts-node": "~8.3.0",
    "tslint": "~5.18.0",
    "typescript": "~3.7.5"
  }
}

Answer 3

You're on Angular 9.

Your @angular/material is 11 Your @angular/cdk is 14.

That's your problem.

Lower the above to versions to 9, delete your node_modules folder, and run npm install.