Unable to resolve dependency tree error while installing Flex Layout in Angular

Question

When I try to install flex layout in my project using the below command

npm install --save @angular/flex-layout @angular/cdk

It is showing the below error in the terminal

Below are my dependencies

 "dependencies": {
    "@angular/animations": "^13.0.1",
    "@angular/cdk": "^13.3.9",
    "@angular/common": "^13.0.1",
    "@angular/compiler": "^13.0.1",
    "@angular/core": "^13.0.1",
    "@angular/forms": "^13.0.1",
    "@angular/localize": "^13.0.1",
    "@angular/material": "^13.3.9",
    "@angular/platform-browser": "^13.0.1",
    "@angular/platform-browser-dynamic": "^13.0.1",
    "@angular/router": "^13.0.1",
    "@auth0/angular-jwt": "^5.0.2",
    "@ng-bootstrap/ng-bootstrap": "^12.1.2",
    "@popperjs/core": "^2.10.2",
    "angular-datatables": "^12.0.1",
    "bootstrap": "^5.1.3",
    "clipboard": "^2.0.8",
    "core-js": "^3.19.1",
    "datatables.net": "^1.11.3",
    "datatables.net-buttons": "^2.0.1",
    "datatables.net-buttons-dt": "^2.0.1",
    "datatables.net-colreorder": "^1.5.5",
    "datatables.net-colreorder-dt": "^1.5.5",
    "datatables.net-dt": "^1.11.3",
    "datatables.net-responsive": "^2.2.9",
    "datatables.net-responsive-dt": "^2.2.9",
    "datatables.net-scroller": "^2.0.5",
    "datatables.net-select": "^1.4.0",
    "datatables.net-select-dt": "^1.4.0",
    "jquery": "^3.6.0",
    "jszip": "^3.7.1",
    "materialize-css": "^0.100.2",
    "ngx-bootstrap": "^5.2.0",
    "ngx-markdown": "^13.0.0",
    "ngx-toastr": "^14.3.0",
    "prism-themes": "^1.9.0",
    "prismjs": "^1.27.0",
    "rxjs": "^7.5.5",
    "rxjs-compat": "^6.6.7",
    "tether": "^2.0.0",
    "zone.js": "~0.11.4"
  },

Also, I have tried the following solutions.

1. delete node_modules folder and package_lock.json file and then run npm cache clean --force after npm i --force command

2. Run npm install --save --legacy-peer-deps instead of npm install command.

It doesn't work for me.

Answer 1

The error is clear:
One of the dependencies of flex-layout is cdk, and the latest version is 14. In your project, angular-datatables-demo is asking for v13.

Instead of "npm i @angular/flex-layout", you could add the version after it something like this:

npm i @angular/flex-layout@13 @angular/cdk@13