Fix for primeng styles are not working in Angular


This post is an solution for 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 an my findings on integration of primeng components in Angular application.

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

Primeng styles

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

It provides reusable components like button, upload,input control widgets.

Each component style is linked with three things.

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

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

This installs both dependencies to node_modules project,

You can check primeng css styles as seen below

primeng theme css styles not loading

Theme styles

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

primeng global icon css styles not working

Global css styles

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

Icon styles

Like fontawesome icon kit, It provides inbuilt icons in 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 Angular application.

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

Below are three different methods we can do.

Angular.json

Please add css files location in styles section of Angular.json

In Angular.json file, 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 Second way is to add in index.html using link like a normal applicaiton.

<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 it in styles.css Other way, you can add in Angular component to load and apply 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 an css issues in Angular application for basic users. This blog talks about primeng css styl files, issues and solutions.

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

Please like and share in Facebook,twitter,Linkedin.

Similar Posts