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:\Users696\AppData\Roaming\npm-cache\_logs20-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 文件（如果您不使用 SCSS，则打开 vendor.css）并添加以下内容：

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

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

Primeng 与 jhipster

Primeng with jhipster

jhipster

primeng