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 :

• 

  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"
    }
  }
  

  CodePudding user response：

  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.

  CodePudding user response：

  Thanks for your answer @JSON derulo ! How do I know which version of dependency is suitable for my version 13 ? I don't know how to fix this even if I change codelyzer(6.0.2) to the latest version :(

  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/compiler
  npm ERR!   @angular/compiler@"~13.2.0" from the root project
  npm ERR!
  npm ERR! Could not resolve dependency:
  npm ERR! peer @angular/compiler@">=2.3.1 <13.0.0 || ^12.0.0-next || ^12.1.0-next || ^12.2.0-next" from [email protected]
  npm ERR! node_modules/codelyzer
  npm ERR!   dev codelyzer@"6.0.2" 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.
  npm ERR!
  npm ERR! See C:\Users\kevin\AppData\Local\npm-cache\eresolve-report.txt for a full report.