Fix for primeng styles are not working in Angular

This post is a solution for the different below issues for Primeng CSS styles in Angular.

• Themes are not loaded correctly
• Primeng components styles are not applied correctly
• Angular upgrades from one version to other broken CSS styles
• Primeng version latest integration

This post is my findings on the integration of primeng components in Angular applications.

These solutions will work on Angular 2+ versions including Angular 10 and 11 versions.

#Primeng styles

It is very difficult to solve if primeng styles are missing in the Angular application.

It provides reusable components like buttons, upload, and input control widgets.

Each component style is linked with three things.

In the Angular application, Primeng and icons are installed with the npm command as seen below

npm install primeng --save
npm install primeicons --save

This installs both dependencies to the node_modules project,

You can check primeng CSS styles as seen below

Theme styles:

By default, These framework provides various themes like nova-blue, bootstrap, luna-blue etc. You can check more themes below.

**Global CSS styles ** It provides primeng.min.css global CSS styles required for every component of primeng.

Icon styles Like font awesome icon kit, It provides inbuilt icons in the primeicons.css file.

Primeng styles

#How to fix primeng CSS styles not working in Angular?

So you have to include themes, global, and icon styles in the Angular application.

There are multiple ways can load styles in the Angular typescript application.

Below are three different methods we can do.

Angular.json:

Please add CSS files located in the styles section of Angular.json.

In the Angular.json file, the styles attribute path is “architect” - “test” - “styles”, However, there is one more style section in the same file ie which is not the correct path. So, these files are not added to “architect” - “build” - “styles”.

{
  "architect": {
    "test": {
      "styles": [
        "src/styles.css",
        "node_modules/primeng/resources/themes/nove-light/theme.css",
        "node_modules/primeng/resources/primeng.min.css",
        "node_modules/primeicons/primeicons.css"
      ]
    }
  }
}

using link styles The second way is to add index.html using a link like a normal application.

<link
  rel="stylesheet"
  type="text/css"
  href="node_modules/primeng/resources/themes/nove-light/theme.css"
/>
<link
  rel="stylesheet"
  type="text/css"
  href="node_modules/primeng/resources/primeng.min.css"
/>
<link
  rel="stylesheet"
  type="text/css"
  href="node_modules/primeicons/primeicons.css"
/>

CSS import:

In Angular Applications,

You have to use CSS @import to include any external CSS styles.

If you want CSS styles to be applied globally, add them in styles.css Another way, you can add an Angular component to load and apply it to each component.

@import "node_modules/primeng/resources/themes/nove-light/theme.css";
@import "node_modules/primeng/resources/primeng.min.css";
@import "node_modules/primeicons/primeicons.css";

#Conclusion

It is very difficult to solve CSS issues in the Angular application for basic users. This blog talks about primeng CSS-style files, issues, and solutions.

Multiple ways CSS can be integrated into the application and choose the best approach suitable for your needs.

Please like and share on Facebook, Twitter, and Linkedin.