webpack - 将 PrimeNG 与 JHipster 集成的步骤

Question

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

Answer 1

以下步骤对我们有用。

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

和 将它们添加到 @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 中添加用于测试的主要组件，例如 <button pButton type="button" label="Click"></button>
6- 运行 yarn run webpack:build所以应用程序会从 vendors.scss 中获取更改

7- 运行 yarn start并测试一下!

更新
Jhipster 版本:4.5.2