Angular 2 - PrimeNg style not working

Question

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 e

Answer 1

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