I'm creating an Angular and React project using Nx monorepo workspace. The problem arises when I try to install Angular Material using npm i @angular/material
I'm currently using Angular v16.
Here's the error i'm getting:
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/animations
npm ERR! @angular/animations@"~15.2.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer @angular/animations@"^16.0.0 || ^17.0.0" from @angular/[email protected]
npm ERR! node_modules/@angular/material
npm ERR! @angular/material@"*" 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.
Below is my package.json file contents:
{
"name": "jua-code",
"version": "0.0.0",
"license": "MIT",
"scripts": {},
"private": true,
"devDependencies": {
"@angular-devkit/build-angular": "~15.2.0",
"@angular-devkit/core": "~15.2.0",
"@angular-devkit/schematics": "~15.2.0",
"@angular-eslint/eslint-plugin": "~15.0.0",
"@angular-eslint/eslint-plugin-template": "~15.0.0",
"@angular-eslint/template-parser": "~15.0.0",
"@angular/cli": "~15.2.0",
"@angular/compiler-cli": "~15.2.0",
"@angular/language-service": "~15.2.0",
"@babel/preset-react": "^7.14.5",
"@nrwl/angular": "^16.0.0",
"@nrwl/react": "^16.0.0",
"@nx/cypress": "16.0.0",
"@nx/eslint-plugin": "16.0.0",
"@nx/jest": "16.0.0",
"@nx/js": "16.0.0",
"@nx/linter": "16.0.0",
"@nx/react": "16.0.0",
"@nx/web": "16.0.0",
"@nx/webpack": "16.0.0",
"@nx/workspace": "^16.0.0",
"@pmmmwh/react-refresh-webpack-plugin": "^0.5.7",
"@schematics/angular": "~15.2.0",
"@svgr/webpack": "^6.1.2",
"@swc/cli": "~0.1.62",
"@swc/core": "~1.3.51",
"@testing-library/react": "14.0.0",
"@types/jest": "^29.4.0",
"@types/node": "18.14.2",
"@types/react": "18.0.28",
"@types/react-dom": "18.0.11",
"@types/react-router-dom": "5.3.3",
"@typescript-eslint/eslint-plugin": "^5.58.0",
"@typescript-eslint/parser": "^5.58.0",
"babel-jest": "^29.4.1",
"cypress": "^12.2.0",
"eslint": "~8.15.0",
"eslint-config-prettier": "8.1.0",
"eslint-plugin-cypress": "^2.10.3",
"eslint-plugin-import": "2.27.5",
"eslint-plugin-jsx-a11y": "6.7.1",
"eslint-plugin-react": "7.32.2",
"eslint-plugin-react-hooks": "4.6.0",
"jest": "^29.4.1",
"jest-environment-jsdom": "^29.4.1",
"jest-preset-angular": "~13.0.0",
"nx": "16.0.0",
"nx-cloud": "latest",
"prettier": "^2.6.2",
"react-refresh": "^0.10.0",
"react-test-renderer": "18.2.0",
"ts-jest": "^29.1.0",
"ts-node": "10.9.1",
"typescript": "~4.9.5",
"url-loader": "^4.1.1"
},
"dependencies": {
"@angular/animations": "~15.2.0",
"@angular/common": "~15.2.0",
"@angular/compiler": "~15.2.0",
"@angular/core": "~15.2.0",
"@angular/fire": "^7.5.0",
"@angular/forms": "~15.2.0",
"@angular/platform-browser": "~15.2.0",
"@angular/platform-browser-dynamic": "~15.2.0",
"@angular/router": "~15.2.0",
"@swc/helpers": "~0.5.0",
"blurhash": "^2.0.5",
"bootstrap": "^5.3.0",
"bootstrap-icons": "^1.10.5",
"dotenv": "^16.0.3",
"firebase": "^9.21.0",
"framer-motion": "^10.12.16",
"react": "18.2.0",
"react-blurhash": "^0.3.0",
"react-dom": "18.2.0",
"react-router-dom": "^6.11.2",
"rxjs": "~7.8.0",
"tslib": "^2.3.0",
"zone.js": "~0.12.0"
}
}
I've tried tweaking the packages versions but to no avail. Any help is much appreciated
I know that you need to run npm i @angular/material then npx nx g @angular/material:ng-add --project=my-project-name but won't work unless the first command completes.
Sometimes I also get the following error: cannot find module adapter/compat.
You have to explicitly install your angular material version (15.2) with
npm i @angular/[email protected]