I am working on an Ionic angular project. I'm trying to add Angular Material to use some of the included prebuilt UI components (dialog, date picker, etc). I've found a couple of guides on how to get started with Angular Material, but following either direction I'm unable to successfully run the CLI commands needed to add Angular Material to my project.
Here are links to the two guides I'm following:
Using Angular Material in an Ionic Angular Project
Using Angular Material in an Angular Project
Following the first guide I ran ng add @angular/material and following the guide from the second link I ran npm install @angular/material @angular/cdk. Both commands returned similar errors on being unable to resolve dependencies
npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: [email protected]
npm ERR! Found: @angular/[email protected]
npm ERR! node_modules/@angular/core
npm ERR! peer @angular/core@"14.2.8" from @angular/[email protected]
npm ERR! node_modules/@angular/common
npm ERR! peer @angular/common@"14.2.8" from @angular/[email protected]
npm ERR! node_modules/@angular/forms
npm ERR! peer @angular/forms@">=12.0.0" from @ionic/[email protected]
npm ERR! node_modules/@ionic/angular
npm ERR! @ionic/angular@"^6.1.9" from the root project
npm ERR! 1 more (the root project)
npm ERR! peer @angular/common@"14.2.8" from @angular/[email protected]
npm ERR! node_modules/@angular/platform-browser
npm ERR! peer @angular/platform-browser@"14.2.8" from @angular/[email protected]
npm ERR! node_modules/@angular/forms
npm ERR! peer @angular/forms@">=12.0.0" from @ionic/[email protected]
npm ERR! node_modules/@ionic/angular
npm ERR! 1 more (the root project)
npm ERR! 3 more (@angular/platform-browser-dynamic, @angular/router, the root project)
npm ERR! 4 more (@angular/platform-browser-dynamic, @angular/router, ...)
npm ERR! peerOptional @angular/core@"14.2.8" from @angular/[email protected]
npm ERR! node_modules/@angular/compiler
npm ERR! peer @angular/compiler@"14.2.8" from @angular/[email protected]
npm ERR! node_modules/@angular/compiler-cli
npm ERR! peer @angular/compiler-cli@"^14.0.0" from @angular-devkit/[email protected]
npm ERR! node_modules/@angular-devkit/build-angular
npm ERR! dev @angular-devkit/build-angular@"^14.0.0" from the root project
npm ERR! 2 more (@ngtools/webpack, the root project)
npm ERR! peer @angular/compiler@"14.2.8" from @angular/[email protected]
npm ERR! node_modules/@angular/platform-browser-dynamic
npm ERR! @angular/platform-browser-dynamic@"^14.0.0" from the root project
npm ERR! 1 more (the root project)
npm ERR! 7 more (@angular/forms, @angular/platform-browser, ...)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! @angular/material@"*" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: @angular/[email protected]
npm ERR! node_modules/@angular/core
npm ERR! peer @angular/core@"14.2.10" from @angular/[email protected]
npm ERR! node_modules/@angular/animations
npm ERR! peer @angular/animations@"^14.0.0 || ^15.0.0" from @angular/[email protected]
npm ERR! node_modules/@angular/material
npm ERR! @angular/material@"*" from the root project
npm ERR! peerOptional @angular/animations@"14.2.10" from @angular/[email protected]
npm ERR! node_modules/@angular/platform-browser
npm ERR! @angular/platform-browser@"^14.0.0" from the root project
npm ERR! 2 more (@angular/material, @angular/forms)
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 /Users/noah.jackson/.npm/eresolve-report.txt for a full report.
npm ERR! A complete log of this run can be found in:
npm ERR! /Users/noah.jackson/.npm/_logs/2022-11-14T16_01_20_307Z-debug-0.log
This error came from the npm install command. The ng add error was the same except instead of Could not reslove dependency: @angular/material@"*" from the root project it says Could not resolve dependency: @angular/material@"14.2.7" from the root project
Also here's my package.json - if that helps
{
"name": "main",
"version": "0.0.1",
"author": "Ionic Framework",
"homepage": "https://ionicframework.com/",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"@angular/common": "^14.0.0",
"@angular/core": "^14.0.0",
"@angular/forms": "^14.0.0",
"@angular/platform-browser": "^14.0.0",
"@angular/platform-browser-dynamic": "^14.0.0",
"@angular/router": "^14.0.0",
"@capacitor/app": "4.1.0",
"@capacitor/core": "4.4.0",
"@capacitor/haptics": "4.0.1",
"@capacitor/keyboard": "4.0.1",
"@capacitor/status-bar": "4.0.1",
"@ionic/angular": "^6.1.9",
"ionicons": "^6.0.3",
"rxjs": "~6.6.0",
"tslib": "^2.2.0",
"zone.js": "~0.11.4"
},
"devDependencies": {
"@angular-devkit/build-angular": "^14.0.0",
"@angular-eslint/builder": "~13.0.1",
"@angular-eslint/eslint-plugin": "~13.0.1",
"@angular-eslint/eslint-plugin-template": "~13.0.1",
"@angular-eslint/template-parser": "~13.0.1",
"@angular/cli": "^14.0.0",
"@angular/compiler": "^14.0.0",
"@angular/compiler-cli": "^14.0.0",
"@angular/language-service": "^14.0.0",
"@capacitor/cli": "4.4.0",
"@ionic/angular-toolkit": "^6.0.0",
"@types/jasmine": "~3.6.0",
"@types/jasminewd2": "~2.0.3",
"@types/node": "^12.11.1",
"@typescript-eslint/eslint-plugin": "5.3.0",
"@typescript-eslint/parser": "5.3.0",
"eslint": "^7.6.0",
"eslint-plugin-import": "2.22.1",
"eslint-plugin-jsdoc": "30.7.6",
"eslint-plugin-prefer-arrow": "1.2.2",
"jasmine-core": "~3.8.0",
"jasmine-spec-reporter": "~5.0.0",
"karma": "~6.3.2",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage": "~2.0.3",
"karma-coverage-istanbul-reporter": "~3.0.2",
"karma-jasmine": "~4.0.0",
"karma-jasmine-html-reporter": "^1.5.0",
"protractor": "~7.0.0",
"ts-node": "~8.3.0",
"typescript": "~4.7.3"
},
"description": "An Ionic project"
}
Any advice on how to resolve this issue would be great. Or general advice on how to prevent dependency issues like this.
CodePudding user response：
I had the same issue last week with some other packages having conflicts with angular 14 (because it's required for angular material), I ended up removing some of them entirely (like ngx-marquee) since they are not compatible yet with angular 14, and using a combination of commands including npm install and npm update with --legacy-peer-deps to finally fix it, but I think the most important part was updating angular with ng update, I recommend you try that as well. like this
ng update @angular/core