带鞭子的初学者

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

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

1。安装PrimeNG

您必须安装与所使用的Angle JHipster版本兼容的PrimeNG版本。在这种情况下，JHipster 6.6.0使用angular 8，因此我安装了PrimeNG的版本8.1.1（提供了最新的版本8）。

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

npm i [email protected] @angular/animations

或者如果使用yarn，则使用以下命令：

yarn add [email protected] @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';
...

此时，您应该可以将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中发布了一个仓库，其中包含在JHipster 6.6.0安装中开始使用PrimeNG所需的最低配置。您可以找到它here。

欢迎更改，修复和建议。抱歉，我很着急。