在向Ionic Angular项目中添加Angular Material时解决版本冲突

Question

我正在做一个Ionic angular项目。我正在尝试添加Angular Material来使用一些包含的预构建UI组件(对话框，日期选择器等)。我已经找到了一些关于如何开始使用Angular Material的指南，但是按照任何一个方向，我都无法成功地运行将Angular Material添加到我的项目所需的CLI命令。

以下是我所遵循的两个指南的链接:在Ionic Angular项目中使用Angular材料

• https://www.freakyjolly.com/ionic-angular-material-how-to-install-material-and-use-its-components-in-ionic-app/
  

在Angular项目中使用Angular材质

• https://auth0.com/blog/creating-beautiful-apps-with-angular-material/

在第一个指南之后，我运行ng add @angular/material，在第二个链接的指南之后，我运行npm install @angular/material @angular/cdk。两个命令在无法解析依赖项

时返回类似的错误。

npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR! 
npm ERR! While resolving: main@0.0.1
npm ERR! Found: @angular/core@14.2.8
npm ERR! node_modules/@angular/core
npm ERR!   peer @angular/core@"14.2.8" from @angular/common@14.2.8
npm ERR!   node_modules/@angular/common
npm ERR!     peer @angular/common@"14.2.8" from @angular/forms@14.2.8
npm ERR!     node_modules/@angular/forms
npm ERR!       peer @angular/forms@">=12.0.0" from @ionic/angular@6.3.4
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/platform-browser@14.2.8
npm ERR!     node_modules/@angular/platform-browser
npm ERR!       peer @angular/platform-browser@"14.2.8" from @angular/forms@14.2.8
npm ERR!       node_modules/@angular/forms
npm ERR!         peer @angular/forms@">=12.0.0" from @ionic/angular@6.3.4
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/compiler@14.2.8
npm ERR!   node_modules/@angular/compiler
npm ERR!     peer @angular/compiler@"14.2.8" from @angular/compiler-cli@14.2.8
npm ERR!     node_modules/@angular/compiler-cli
npm ERR!       peer @angular/compiler-cli@"^14.0.0" from @angular-devkit/build-angular@14.2.8
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/platform-browser-dynamic@14.2.8
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/core@14.2.10
npm ERR! node_modules/@angular/core
npm ERR!   peer @angular/core@"14.2.10" from @angular/animations@14.2.10
npm ERR!   node_modules/@angular/animations
npm ERR!     peer @angular/animations@"^14.0.0 || ^15.0.0" from @angular/material@14.2.7
npm ERR!     node_modules/@angular/material
npm ERR!       @angular/material@"*" from the root project
npm ERR!     peerOptional @angular/animations@"14.2.10" from @angular/platform-browser@14.2.10
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

此错误来自npm install命令。ng add错误也是一样的，只是不是Could not reslove dependency: @angular/material@"*" from the root project而是Could not resolve dependency: @angular/material@"14.2.7" from the root project

这是我的包裹。Json -如果有帮助

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

任何关于如何解决这个问题的建议将是伟大的。或者关于如何防止此类依赖问题的一般建议。

Answer 1

我上周也遇到了同样的问题，其他一些包与angular 14有冲突(因为它需要angular材料)，我最终完全删除了其中的一些(如ngx-marquee)，因为它们还与angular 14不兼容，并使用包括npm install和npm update与--legacy-peer-deps的命令组合来最终修复它，但我认为最重要的部分是用ng更新angular，我建议你也尝试一下。这样的

ng update @angular/core