Solución:
Los siguientes pasos funcionaron para nosotros.
1- Agregue dependencias con yarn
yarn add primeng
yarn add @angular/animations
2- Se creó un nuevo componente con ng cli, que se encuentra en la misma carpeta donde desea crear la ejecución del componente.
ng g component new-cmp
Esta voluntad
- Crear un
new-cmpcarpeta con el.htmly.tsQue tu necesitas. - Importe y declare el componente en el módulo más cercano, por ejemplo
home.module.ts
3- Añade el imports de los componentes principales que desea utilizar junto con el BrowserAnimationsModule en el módulo donde se declaró el nuevo componente, en nuestro caso home.module.ts por ejemplo:
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {AccordionModule, RatingModule, CalendarModule, ButtonModule } from 'primeng/primeng';
Y agréguelos a la matriz de importaciones dentro de @NgModule
4- Ir a src/main/webapp/content/scss/vendor.scss e importar los estilos, como sugiere Marcin Krajewski:
@import '~primeng/resources/primeng.min.css';
@import '~primeng/resources/themes/bootstrap/theme.css';
5– Agregue un componente principal para probar en el html del componente creado, por ejemplo <button pButton type="button" label="Click"></button>
6- Correr yarn run webpack:build para que las aplicaciones recojan los cambios de vendors.scss
7- Correr yarn start y pruébalo!
ACTUALIZAR
Versión de Jhipster: 4.5.2
Acabo de hacer que PrimeNG funcione con JHipster 4.4.1 (usando Angular4 y SCSS).
El comentario de Julien arriba y la respuesta de Marcin sobre vendor.css, combina para darte la solución. Sin embargo, como recién llegado a JHipster, incluso después de leer este hilo, me tomó un par de intentos para armarlo correctamente.
Entonces, para aclarar, esto es lo que funcionó para mí:
1. Instale PrimeNG y las dependencias
Correr yarn add primeng para instalar PrimeNG como una dependencia para su aplicación.
Correr yarn add @angular/animations (consulte la Guía de configuración de PrimeNG para obtener una explicación de esto).
2. Agregue los estilos PrimeNG a su aplicación
En lugar de usar .angular-cli.json para agregar los estilos a la compilación, simplemente @import ellos en tu vendor.scss (o vendor.css). Para mí, eso significó agregar estas dos líneas al final de content/scss/vendor.scss:
@import 'node_modules/primeng/resources/primeng.min';
@import 'node_modules/primeng/resources/themes/bootstrap/theme';
Correr yarn run webpack:build:vendor.
Si, como yo, su compilación falla porque no puede encontrar algunos archivos de imagen, lo solucioné simplemente copiando el node_modules/primeng/resources/images/ directorio en content/scss/. Quizás alguien tenga una forma más “correcta” de resolver esto, pero esa solución me funcionó.
3.Asegúrate de que las animaciones estén incluidas en tu módulo.
Si aún no lo estaban, asegúrese de que está importando animaciones en cualquier módulo que usará PrimeNG (hice esto en mi módulo raíz):
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
No olvide agregar esto también al @NgModule imports formación.
4. ¡Empiece a utilizar PrimeNG!
Ahora todo debería estar conectado, simplemente siga los documentos de PrimeNG para importar y usar sus componentes dentro de los suyos.
es decir import { AccordionModule } from 'primeng/primeng' (también agregar a @NgModule imports).
Esta es una solución que me funcionó con otro módulo (angular-calendar) e importa estilos de node_modues directorio
Agregar al archivo:
vendor.css:
@import "~angular-calendar/dist/css/angular-calendar.css";
y correr
yarn run webpack:build:vendor