PrimeNG setup

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

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

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

"dependencies": {
  //...
  "primeng": "^8.0.0",
  "primeicons": "^2.0.0"
},

• Import the necessary modules in the app.module.ts file.

import {CardModule} from 'primeng/card';   
import {MenuItem} from 'primeng/api'; 

In the imports below, add the corresponding module.

imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule,

• 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",
  //...
],

This should do the job!

Cheers! Happy coding!