Primeng 与 jhipster

Question

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

 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

我应该怎么做才能避免这个错误？

Answer 1

primeng 的安装似乎总是有点棘手，无论版本如何。此答案中的说明已使用 JHipster 6.6.0 进行了测试。

1.安装 PrimeNG

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

如果你使用 npm 可以使用以下命令：

npm i primeng@8.1.1 primeicons @angular/animations

如果你使用yarn，或者下面的命令：

yarn add primeng@8.1.1 primeicons @angular/animations

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

2。导入所需的 PrimeNG 模块

现在你必须导入所需的模块，在我的例子中只是为了测试我想添加 PrimeNG 按钮的东西，所以我导入了ButtonModule。

打开[your-entity].module.ts 文件（或home.module.ts）并添加以下行：

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { ButtonModule } from 'primeng/button'; 
...
@NgModule({
  imports: [..., BrowserAnimationsModule, ButtonModule],
  ...
})

在第二步中，非常重要永远不要从primeng/primeng 导入模块。你必须像我from 'primeng/button'那样使用特定的模块子文件夹。

3.导入所需的css文件

打开您的 vendor.scss 文件（或 vendor.css，如果您不使用 SCSS）并添加以下内容：

...
// 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。

4.添加您需要的任何额外依赖项（可选）

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

import { ChartModule } from 'primeng/chart';
...
@NgModule({
  imports: [..., ChartModule],
  ...
})

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

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

现在您应该可以像官方primeng documentation 中解释的那样添加图表了。

---

我已经在我的 github 上发布了一个 repo，其中包含在您的 JHipster 6.6.0 安装中开始使用 PrimeNG 所需的最低配置。你可以找到它here。

欢迎更改、修复和建议。有点匆忙，抱歉。