How to use JHipster 5+ with PrimeNG 6+

问题

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.

回答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

来源：https://stackoverflow.com/questions/51977105/how-to-use-jhipster-5-with-primeng-6

标签

angular

Webpack

jhipster

primeng