Primeng with jhipster | 易学教程

问题

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?

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

来源：https://stackoverflow.com/questions/60061672/primeng-with-jhipster

标签

jhipster

primeng