打手枪 [英] Primeng with jhipster

问题描述

我有jhipster 6.6.0版本，我想在由jhipster生成的应用程序中使用primeng.执行命令后:

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 

一切正常，但我运行:

npm install 

我得到这个错误:

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

该如何避免该错误?

推荐答案

primng的安装似乎总是很棘手，无论版本如何.此答案中的说明已通过JHipster 6.6.0进行了测试.

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.安装PrimeNG

您必须安装与所使用的angular JHipster版本兼容的PrimeNG版本.在这种情况下，JHipster 6.6.0使用angular 8，所以我安装了版本 8.1.1 PrimeNG(可用的最新版本8).

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).

如果使用npm，则可以使用以下命令:

You can use the following command if you use npm:

npm i primeng@8.1.1 primeicons @angular/animations

或使用以下命令(如果使用yarn):

Or the following command if you use yarn:

yarn add primeng@8.1.1 primeicons @angular/animations

请记住，将来可能还会要求您指定兼容版本的@angular/animations.

Remember that, in the future, you might be required to specify a compatible version of @angular/animations too.

2.导入所需的PrimeNG模块

现在，您必须导入所需的模块，在本例中，只是为了测试我想添加PrimeNG按钮的内容，所以我导入了ButtonModule.

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.

打开[your-entity].module.ts文件(或home.module.ts)并添加以下行:

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],
  ...
})

在第二步中，绝对不要从primeng/primeng导入模块，这很重要.您必须像from 'primeng/button'一样使用特定的模块子文件夹.

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.导入所需的CSS文件

打开您的vendor.scss文件(如果不使用SCSS，则打开vendor.css)并添加以下内容:

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';
...

这时，您应该能够将p-button添加到您的*.component.html文件，并且应该正确呈现该文件.像往常一样，打开两个控制台并分别运行.\mvnw和npm start.

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.添加您需要的任何其他依赖项(可选)

非常常见的示例:您需要使用ChartJS，您将必须相应地添加依赖项，例如:npm i chart.js.然后将导入添加到您的*.module.ts文件中:

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],
  ...
})

最后将捆绑包添加到您的vendor.ts中，如下所示:

And finally add the bundle to your vendor.ts like this:

import 'chart.js/dist/Chart.bundle';

现在您应该可以像官方 primeng文档中所述添加图表了.

And now you should be able to add a chart like explained in the official primeng documentation.

我已经在我的github中发布了一个仓库，其中包含在JHipster 6.6.0安装中开始使用PrimeNG所需的最低配置.您可以在此处找到它.

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.

这篇关于打手枪的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！