npm 解决将Angular 材质添加到离子Angular 项目时的版本冲突

jvidinwx  于 2022-11-24  发布在  Angular
关注(0)|答案(1)|浏览(126)

我正在做一个IonicAngular 项目。我试图添加Angular 材料来使用一些包含的预建UI组件(对话框,日期选择器等)。我已经找到了一些关于如何开始使用Angular 材料的指南,但是按照任何一个方向,我都无法成功地运行CLI命令来将Angular 材料添加到我的项目中。
以下是我正在关注的两本指南的链接:

我按照第一个指南运行了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"
}

任何关于如何解决这个问题的建议都会很棒。或者关于如何防止像这样的依赖性问题的一般建议。

kr98yfug

kr98yfug1#

我有同样的问题上周与其他一些软件包有冲突的Angular 14(因为它是Angular材料所必需的),我最终完全删除了其中的一些(如ngx-marquee),因为它们还不与Angular 14兼容,并且使用包括npm installnpm update--legacy-peer-deps的命令组合来最终修复它,但我认为最重要的部分是更新Angular 与ng更新,我建议你尝试,以及.像这样

ng update @angular/core

相关问题