将 PrimeNG 与 JHipster 集成的步骤

Question

我们一直在尝试将 PrimeNG 组件合并到 JHipster (angular 4) 生成的项目中，但没有成功。下载 PrimeNG 并将其安装到我们的项目中后，我们可以导入类但是当我们将相应的标签包含到模板中时，不会绘制任何内容。我们已经测试了几个 PrimeNG 组件。我们还完成了 app.module 中的导入，等等。我想更具体一些，但任何地方都没有显示错误。您对如何将 PrimeNG 和 JHipster 一起使用有任何提示吗？谢谢

Answer 1

这是一个适用于我的其他模块 (angular-calendar) 的解决方案，它从 node_modues 目录

导入样式

添加到文件：

vendor.css :

@import "~angular-calendar/dist/css/angular-calendar.css";

和运行

yarn run webpack:build:vendor

Answer 2

以下步骤对我们有用。

1- 添加依赖yarn

yarn add primeng
yarn add @angular/animations

2- 使用 ng cli 创建了新组件，位于要创建组件的同一文件夹中运行

ng g component new-cmp

这将

创建一个 new-cmp 文件夹，其中包含您需要的 .html 和 .ts。
在最近的模块中导入并声明组件，例如home.module.ts

3- 在声明新组件的模块上添加要使用的主要组件的 imports 以及 BrowserAnimationsModule，在我们的案例中 home.module.ts 例如：

import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {AccordionModule, RatingModule, CalendarModule, ButtonModule } from 'primeng/primeng';

AND 将它们添加到 @NgModule

中的导入数组

4- 转到 src/main/webapp/content/scss/vendor.scss 并导入样式，如 Marcin Krajewski 建议的那样：

@import '~primeng/resources/primeng.min.css';
@import '~primeng/resources/themes/bootstrap/theme.css';

5-在创建的组件html中添加一个prime组件进行测试，例如<button pButton type="button" label="Click"></button>

6- 运行 yarn run webpack:build 所以应用程序会从 vendors.scss

中获取更改

7- 运行 yarn start 测试一下！

更新 Jhipster 版本：4.5.2

Answer 3

我刚刚让 PrimeNG 与 JHipster 4.4.1 一起工作（使用 Angular4 和 SCSS）。

上面 Julien 的评论，以及 Marcin 关于 vendor.css 的回答，结合起来为您提供解决方案。然而，作为 JHipster 的新手，即使在阅读了这个帖子之后，我也花了几次尝试才正确地将它组合在一起。

所以，澄清一下，这是对我有用的：

1.安装 PrimeNG 和依赖项

运行 yarn add primeng 将 PrimeNG 安装为您的应用程序的依赖项。

运行 yarn add @angular/animations（参见 PrimeNG Setup Guide 的解释）。

2。将 PrimeNG 样式添加到您的应用程序

无需使用 .angular-cli.json 将样式添加到构建中，只需 @import 将它们添加到您的 vendor.scss（或 vendor.css）中。对我来说，这意味着在 content/scss/vendor.scss 的末尾添加这两行：

@import 'node_modules/primeng/resources/primeng.min';
@import 'node_modules/primeng/resources/themes/bootstrap/theme';

运行 yarn run webpack:build:vendor.

如果像我一样，您的构建因为找不到一些图像文件而失败，我通过简单地将 node_modules/primeng/resources/images/ 目录复制到 content/scss/ 来绕过它。也许有人有更 "correct" 的方法来解决这个问题，但这个解决方法对我有用。

3。确保动画包含在您的模块中

如果它们还没有，请确保您在任何将使用 PrimeNG 的模块中导入动画（我在我的根模块上这样做）：

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

别忘了将其添加到@NgModule imports 数组中。

4.开始使用 PrimeNG！

现在一切都应该连接好了——只需按照 PrimeNG 的文档导入并在您的文档中使用它们的组件即可。

即import { AccordionModule } from 'primeng/primeng'（也添加到@NgModule imports）。

Answer 4

PrimeNG 6 更新

按照此处的最佳答案，但还需要添加 primeicons 依赖项。

运行命令 yarn add primeicons
在 vendor.css 中添加 @import '~primeicons/primeicons.css';（不确定导入顺序是否重要）

将 PrimeNG 与 JHipster 集成的步骤

Steps to integrate PrimeNG with JHipster

jhipster

webpack

primeng