步骤PrimeNG与JHipster整合

Question

我们一直在努力PrimeNG工作纳入一个JHipster（角4）产生的，但没有成功的项目。下载后安装PrimeNG到我们的项目中，我们都能够导入类，但是当我们有相应的标签模板，将没有绘制。我们已经测试了几个PrimeNG组件。此外，我们已经做了在app.module等进口，我想更具体的，但任何地方显示任何错误。你有与PrimeNG和JHipster如何一起工作的任何提示？谢谢

Answer 1

下面的步骤为我们工作。

1 - 添加与qazxsw POI依赖

yarn

2 - 创建新的组件与NG CLI，站在那里你要创建的组件运行在同一文件夹

yarn add primeng
yarn add @angular/animations

这将

• 创建你需要的ng g component new-cmp 和new-cmp一个.html文件夹。
• 导入和声明的最接近模块中，所述组分例如.ts

3-添加要与在新组件被宣布，在我们的例子home.module.ts例如模块上的imports一起使用的主要部件的BrowserAnimationsModule：

home.module.ts

并将它们添加到@NgModule内进口阵列

4-转到

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

并导入样式，就像马辛KRAJEWSKI建议：

src/main/webapp/content/scss/vendor.scss

5-用于测试添加的首要组分在所创建的组件的HTML，例如

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

6-运行<button pButton type="button" label="Click"></button>所以应用拿起从yarn run webpack:build的变化

7运行vendors.scss和测试出来！

UPDATE Jhipster版本：4.5.2

Answer 2

我刚刚PrimeNG与JHipster 4.4.1（使用Angular4和SCSS）工作。

朱利安的评论上方，和马辛的约yarn start答案，结合给你的解决方案。然而，作为一个初来乍到JHipster，甚至阅读此线程后，我花了一对夫妇试图正确地一起放。

因此，为了澄清，这里是我工作：

---

1.安装PrimeNG和依赖

运行vendor.css安装PrimeNG为您的应用程序的依赖。

运行yarn add primeng（见yarn add @angular/animations对于这样的一个解释）。

---

2. PrimeNG风格添加到您的应用

而不是使用PrimeNG Setup Guide的样式添加到构建，只需.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/。也许有人有一个更“正确”的方式来解决这个问题，但解决方法奏效了我。

---

3.确保动画包括你的模块中

如果他们没有准备好，请确保您将使用PrimeNG（我这样做是我的根模块）中的任何模块导入动画：

content/scss/

不要忘了这也增加了@NgModule import { BrowserAnimationsModule } from '@angular/platform-browser/animations';阵列。

---

4.开始使用PrimeNG！

现在，一切都应该进行接线 - 只要按照PrimeNG的文档导入并在您使用它们的组件。

即imports（也增加@NgModule import { AccordionModule } from 'primeng/primeng'）。

Answer 3

这是与其他模块（imports）为我工作的解决方案，它从angular-calendar目录导入样式

添加到文件：

vendor.css：

node_modues

并运行

@import "~angular-calendar/dist/css/angular-calendar.css";

Answer 4

更新PrimeNG 6

这里按照上面的答案，但还需要添加primeicons依赖。 yarn run webpack:build:vendor

• 运行CMD See my answer here for more info
• 在yarn add primeicons添加vendor.css（不知道是否进口秩序事项）