webpack - Steps to integrate PrimeNG with JHipster

Question

We have been trying to incorporate PrimeNG components into a JHipster (angular 4) generated project with no success. After download and install PrimeNG into our project, we are able to import classes but when we include the corresponding tags into templates nothing is drawn. We have tested several of the PrimeNG components. Also we have done the imports in app.module, etc. I would like to be more concrete, but no error is displayed anywhere. Do you have any hint on how work with PrimeNG and JHipster together? Thanks

Answer 1

The following steps worked for us.

1- Add dependecies with yarn

yarn add primeng
yarn add @angular/animations

2- Created new component with ng cli, standing on the same folder where you want to create the component run

ng g component new-cmp

This will

• Create a new-cmp folder with the .html and .ts that you need.
• Import and declare the component in the closest module, for example home.module.ts

3- Add the imports of the prime components you want to use along with the BrowserAnimationsModule on the module where the new component was declared, in our case home.module.ts for example:

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

AND add them to the imports array inside the @NgModule

4- Go to src/main/webapp/content/scss/vendor.scss and import the styles, like Marcin Krajewski suggests:

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

5- Add a prime component for testing in the html of the created component, for example <button pButton type="button" label="Click"></button>

6- Run yarn run webpack:build so the apps picks up the changes from vendors.scss

7- Run yarn start and test it out!

UPDATE Jhipster version: 4.5.2