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

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).