Angular migration from v12 to v14

Question

I have migrated my Angular version from v12 to v13, in this process i tried deleting the node_modules and again tried installing node_modules but i am not able to do this using straight npm install and I am getting these below errors:

D:\test\Fxt\Web\src\main\ui\material>npm i
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: material@3.0.0
npm ERR! Found: @angular/cdk@13.3.9
npm ERR! node_modules/@angular/cdk
npm ERR!   @angular/cdk@"13.3.9" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer @angular/cdk@"^11.0.0" from @ncstate/sat-popover@7.1.0
npm ERR! node_modules/@ncstate/sat-popover
npm ERR!   @ncstate/sat-popover@"^7.1.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.
npm ERR!
npm ERR! See C:\Users\Machine\AppData\Local\npm-cache\eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Machine\AppData\Local\npm-cache\_logs\2022-07-27T07_23_05_623Z-debug-0.log

D:\test\Fxt\Web\src\main\ui\material>

The full error report as follows of C:\Users\Machine\AppData\Local\npm-cache\eresolve-report.txt:

# npm resolution error report

2022-07-27T07:23:24.600Z

While resolving: material@3.0.0
Found: @angular/cdk@13.3.9
node_modules/@angular/cdk
  @angular/cdk@"13.3.9" from the root project

Could not resolve dependency:
peer @angular/cdk@"^11.0.0" from @ncstate/sat-popover@7.1.0
node_modules/@ncstate/sat-popover
  @ncstate/sat-popover@"^7.1.0" from the root project

Fix the upstream dependency conflict, or retry
this command with --force, or --legacy-peer-deps
to accept an incorrect (and potentially broken) dependency resolution.

Raw JSON explanation object:

{
  "code": "ERESOLVE",
  "current": {
    "name": "@angular/cdk",
    "version": "13.3.9",
    "whileInstalling": {
      "name": "material",
      "version": "3.0.0",
      "path": "D:\\test\\Fxt\\Web\\src\\main\\ui\\material"
    },
    "location": "node_modules/@angular/cdk",
    "isWorkspace": false,
    "dependents": [
      {
        "type": "prod",
        "name": "@angular/cdk",
        "spec": "13.3.9",
        "from": {
          "location": "D:\\test\\Fxt\\Web\\src\\main\\ui\\material"
        }
      }
    ]
  },
  "currentEdge": {
    "type": "prod",
    "name": "@angular/cdk",
    "spec": "13.3.9",
    "from": {
      "location": "D:\\test\\Fxt\\Web\\src\\main\\ui\\material"
    }
  },
  "edge": {
    "type": "peer",
    "name": "@angular/cdk",
    "spec": "^11.0.0",
    "error": "INVALID",
    "from": {
      "name": "@ncstate/sat-popover",
      "version": "7.1.0",
      "whileInstalling": {
        "name": "material",
        "version": "3.0.0",
        "path": "D:\\test\\Fxt\\Web\\src\\main\\ui\\material"
      },
      "location": "node_modules/@ncstate/sat-popover",
      "isWorkspace": false,
      "dependents": [
        {
          "type": "prod",
          "name": "@ncstate/sat-popover",
          "spec": "^7.1.0",
          "from": {
            "location": "D:\\test\\Fxt\\Web\\src\\main\\ui\\material"
          }
        }
      ]
    }
  },
  "strictPeerDeps": false,
  "force": false
}

Strangely I am able to do npm install with special command by post-fixing --force or --legacy-peer-deps to npm install which is working. Can anyone help me out on this.

Thanks.

Did you follow the steps described in the [Angular Update Guide](https://update.angular.io/?v=12.0-13.0)? — Roy, Jul 27 '22 at 07:34
You are describing how the peer dependencies are supposed to work since npm v7, no strange / unexpected behaviour I can see. — JSON Derulo, Jul 27 '22 at 07:37
Explanations here https://stackoverflow.com/questions/73110381/angular-highcharts-unable-to-resolve-dependency-tree-peer-angular-common13-0/73110659#73110659 and here https://stackoverflow.com/questions/72575853/how-to-resolve-dependency-conflict-while-installing-bootstrap-using-angular-cli/72576028#72576028 You can check peer dependencies using 'npm info @ncstate/sat-popover peerDependencies' — Robin Webb, Jul 27 '22 at 07:54

score 0 · Answer 1 · answered Jul 27 '22 at 08:03

As stated above you can test peer dependencies for your specific version of @ncstate/sat-popover@7.1.0 using npm info @ncstate/sat-popover@7.1.0 peerDependencies.

Result:

{
  '@angular/common': '^11.0.0',
  '@angular/core': '^11.0.0',
  '@angular/cdk': '^11.0.0'
}

As per the error, for an Angular 13 project you will need at least version npm info @ncstate/sat-popover@9.0.0.

{
  '@angular/common': '^13.3.6',
  '@angular/core': '^13.3.6',
  '@angular/cdk': '^13.3.6'
}

So either install later version npm install @ncstate/sat-popover@9.0.0 or downgrade your version of Angular to 11.

Alternatively, ignore the peer dependency (as per the error) with npm i --legacy-peer-deps.

Alternatively, upgrade to Angular 14 using ng update and then npm install @ncstate/sat-popover@latest. Version 10.0.0 supports Angular 14 peer.

Now i am getting this error: npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve dependency tree npm ERR! npm ERR! While resolving: material@3.0.0 npm ERR! Found: @angular/common@13.3.11 npm ERR! node_modules/@angular/common npm ERR! @angular/common@"^13.3.11" from the root project npm ERR! npm ERR! Could not resolve dependency: npm ERR! peer @angular/common@"^12.0.0" from @ng-bootstrap/ng-bootstrap@10.0.0 npm ERR! node_modules/@ng-bootstrap/ng-bootstrap npm ERR! @ng-bootstrap/ng-bootstrap@"^10.0.0" from the root project — youeye, Jul 28 '22 at 04:57

Angular migration from v12 to v14

1 Answers1

Linked