web-dev-qa-db-fra.com

Angular 2 - Le style PrimeNg ne fonctionne pas

J'ai suivi les instructions pour installer primeng en exécutant npm install primeng --save, puis en important ce dont j'ai besoin dans le fichier app.module.ts, par exemple:

import {CheckboxModule} from 'primeng/primeng';  

...

imports: [
    CheckboxModule,
  ],...

J'ajoute ensuite les feuilles de style au fichier index.html:

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

Mon IDE peut trouver l'emplacement du fichier (en maintenant la touche ctrl enfoncée et en cliquant sur la valeur href), mais le navigateur ne le trouve pas (erreur 404).

J'ai copié l'exemple de case à cocher ( http://www.primefaces.org/primeng/#/checkbox ) et l'a ajouté à l'un de mes composants, mais le style est identique à celui d'une case à cocher normale.

En outre, aucune autre erreur n'est générée.

Les styles doivent-ils être ajoutés à un autre fichier? Je ne sais pas pourquoi ça ne marche pas.

angularprimeng
6
ToDo

J'ai trouvé un tutorial qui utilise PrimeNg avec la CLI Angular qui a fonctionné pour moi.

J'ai ajouté la feuille de style font-awesome.min.css à index.html.

Ensuite, le thème de mon choix (par exemple "../node_modules/primeng/resources/themes/omega/theme.css",) dans le fichier angular-cli.json de la section "styles" [...]. 

6
ToDo

dans le fichier style.css, ajoutez vos importations Par exemple: 

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

si vous avez correctement téléchargé PrimeNG, il devrait maintenant fonctionner

remarque: assurez-vous que vous avez importé les modules primeNG au bon endroit (en fait, nous importons des modules et non des composants, prenez garde;) 

5
Smaillns

Selon les instructions setup , vous devez utiliser les éléments suivants:

<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" />

remarquez que le chemin commence par:

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

ne pas:

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

J'espère que cela t'aides! :)

4
AJT_82

Qu'utilisez-vous pour la structure de projet si vous utilisez cli, vous devez les ajouter à styles.css. En général, ils devraient aller dans le paquet.

1
Mertcan Diken

Vient de passer à PrimeNG 6.1.6 et j'ai cette erreur.

On dirait qu'avec cette version, les thèmes ont cessé d'utiliser theme.css au profit de theme.scss. Donc, vous devrez référencer "node_modules/primeng/resources/themes/omega/theme.scss" (au lieu de "theme.css") dans la section "styles" de angular.json AND…

Vous devrez npm reconstruire node-sass.

1
ChicagoJohnnyVegas