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

Question

我试过了：

• PrimeNG官方入门指南
• 将PrimeNG与JHipster集成的步骤 （很抱歉，如果这是重复的帖子，那里没有人对此发表评论）
• 发电机jhipster-primeng

以及其他一些文章和stackoverflow帖子，都没有让最新的PrimeNG 6+与最新的JHipster 5+配合使用的运气。 多数情况下都可以使用，但是样式有些偏离-主要是好像primiconicon无效。

例如，我尝试了primeng过滤器表示例，并且除了下拉箭头之类的图标显示为空框以及其他未正确显示的图标之外，该示例大部分都可以使用。 我怀疑这可能与primeicons无法正确导入有关吗？

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

Answer 1

抱歉，这对我generator-jhipster-primeng ，我刚开始使用generator-jhipster-primeng ，它开箱即用。 这里的步骤大部分有效，只需要包含基本图标即可。 无论如何，我还是在下面列出了完整的说明。

但是， 布局/ css样式仍然有些偏离 （也许与JHipster / bootstrap冲突），您必须调整一些正式的PrimeNG示例，例如使用<fa-icon>代替旧的<i>样式图标。

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

1.添加依赖项

• yarn add primeicons primeng @angular/animations
• 可能需要对动画使用相同版本的Angular core，以避免出现问题

2.导入css样式

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

@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