web-dev-qa-db-fra.com

Étapes à suivre pour intégrer PrimeNG à JHipster

Nous avons essayé d'incorporer des composants PrimeNG dans un projet généré par JHipster (angular 4) sans succès. Après avoir téléchargé et installé PrimeNG dans notre projet, nous pouvons importer des classes, mais lorsque nous incluons les balises correspondantes dans les modèles, rien n'est dessiné. Nous avons testé plusieurs composants PrimeNG. Nous avons également effectué les importations dans app.module, etc. J'aimerais être plus concret, mais aucune erreur ne s'affiche nulle part. Avez-vous une idée de la manière dont vous travaillez ensemble avec PrimeNG et JHipster? Merci

webpackjhipsterprimeng
11
Andrés Quesada

Les étapes suivantes ont fonctionné pour nous.

1- Ajouter des dépendances avec yarn

yarn add primeng
yarn add @angular/animations

2- Créé un nouveau composant avec ng cli, dans le même dossier que celui dans lequel vous voulez créer le composant.

ng g component new-cmp

Cette volonté 

  • Créez un dossier new-cmp avec les .html et .ts dont vous avez besoin.
  • Importer et déclarer le composant dans le module le plus proche, par exemple home.module.ts

3- Ajoutez la imports des composants principaux que vous voulez utiliser avec la BrowserAnimationsModule sur le module où le nouveau composant a été déclaré, dans notre cas home.module.ts par exemple:

import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {AccordionModule, RatingModule, CalendarModule, ButtonModule } from 'primeng/primeng';

ETles ajoute au tableau imports dans le @NgModule

4- Allez dans src/main/webapp/content/scss/vendor.scss et importez les styles, comme le suggère Marcin Krajewski:

@import '~primeng/resources/primeng.min.css';
@import '~primeng/resources/themes/bootstrap/theme.css';

5 - Ajouter un composant principal à tester dans le code HTML du composant créé, par exemple <button pButton type="button" label="Click"></button>

6- Exécutez yarn run webpack:build pour que les applications récupèrent les modifications de vendors.scss

7- Exécutez yarn start et testez-le!

UPDATE Jhipster version: 4.5.2

18
cjmm

PrimeNG vient de travailler avec JHipster 4.4.1 (en utilisant Angular4 et SCSS).

Le commentaire de Julien ci-dessus et la réponse de Marcin à propos de vendor.css se combinent pour vous donner la solution. Cependant, en tant que nouveau venu sur JHipster, même après avoir lu ce fil de discussion, il m'a fallu quelques essais pour le mettre correctement en place.

Donc, pour clarifier, voici ce qui a fonctionné pour moi:

1. Installer PrimeNG et les dépendances

Exécutez yarn add primeng pour installer PrimeNG en tant que dépendance de votre application.

Exécutez yarn add @angular/animations (voir Guide de configuration de PrimeNG pour une explication à ce sujet).

2. Ajouter les styles PrimeNG à votre application

Au lieu d'utiliser .angular-cli.json pour ajouter les styles à la construction, il suffit de les @import dans votre vendor.scss (ou vendor.css). Pour moi, cela signifiait ajouter ces deux lignes à la fin de content/scss/vendor.scss: 

@import 'node_modules/primeng/resources/primeng.min';
@import 'node_modules/primeng/resources/themes/bootstrap/theme';

Exécutez yarn run webpack:build:vendor.

Si, comme moi, votre construction échoue parce qu'elle ne peut pas trouver quelques fichiers image, je l'ai contournée en copiant simplement le répertoire node_modules/primeng/resources/images/ dans content/scss/. Peut-être que quelqu'un a un moyen plus "correct" de résoudre ce problème, mais cette solution de contournement a fait l'affaire pour moi.

3. Assurez-vous que les animations sont incluses dans votre module

S'ils ne l'étaient pas déjà, assurez-vous d'importer des animations dans tous les modules qui utiliseront PrimeNG (je l'ai déjà fait sur mon module racine):

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

N'oubliez pas d'ajouter également ceci au tableau @NgModule imports.

4. Commencez à utiliser PrimeNG!

Maintenant, tout devrait être câblé - suivez simplement la documentation de PrimeNG pour importer et utiliser leurs composants dans le vôtre.

c'est-à-dire import { AccordionModule } from 'primeng/primeng' (ajoutez également à @NgModule imports).

5
rmhunter

C'est une solution qui a fonctionné pour moi avec un autre module (angular-calendar) et qui importe les styles depuis le répertoire node_modues

Ajouter au fichier:

vendor.css: 

@import "~angular-calendar/dist/css/angular-calendar.css";

et courir

yarn run webpack:build:vendor
4
Marcin Krajewski

Mise à jour pour PrimeNG 6

Suivez les principales réponses ici, mais vous devez également ajouter une dépendance aux primeicons. Voir ma réponse ici pour plus d'infos

  • Exécuter cmd yarn add primeicons
  • Dans vendor.css, ajoutez @import '~primeicons/primeicons.css'; (ne savez pas si l'ordre d'importation est important)
1
slyFox