我们可以在同一个角度上同时使用PrimeNg和材料吗？

Question

我已经在我的PrimeIcons中使用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.

我认为材料和Primeicons有一些冲突。在这个时候，我不确定我是否应该研究如何解决这个问题，还是干脆忘掉物质，和PrimeNg生活在一起。请投进去。

Answer 1

是的，它们都应该工作得很好，但是同时使用primeng和材料都是没有意义的。

我见过一些项目，既有原料又有原料。

Answer 2

在运行ng add @angular/material之前，您已经升级了primeicons包的版本，这导致了问题，因为(正如错误消息所述) 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
    }
  }
}