Can we use both PrimeNg and Material in the same Angular project

Tanzeel 0
Viewed 12

I'm already using PrimeNg and PrimeIcons along with some other UI libraries in my Angular project.

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",
  },

Things are working absolutely fine till here. But today I decided to install Material also in my project. The moment I ran this installation command:

ng add @angular/material

I got this error:

$ 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.

I think Material has some conflict with Primeicons. At this moment I'm not sure whether I should research on how to get this resolved or just forget about Material and live with PrimeNg. Please pitch in.

primeng angular-material angular
1 Answers

First of all using both primeng and material at the same doesn't make much sense. But yes they both should work fine.

I have seen projects having both primeng and material.

So can you please try to create a stackblitz with your angular and primeng versions and check? And also if you are able to replicate the issue please share the stackblitz link as well.

Santosh nayak0
Related