How to use JHipster 5+ with PrimeNG 6+

Question

I tried:

• official getting started guide for PrimeNG
• Steps to integrate PrimeNG with JHipster (sorry if this is a duplicate post, have no rep to comment there)
• generator-jhipster-primeng

and some other articles and stackoverflow posts with no luck on getting the latest PrimeNG 6+ to work with the latest JHipster 5+. It mostly works, but the styles are a bit off - mainly it seems like primeicons aren't working.

For example, I tried the primeng filter table example and it mostly works except the icons such as the dropdown arrows appear as empty boxes as well as others not appearing correctly. I suspect this may have to do with primeicons not importing correctly?

Has anyone got this to work? I tested using a fresh install of everything but I can post code if really needed.

Answer 1

Sorry guys it's working for me, I just got tripped up on using generator-jhipster-primeng which doesn't work out of the box. Steps here mostly work, just have to include primeicons. I included full directions below anyways.

However, the layout/css styles are still somewhat off (maybe they conflict with JHipster/bootstrap) and you'll have to tweak some of the official PrimeNG examples, such as using <fa-icon> instead of old <i> style icons.

Steps to integrate PrimeNG into JHipster project:

1. Add dependencies

• yarn add primeicons primeng @angular/animations
• may need to use the same version of Angular core for animations to avoid problems

2. Import css styles

In vendor.css (or vendor.scss if you use Sass) add:

@import '~primeicons/primeicons.css';
@import '~primeng/resources/themes/nova-light/theme.css'; // pick whatever theme
@import '~primeng/resources/primeng.min.css'

• Notice the bootstrap theme layout is especially off. Other themes are found in node_modules/primeng/resources/themes

3. Import modules

• I added BrowserAnimationsModule to app.module.ts but you may be able to just add it where needed:
  • import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
  • Add BrowserAnimationsModule to @NgModule imports array as well
• Import whatever PrimeNG module as needed (follow documentation from their examples)

---

And that's it! Now follow PrimeNG docs for using specific components.

Tested with jhipster 5.2.1 , primeng 6.1.2 , and primeicons 1.0.0-beta.10