Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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.

like image 484
ToDo Avatar asked Feb 02 '17 21:02

ToDo


2 Answers

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';
like image 153
Ankita Avatar answered Sep 20 '22 08:09

Ankita


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.

like image 36
ToDo Avatar answered Sep 21 '22 08:09

ToDo