我們可以在同一個 Angular 項目中同時使用 PrimeNg 和 Material

Question

我已經在我的 Angular 項目中使用PrimeNg和PrimeIcons以及其他一些 UI 庫。

package.json

  "dependencies": {
    ...
    "@fortawesome/fontawesome-free": "^6.2.0",
    "bootstrap": "^5.2.1",
    "jquery": "^3.6.1",
    "popper.js": "^1.16.1",
    "primeicons": "^6.0.1",
    "primeng": "^14.1.1",
  },

到目前為止，一切都很好。 但今天我決定在我的項目中也安裝Material 。 我運行這個安裝命令的那一刻：

ng add @angular/material

我收到了這個錯誤：

$ ng add @angular/material
ℹ Using package manager: npm
✔ Found compatible package version: @angular/material@14.2.2.
✔ Package information loaded.

The package @angular/material@14.2.2 will be installed and executed.
Would you like to proceed? Yes
npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR! 
npm ERR! While resolving: primeng@14.1.1
npm ERR! Found: primeicons@6.0.1
npm ERR! node_modules/primeicons
npm ERR!   primeicons@"^6.0.1" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer primeicons@"^5.0.0" from primeng@14.1.1
npm ERR! node_modules/primeng
npm ERR!   primeng@"^14.1.1" from the root project
npm ERR! 
npm ERR! Conflicting peer dependency: primeicons@5.0.0
npm ERR! node_modules/primeicons
npm ERR!   peer primeicons@"^5.0.0" from primeng@14.1.1
npm ERR!   node_modules/primeng
npm ERR!     primeng@"^14.1.1" from the root project
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 /home/xpert/.npm/eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/xpert/.npm/_logs/2022-09-24T10_10_51_005Z-debug-0.log
✖ Packages installation failed, see above.

我認為 Material 與 Primeicons 有一些沖突。 目前我不確定我是否應該研究如何解決這個問題，或者只是忘記 Material 並與 PrimeNg 一起生活。 請投入。

Answer 1

首先，同時使用primeng和material沒有多大意義。 但是，是的，它們都應該可以正常工作。

我見過同時具有primeng和material的項目。

那么，您能否嘗試使用您的 angular 和 primeng 版本創建一個堆棧閃電戰並檢查？ 此外，如果您能夠復制該問題，請也分享 stackblitz 鏈接。

Answer 2

在運行ng add @angular/material之前，您已經升級了primeicons package 版本，這導致了問題，因為（如錯誤消息所述）PrimeNG 目前依賴於 PrimeIcons v5。

在這種特殊情況下，PrimeIcons v6 與 v5 非常兼容，因此您可以添加對等依賴項覆蓋：

package.json

{
  ...
  "overrides": {
    "primeng": {
      "primeicons": "$primeicons" // means: use the version from the project instead of the one that the package actually depends on
    }
  }
}