将 PrimeNG 与 JHipster 集成的步骤 [英] Steps to integrate PrimeNG with JHipster

问题描述

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

We have been trying to incorporate PrimeNG components into a JHipster (angular 4) generated project with no success. After download and install PrimeNG into our project, we are able to import classes but when we include the corresponding tags into templates nothing is drawn. We have tested several of the PrimeNG components. Also we have done the imports in app.module, etc. I would like to be more concrete, but no error is displayed anywhere. Do you have any hint on how work with PrimeNG and JHipster together? Thanks

推荐答案

以下步骤对我们有用.

1- 使用 yarn

yarn add primeng
yarn add @angular/animations

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

2- Created new component with ng cli, standing on the same folder where you want to create the component run

ng g component new-cmp

这将

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

• Create a new-cmp folder with the .html and .ts that you need.
• Import and declare the component in the closest module, for example home.module.ts

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

3- Add the imports of the prime components you want to use along with the BrowserAnimationsModule on the module where the new component was declared, in our case home.module.ts for example:

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

AND 将它们添加到 @NgModule 内的导入数组

AND add them to the imports array inside the @NgModule

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

4- Go to src/main/webapp/content/scss/vendor.scss and import the styles, like Marcin Krajewski suggests:

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

5-在创建的组件的html中添加用于测试的主要组件，例如<button pButton type="button" label="Click"></按钮>

5- Add a prime component for testing in the html of the created component, for example <button pButton type="button" label="Click"></button>

6- 运行 yarn run webpack:build 以便应用从 vendors.scss

6- Run yarn run webpack:build so the apps picks up the changes from vendors.scss

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

7- Run yarn start and test it out!

更新Jhipster 版本:4.5.2

UPDATE Jhipster version: 4.5.2

这篇关于将 PrimeNG 与 JHipster 集成的步骤的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！