Primeng with jhipster - jhipster

Question

I have jhipster 6.6.0 version and I want to use primeng in my application generated with jhipster. After executing the command:
yo jhipster-primeng
eveything is ok but then I run:
npm install
and I get this error:
npm ERR! code ETARGET
npm ERR! notarget No matching version found for #angular/cdk#^8.2.14.
npm ERR! notarget In most cases you or one of your dependencies are requesting
npm ERR! notarget a package version that doesn't exist.
npm ERR! notarget
npm ERR! notarget It was specified as a dependency of 'jhipster-ui-libs'
npm ERR! notarget
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\48696\AppData\Roaming\npm-cache\_logs\2020-02-04T16_19_42_448Z-debug.log
What should I do to avoid this error?

Answer 1

The installation of primeng seems to always be a bit tricky, no matter the version. The instructions in this answer have been tested with JHipster 6.6.0.
1. Install PrimeNG
You must install a version of PrimeNG that is compatible with whatever version of angular JHipster is using. In this case JHipster 6.6.0 uses angular 8 so I installed version 8.1.1 of PrimeNG (the latest version 8 available).
You can use the following command if you use npm:
npm i primeng#8.1.1 primeicons #angular/animations
Or the following command if you use yarn:
yarn add primeng#8.1.1 primeicons #angular/animations
Remember that, in the future, you might be required to specify a compatible version of #angular/animations too.
2. Import the required PrimeNG modules
Now you must import the required modules, in my case just to test things I wanted to add a PrimeNG button so I imported the ButtonModule.
Open the [your-entity].module.ts file (or home.module.ts) and add the following lines:
import { BrowserAnimationsModule } from '#angular/platform-browser/animations';
import { ButtonModule } from 'primeng/button';
...
#NgModule({
imports: [..., BrowserAnimationsModule, ButtonModule],
...
})
In this second step it is very important to never import modules from primeng/primeng. You must use the specific module sub-folder like I did from 'primeng/button'.
3. Import the required css files
Open your vendor.scss file (or vendor.css if you do not use SCSS) and add the following:
...
// Import PrimeNG source files
#import '~primeng/resources/primeng.min.css';
#import '~primeng/resources/themes/nova-light/theme.css';
#import '~primeicons/primeicons.css';
...
At this point you should be able to add a p-button to your *.component.html file and it should be rendered without errors. Open two consoles and run .\mvnw and npm start respectively, as usual.
4. Add any extra dependency you need (Optional)
Very common example: you need to use ChartJS, you will have to add the dependency accordingly e.g.: npm i chart.js. Then add the import to your *.module.ts file:
import { ChartModule } from 'primeng/chart';
...
#NgModule({
imports: [..., ChartModule],
...
})
And finally add the bundle to your vendor.ts like this:
import 'chart.js/dist/Chart.bundle';
And now you should be able to add a chart like explained in the official primeng documentation.
I've published a repo in my github with the very minimum configuration required to start using PrimeNG in your JHipster 6.6.0 installation. You can find it here.
Changes, fixes and suggestions are welcome. I did this in a bit of a rush, my apologies.