17

I've followed the instruction to install primeng by running npm install primeng --save then importing what I need in the app.module.ts file, for example:

import {CheckboxModule} from 'primeng/primeng';  

...

imports: [
    CheckboxModule,
  ],...

I then add the style sheets to the index.html file:

<head>
  ...
    <link rel="stylesheet" type="text/css" href="../node_modules/primeng/resources/themes/omega/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/font-awesome/css/font-awesome.min.css" />
</head>

My IDE can find the file location (by holding ctrl and clicking on the href value) but it is not found by the browser (404 error).

I've copied the checkbox example (http://www.primefaces.org/primeng/#/checkbox) and added it to one of my components but the style is the same as a normal checkbox.

Also, no other errors are thrown.

Should the styles be added to another file? I'm not sure why it's not working.

ToDo
  • 754
  • 2
  • 17
  • 31
  • are you using **src** and **dist** folders to separate the code files? also what is issue when you followed this? checkbox didn't appear or styles are missed – Aravind Feb 02 '17 at 23:04
  • @Aravind - I'm not using the dist folder, the code is all within the src. The checkboxes appear on the page but there is no styling applied (just plain checkboxes). The error I get is 404 in chrome, e.g. `GET http://localhost:4200/node_modules/primeng/resources/themes/omega/theme.css `. I get this for all the three stylesheets, even though I can actually locate the files manually in `app_module`. – ToDo Feb 02 '17 at 23:17

8 Answers8

13

I resolve my problem by remove rel="stylesheet" type="text/css" from index.html and also added below imports to styles.css :

@import '~primeicons/primeicons.css';
@import '~primeng/resources/themes/nova-light/theme.css';
@import '~primeng/resources/primeng.min.css';
Littlefoot
  • 131,892
  • 15
  • 35
  • 57
Ankita
  • 139
  • 1
  • 2
11

I found a tutorial that uses PrimeNg with Angular CLI that worked for me.

I added the font-awesome.min.css stylesheet to index.html.

Then the theme I wanted (e.g. "../node_modules/primeng/resources/themes/omega/theme.css",) to angular-cli.json file in the "styles" [...] section.

ToDo
  • 754
  • 2
  • 17
  • 31
11

in the style.css file , add your imports for example : 

 @import '../node_modules/primeng/resources/themes/omega/theme.css'

if you have correctly downloaded PrimeNG, it should work now

just a bit note : be sure you have imported the primeNG modules in the correct place (In fact, we import modules not components, take care;)

Rohit Poudel
  • 1,793
  • 2
  • 20
  • 24
Smaillns
  • 2,540
  • 1
  • 28
  • 40
  • If you are not using the Angular CLI, you can include a prebuilt theme via a element in your index.html – Smaillns Jul 12 '17 at 15:30
  • Strangely this solution worked for me, although I followed exactly the setup page why, am I doing something wrong to have only this solution working for me especially that this line is mentionned nowhere in the documentation...? – Akyo May 16 '18 at 07:52
  • This worked for me because I am using Angular 8. The chosen answer is valid for an earlier version of Angular and primeng. – retrovius Jan 07 '20 at 14:24
11

A lot has changed since the question was first asked (in 2017) wrt the way themes (free and commercial) are available with primeng. This is updated answer for anyone facing a similar issue as above in 2020. (update valid for "primeng": "^10.0.0-rc.2" and angular v~10.0.6)

Essentially there are three ways of importing free primeng themes in an angular 2+ application.

  • add the primeng imports to angular.json styles block
  "styles": [
              "src/styles.scss",
              "node_modules/primeicons/primeicons.css",
              "node_modules/primeng/resources/themes/saga-blue/theme.css",
              "node_modules/primeng/resources/primeng.min.css"
            ],
  • add primeng import to src/app/styles.scss file
@import url("../node_modules/primeicons/primeicons.css");
@import url("../node_modules/primeng/resources/themes/saga-orange/theme.css");
@import url("../node_modules/primeng/resources/primeng.min.css");
  • also you could link the styles in the html head tag but the issue there is that none of the paths from /node_modules work, so the way to make that work is to copy the styles (from say /node_modules/primeng/resources/themes/saga-purple/theme.css to an equivalent path in /assets and use that path in the link) - the possible issue why /node_modules links do not work is probably because angular compile process creates bundle files as part of the webpack workflow and does not affect the index.html in which the link is referenced to /node_module
    <link rel="stylesheet" id="theme-link" type="text/css" href="assets/themes/saga-purple/theme.css">
akhouri
  • 3,065
  • 3
  • 25
  • 29
4

According to the setup instructions you should use the following:

<link rel="stylesheet" type="text/css" href="/node_modules/primeng/resources/themes/omega/theme.css" />
<link rel="stylesheet" type="text/css" href="/node_modules/primeng/resources/primeng.min.css" />
<link rel="stylesheet" type="text/css" href="YOUR_PATH/font-awesome.min.css" />

notice that the path starts with:

href="/node_modules/primeng/resources/themes/omega/theme.css"

not:

href="../node_modules/primeng/resources/themes/omega/theme.css"

Hope this helps! :)

AT82
  • 71,416
  • 24
  • 140
  • 167
2

Just upgraded to PrimeNG 6.1.6 and got this error.

Looks like with this release the themes have stopped using theme.css in favor of theme.scss. So, you will have to reference "node_modules/primeng/resources/themes/omega/theme.scss" (instead of "theme.css") in the "styles" section of angular.json AND …

You will need to npm rebuild node-sass.

ChicagoJohnnyVegas
  • 148
  • 1
  • 1
  • 4
  • If you open theme.scss, you'll see the first line says, "Deprecated: Use nova instead". If you look, there's a theme called nova-light that contains a normal theme.css file. – Judah Gabriel Himango Nov 20 '18 at 19:55
1

What are you using for project structure if you are using cli you should add those to styles.css. In overall they should go into the bundle.

Mertcan Diken
  • 14,483
  • 2
  • 26
  • 33
0

Add @imports in styles.css file

@import "~primeicons/primeicons.css";
@import "~primeflex/primeflex.css";
@import "~primeng/resources/themes/fluent-light/theme.css";
@import "~primeng/resources/primeng.min.css";
@import "~font-awesome/css/font-awesome.css";

for other themes, go to nodemoules/primeng/resources/themes and select themes

dbgupta
  • 51
  • 3