将PrimeNG与JHipster集成的步骤

Question

我们一直试图将PrimeNG组件合并到JHipster(角度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

Answer 2

我刚刚让PrimeNG使用JHipster 4.4.1(使用Angular4和SCSS).

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

所以,澄清一下,这对我有用:

1.安装PrimeNG和依赖项

运行yarn add primeng以安装PrimeNG作为您的应用程序的依赖项.

运行yarn add @angular/animations(有关此内容的说明,请参阅" PrimeNG设置指南").

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/.也许某人有一种更"正确"的方式来解决这个问题,但这种解决办法对我有用.

3.确保模块中包含动画

如果它们还没有,请确保您在任何将使用PrimeNG的模块中导入动画(我在我的根模块上执行此操作):

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

别忘了将它添加到@NgModule imports数组中.

4.开始使用PrimeNG!

现在一切都应该连线 - 只需按照PrimeNG的文档导入并使用他们的组件.

即import { AccordionModule } from 'primeng/primeng'(也添加到@NgModule imports).