loading...

PrimeNG setup

dkp1903 profile image Dushyant Pathak ・1 min read

PrimeNG is a UI library for Angular. It has a list of components that we can use in our Angular applications.

A lot of devies get this error when they try to add PrimeNG:

p-card is not a known Angular component
Enter fullscreen mode Exit fullscreen mode

Note here, that p-card is just an example, and the error could be for any PrimeNG component one might be using. To solve that, make sure you have followed ALL the following steps:

  • Installing the packages.
npm install primeng --save
npm install primeicons --save
Enter fullscreen mode Exit fullscreen mode

Make sure the following dependencies are added in the package.json file:


"dependencies": {
  //...
  "primeng": "^8.0.0",
  "primeicons": "^2.0.0"
},
Enter fullscreen mode Exit fullscreen mode
  • Import the necessary modules in the app.module.ts file.
import {CardModule} from 'primeng/card';   
import {MenuItem} from 'primeng/api'; 
Enter fullscreen mode Exit fullscreen mode

In the imports below, add the corresponding module.

imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule,
Enter fullscreen mode Exit fullscreen mode
  • If you still get the same error, add this to the angular.json file, in the styles:
"styles": [
  "node_modules/primeicons/primeicons.css",
  "node_modules/primeng/resources/themes/nova-light/theme.css",
  "node_modules/primeng/resources/primeng.min.css",
  //...
],
Enter fullscreen mode Exit fullscreen mode

This should do the job!

Cheers! Happy coding!

Discussion

pic
Editor guide