Daniel Grima
Daniel Grima

Reputation: 2825

PrimeNG stylesheets not found

I'm having trouble with a new project I've just created. For some reason when trying to import the stylesheets of PrimeNG I'm getting a 404 error. I don't know if it's something to do with the configuration of my project.

I'm using the Angular Class WebPack Starter, I've added PrimeNG but as mentioned above I'm getting a 404 error. Although it doesn't make much sense I'm suspecting that it's related to the fact that the stylesheets are in the node_modules folder. As a test I've put a .css file in the node_modules folder and it wasn't found. However, when put in my "global" folder for the public assets the file was found.

Screenshot with the test stylesheet and the PrimeNG theme

enter image description here

Screenshot with the test stylesheet moved to public folder and the PrimeNG theme

enter image description here

I know it's a trivial issue but I can't seem to find any information. Just in case I've also looked at PrimeNG's setup page however it did not make a difference.

Upvotes: 4

Views: 11263

Answers (4)

For Angular 19.x and latest versions of primeng, i.e.:

  • "@primeng/themes": "^19.0.5"
  • "primeicons": "^7.0.0"
  • "primeng": "^19.0.5"

PrimeNg Installation

  1. Install all above libraries.
  2. Install ng-bootstrap and the compatible bootstrap version. For me, these versions are:
"@ng-bootstrap/ng-bootstrap": "^18.0.0",
"bootstrap": "^5.3.3"
  1. In angular.json:
"scripts": [
              "node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"
            ],
            "styles": [
              "src/styles.css",
              "node_modules/primeicons/primeicons.css",
              "node_modules/bootstrap/dist/css/bootstrap.min.css"
            ]

Themes Loading

Themes have changed location in the latest versions and are not located in /node_modules/primeng/resources/themes/ anymore. In order to load your preferred theme you can follow the below:

  1. In app.module.ts import the following:
import Material from '@primeng/themes/material';
import { providePrimeNG } from 'primeng/config';
import { provideAnimations } from '@angular/platform-browser/animations';
  1. Pass the following in providers[...] array:
    provideAnimations(),
    providePrimeNG({
      theme: {
        preset: Material,
        options: {
          prefix: 'p',
          darkModeSelector: '.dark-theme'
        }
      },
      ripple: true
    }),

Upvotes: 3

Matt Langley
Matt Langley

Reputation: 23

Ensure the "styles" array includes the prime ng style sheets under the "build" AND "test" (under "architect" under the project under "projects"):

"styles": [
  "./node_modules/primeicons/primeicons.css",
  "./node_modules/primeng/resources/themes/nova-light/theme.css",
  "./node_modules/primeng/resources/primeng.min.css"
],

Other stylesheets will probably already be there. Other themes are available.

Upvotes: 0

mohamed hamidi
mohamed hamidi

Reputation: 19

I faced the same issue related to missing css files, If you are using angular-cli to build your project, follow these steps :

1-Edit your project's angular-cli.json file

2-Update Styles section by adding needed css files as follows:

"styles": [
    "styles.css", // default generated one
    "../node_modules/primeng/resources/themes/omega/theme.css" , //primeng css
    "../node_modules/primeng/resources/primeng.css" //primeng css
]

Upvotes: 0

pxr_64
pxr_64

Reputation: 531

I had the same with problem with a Angular2 app and managed to get around it by importing the .css files directly into the my main.ts script.

This post helped me : Example of how to load static CSS files from node_modules using webpack?

I just followed the instruction in the post mentioned above and added this to my main.ts.

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import 'primeng/resources/themes/afterdark/theme.css';
import 'font-awesome/css/font-awesome.min.css';
import 'primeng/resources/primeng.min.css';

import { AppModule } from './modules/app.module';
const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);

Hope this helps.

Upvotes: 4

Related Questions