Angular 2 - PrimeNg style not working

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.

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.

Smaillns

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;)

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! :)

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.

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.

Ankita

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';

来源：https://stackoverflow.com/questions/42012329/angular-2-primeng-style-not-working

标签

angular

primeng