0

I tried:

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.

slyFox
  • 51
  • 6
  • Did you import the css files (under `Styles Configuration` in the official guide) in your vendor.css? – Jon Ruddell Aug 23 '18 at 02:04
  • Yep, otherwise styles would be completely wrong. Is it working for you? – slyFox Aug 23 '18 at 02:21
  • Hmm it seems to almost be working now, styles are only a tiny bit off for me still. I'll keep testing with it some more and see, otherwise I'll post a sample repo. Definitely `generator-jhipster-primeng` doesn't seem to work out of the box and the official PrimeNG examples require changing fa-icons to angular style – slyFox Aug 23 '18 at 03:24

1 Answers1

2

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

slyFox
  • 51
  • 6