How to resolve could not resolve dependency after Angular migrations?

Question

I updated all my tools : npm, node, angular-cli I was USING Angular 11 and now angular 13 in my project.

I use this link to migrate my Angular project step by step :

• https://update.angular.io/?l=2&v=11.0-12.0
• https://update.angular.io/?l=2&v=12.0-13.0

When I write :

npm install

It give me this error :

When I do npm install --force It's worked but the application display me blank page :(

[Update 28-01-2022 at 09:00]

Here my package.json:

{
  "name": "my-app",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~13.2.0",
    "@angular/cdk": "13.2.0",
    "@angular/common": "~13.2.0",
    "@angular/compiler": "~13.2.0",
    "@angular/core": "~13.2.0",
    "@angular/flex-layout": "13.0.0-beta.36",
    "@angular/forms": "~13.2.0",
    "@angular/localize": "^13.2.0",
    "@angular/material": "^13.2.0",
    "@angular/material-moment-adapter": "^13.2.0",
    "@angular/platform-browser": "~13.2.0",
    "@angular/platform-browser-dynamic": "~13.2.0",
    "@angular/router": "~13.2.0",
    "@ckeditor/ckeditor5-angular": "^1.2.3",
    "@ckeditor/ckeditor5-build-classic": "^20.0.0",
    "@types/node": "^12.11.1",
    "chart.js": "^2.9.4",
    "chartjs-plugin-datalabels": "^1.0.0",
    "file-saver": "^2.0.5",
    "jasmine": "^3.6.4",
    "keycloak-angular": "12.0.0",
    "keycloak-js": "16.1.0",
    "moment": "^2.24.0",
    "ng2-charts": "^2.4.2",
    "ng2-completer": "^9.0.1",
    "pptxgenjs": "3.1.1",
    "rxjs": "~6.6.3",
    "tslib": "^2.0.0",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^13.2.0",
    "@angular/cli": "^13.2.0",
    "@angular/compiler-cli": "~13.2.0",
    "@angular/language-service": "~13.2.0",
    "@types/file-saver": "^2.0.1",
    "@types/jasmine": "^2.6.0",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "^8.10.59",
    "codelyzer": "6.0.2",
    "jasmine-core": "~3.6.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "^6.3.12",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage-istanbul-reporter": "~3.0.2",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "3.9",
    "protractor": "~7.0.0",
    "ts-node": "~7.0.0",
    "tslint": "~6.1.0",
    "typescript": "~4.5.5"
  }
}

Answer 1

TL;DR: Update @angular/flex-layout to version 13.0.0-beta.36 or later.

Your dependency @angular/flex-layout has a peer dependendy to @angular/cdk. You are using flex-layout version 11, this one expects CDK version 11 (^11.0.0). However, in your project CDK is already on version 13. So you need to find a suitable version of @angular/flex-layout that works together with CDK v13. So you need to update @angular/flex-layout to version 13.0.0-beta.36 or later.