我正在做一个IonicAngular 项目。我试图添加Angular 材料来使用一些包含的预建UI组件(对话框,日期选择器等)。我已经找到了一些关于如何开始使用Angular 材料的指南,但是按照任何一个方向,我都无法成功地运行CLI命令来将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
而不是Could not reslove dependency: @angular/material@"*" from the root project
这里还有我的package.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"
}
任何关于如何解决这个问题的建议都会很棒。或者关于如何防止像这样的依赖性问题的一般建议。
1条答案
按热度按时间kr98yfug1#
我有同样的问题上周与其他一些软件包有冲突的Angular 14(因为它是Angular材料所必需的),我最终完全删除了其中的一些(如ngx-marquee),因为它们还不与Angular 14兼容,并且使用包括
npm install
和npm update
与--legacy-peer-deps
的命令组合来最终修复它,但我认为最重要的部分是更新Angular 与ng更新,我建议你尝试,以及.像这样