4

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.

Daniel Grima
  • 2,765
  • 7
  • 34
  • 58

3 Answers3

4

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.

Community
  • 1
  • 1
pxr_64
  • 510
  • 1
  • 8
  • 23
1

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
]
samiles
  • 3,768
  • 12
  • 44
  • 71
mohamed hamidi
  • 21
  • 2
0

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.

Matt Langley
  • 23
  • 6