如何在 PrimeNG 6+ 中使用 JHipster 5+答案

【问题标题】：How to use JHipster 5+ with PrimeNG 6+如何在 PrimeNG 6+ 中使用 JHipster 5+
【发布时间】：2018-08-23 01:17:03
【问题描述】：

我试过了：

official getting started guide for PrimeNG
Steps to integrate PrimeNG with JHipster（对不起，如果这是一个重复的帖子，没有代表在那里发表评论）
generator-jhipster-primeng

以及其他一些文章和 stackoverflow 帖子，在让最新的 PrimeNG 6+ 与最新的 JHipster 5+ 一起工作方面没有运气。它大部分可以工作，但样式有点偏离 - 主要是似乎素数图标不起作用。

例如，我尝试了primeng filter table example，除了下拉箭头等图标显示为空框以及其他图标显示不正确外，它大部分都可以正常工作。我怀疑这可能与没有正确导入的素数图标有关？

有没有人解决这个问题？我使用全新安装的所有内容进行了测试，但如果确实需要，我可以发布代码。

【问题讨论】：

您是否在您的 vendor.css 中导入了 css 文件（在官方指南中的 Styles Configuration 下）？
是的，否则样式将完全错误。它对你有用吗？
嗯，它现在似乎几乎可以工作了，风格对我来说只是一点点。我将继续对其进行更多测试并查看，否则我将发布一个示例 repo。绝对generator-jhipster-primeng 似乎不能开箱即用，官方 PrimeNG 示例需要将 fa-icons 更改为 angular 样式

标签： angular webpack jhipster primeng

【解决方案1】：

抱歉，这对我有用，我只是在使用 generator-jhipster-primeng 时被绊倒了，它不能开箱即用。步骤here 大部分工作，只需要包含素数图标。无论如何，我在下面提供了完整的说明。

但是，layout/css 样式仍然有些偏离（可能它们与 JHipster/bootstrap 冲突）并且您必须调整一些官方 PrimeNG 示例，例如使用 <fa-icon>而不是旧的<i> 样式图标。

将 PrimeNG 集成到 JHipster 项目中的步骤：

1。添加依赖项

yarn add primeicons primeng @angular/animations
可能需要使用相同版本的 Angular 核心来制作动画以避免出现问题

2。导入css样式

在vendor.css（或vendor.scss，如果你使用Sass）添加：

@import '~primeicons/primeicons.css';
@import '~primeng/resources/themes/nova-light/theme.css'; // pick whatever theme
@import '~primeng/resources/primeng.min.css'

请注意引导主题布局特别关闭。其他主题见node_modules/primeng/resources/themes

3。导入模块

我将BrowserAnimationsModule 添加到app.module.ts 但您可以在需要的地方添加它：
- import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
- 将BrowserAnimationsModule 也添加到@NgModule 导入数组中
根据需要导入任何 PrimeNG 模块（按照示例中的文档进行操作）

就是这样！现在按照 PrimeNG 文档使用特定组件。

用jhipster 5.2.1、primeng 6.1.2和primeicons 1.0.0-beta.10测试

【讨论】：