Could Not Resolve Peer Dependency Between My Angular App And My Custom Angular Library
I have created this Angular library that I now want to use in my other Angular apps, but I seem to have trouble with my peer dependencies. I have tried fiddling around in my App's package.json, but couldn't seem to remove any of my errors.
What I have tried (in that order) :
- Removing node_modules
- ng update
- npm update
- npm audit --fix
- npm i
- Recreating a new test app all together
Here are the errors :
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/common
npm ERR! @angular/[email protected]"~13.0.0" from the root project
npm ERR! peer @angular/[email protected]"^13.0.0 || ^14.0.0-0" from @angular/[email protected]
npm ERR! node_modules/@angular/cdk
npm ERR! @angular/[email protected]"^13.2.0" from the root project
npm ERR! peer @angular/[email protected]"^13.0.0" from @my-group/[email protected]
npm ERR! node_modules/@my-group/angular-lib
npm ERR! @my-group/[email protected]"*" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer @angular/[email protected]"^13.1.0" from @my-group/[email protected]
npm ERR! node_modules/@my-group/angular-lib
npm ERR! @my-group/[email protected]"*" 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.
package.json (App)
{
"name": "lib-test",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"watch": "ng build --watch --configuration development",
"test": "ng test"
},
"private": true,
"dependencies": {
"@angular/animations": "~13.0.0",
"@angular/cdk": "^13.2.2",
"@angular/common": "~13.0.0",
"@angular/compiler": "~13.0.0",
"@angular/core": "~13.0.0",
"@angular/forms": "~13.0.0",
"@angular/material": "^13.2.2",
"@angular/platform-browser": "~13.0.0",
"@angular/platform-browser-dynamic": "~13.0.0",
"@angular/router": "~13.0.0",
"@cloud-republic/angular-lib": "^1.1.4",
"rxjs": "~7.4.0",
"tslib": "^2.3.0",
"zone.js": "~0.11.4"
},
"devDependencies": {
"@angular-devkit/build-angular": "~13.0.3",
"@angular/cli": "~13.0.3",
"@angular/compiler-cli": "~13.0.0",
"@types/jasmine": "~3.10.0",
"@types/node": "^12.11.1",
"jasmine-core": "~3.10.0",
"karma": "~6.3.0",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage": "~2.0.3",
"karma-jasmine": "~4.0.0",
"karma-jasmine-html-reporter": "~1.7.0",
"typescript": "~4.4.3"
}
}
package.json (Library)
{
"name": "@my-group/angular-lib",
"version": "1.0.6",
"publishConfig": {
"@my-group:registry": "https://gitlab.com/api/v4/projects/XXXXXX/packages/npm/"
},
"scripts": {
"build-lib": "ng build lib-angular",
"semantic-release": "semantic-release"
},
"peerDependencies": {
"@angular/cdk": "^13.0.0",
"@angular/common": "^13.1.0",
"@angular/core": "^13.1.0",
"@angular/material": "^13.2.0",
"ngx-bootstrap": "^8.0.0",
"rxjs": "~7.4.0"
},
"dependencies": {
"tslib": "^2.3.0"
},
"devDependencies": {
"@semantic-release/gitlab": "^7.0.4",
"semantic-release": "^19.0.2"
}
}
Thanks in advance
Answer
This is not the issue with peer dependencies. This is more to do with version conflict. I guess you are using npm >=7 that's why you are getting this error:-
As mentioned in the error log try the below command to fix the issue:-
npm install --legacy-peer-deps
The above solution will solve your problem. However, the main issue is with your library. In your library package you are saying use the below package:-
"@angular/common": "^13.1.0"
However, in your application, you have installed the below version. "@angular/common": "~13.0.0". So your library package is greater than the one installed in the application. Either install the same version in your application or downgrade the version in your library.
In this way, npm install
command will work without any issue.
Related Questions
- → Maximum call stack exceeded when instantiating class inside of a module
- → Browserify api: how to pass advanced option to script
- → Node.js Passing object from server.js to external modules?
- → gulp-rename makes copies, but does not replace
- → requiring RX.js in node.js
- → Remove an ObjectId from an array of objectId
- → Can not connect to Redis
- → React: How to publish page on server using React-starter-kit
- → Express - better pattern for passing data between middleware functions
- → Can't get plotly + node.js to stream data coming through POST requests
- → IsGenerator implementation
- → Async/Await not waiting
- → (Socket.io on nodejs) Updating div with mysql data stops without showing error