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

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

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