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

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

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

Answer 3

I didn't see this thread before sorry. It tooks me a couple of hours to integrate PrimeNG, as I'm learning Angular4.

Here a link to my personnal project, if you want to see the integration for PrimeNG: https://github.com/pascalgrimaud/qualitoast

And here, the specific PR with the diff: https://github.com/pascalgrimaud/qualitoast/pull/39/files

Hope it can help :)

Answer 4

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

Answer 5

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