我正在做一個 Ionic angular 專案。我正在嘗試添加 Angular Material 以使用一些包含的預構建 UI 組件（對話框、日期選擇器等）。我找到了一些關于如何開始使用 Angular Material 的指南，但是按照任何一個方向我都無法成功運行將 Angular Material 添加到我的專案所需的 CLI 命令。
以下是我關注的兩個指南的鏈接：
在 Ionic Angular 專案中使用 Angular Material
- https://www.freakyjolly.com/ionic-angular-material-how-to-install-material-and-use-its-components-in-ionic-app/
在 Angular 專案中使用 Angular Material
- 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
這也是我的 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"
}
關于如何解決此問題的任何建議都很好。或者有關如何防止此類依賴性問題的一般建議。
uj5u.com熱心網友回復：
上周我遇到了同樣的問題，其他一些包與角度 14 有沖突（因為角度材料需要它），我最終完全洗掉了其中一些（比如 ngx-marquee），因為它們與角度 14 不兼容，并且使用包括npm install和npm updatewith的命令組合--legacy-peer-deps來最終修復它，但我認為最重要的部分是使用 ng update 更新角度，我建議你也嘗試一下。像這樣
ng update @angular/core
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/533703.html