{

Fix for primeng styles are not working in Angular


Angular 13 primeng styles not working

This post is a 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 my findings on the 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 the Angular application.

It provides reusable components like buttons, 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 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 be 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 in 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, Linkedin.

THE BEST NEWSLETTER ANYWHERE
Join 6,000 subscribers and get a daily digest of full stack tutorials delivered to your inbox directly.No spam ever. Unsubscribe any time.

Similar Posts
Subscribe
You'll get a notification every time a post gets published here.