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

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!

Posted on May 27 by:

dkp1903 profile

Dushyant Pathak

@dkp1903

MEAN | MERN | Android | React Native | NLP | ML Simplifying things by making them fun. Freelancing

Discussion

markdown guide