Steps to integrate PrimeNG with JHipster

This is a solution that worked for me with other module (angular-calendar) and it imports styles from node_modues directory

Add to file:

vendor.css :

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

and run

yarn run webpack:build:vendor

I just got PrimeNG working with JHipster 4.4.1 (using Angular4 and SCSS).

Julien's comment above, and Marcin's answer about vendor.css, combine to give you the solution. However, as a newcomer to JHipster, even after reading this thread, it took me a couple tries to put that together correctly.

So, to clarify, here is what worked for me:

---

1. Install PrimeNG and dependencies

Run yarn add primeng to install PrimeNG as a dependency for your app.

Run yarn add @angular/animations (see PrimeNG Setup Guide for an explanation of this).

---

2. Add the PrimeNG styles to your app

Instead of using .angular-cli.json to add the styles to the build, simply @import them in your vendor.scss (or vendor.css). For me, that meant adding these two lines at the end of content/scss/vendor.scss:

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

Run yarn run webpack:build:vendor.

If, like me, your build fails because it cannot find a few image files, I got around it by simply copying the node_modules/primeng/resources/images/ directory into content/scss/. Perhaps someone has a more "correct" way to solve this, but that workaround did the trick for me.

---

3. Make sure animations are included in your module

If they weren't already, make sure you're importing animations in any module that will use PrimeNG (I did this on my root module):

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

Don't forget to also add this to the @NgModule imports array.

---

4. Start using PrimeNG!

Now everything should be wired up -- just follow PrimeNG's docs to import and use their components within yours.

i.e. import { AccordionModule } from 'primeng/primeng' (also add to @NgModule imports).

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

Update for PrimeNG 6

Follow top answers here but also need to add primeicons dependency. See my answer here for more info

• Run cmd yarn add primeicons
• In vendor.css add @import '~primeicons/primeicons.css'; (not sure if import order matters)