将PrimeNG与JHipster

时间:2017-05-24 15:14:57

标签: webpack jhipster primeng

我们一直试图将PrimeNG组件合并到JHipster(角度4)生成的项目中,但没有成功。下载并将PrimeNG安装到我们的项目中后,我们可以导入类,但是当我们将相应的标记包含到模板中时,不会绘制任何内容。我们测试了几种PrimeNG组件。我们还在app.module等中完成了导入。我希望更具体,但不会在任何地方显示错误。你对PrimeNG和JHipster的合作方式有什么暗示吗? 感谢

4 个答案:

答案 0 :(得分:18)

以下步骤对我们有用。

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'; 1}}例如:

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

AND 将它们添加到@NgModule

内的进口数组中

4 - 转到@import '~primeng/resources/primeng.min.css'; @import '~primeng/resources/themes/bootstrap/theme.css'; 并导入样式,例如Marcin Krajewski建议:

<button pButton type="button" label="Click"></button>

5 - 在创建的组件的html中添加一个主要组件进行测试,例如yarn run webpack:build

6 - 运行vendors.scss,以便应用从yarn start

中获取更改

7 - 运行document.addEventListener("scroll", scrollTracking); function scrollTracking() { var scroll25 = false; // Get client heights, 100%, 25% and 50% var clientHeight = document.body.clientHeight; var perc25 = clientHeight * .25; var perc50 = clientHeight * .50; console.log('25%: ' + perc25 + ', 50%: ' + perc50); // Log scroll position from top of document. var scrollTop = document.body.scrollTop; console.log(scrollTop); // If scroll is within the clientHeight range of 25% - 50%, log // message once. if (scrollTop >= perc25 && scrollTop < perc50 && !scroll25) { console.log("25% Reached. Success."); scroll25 = true; } } 并测试一下!

<强>更新 Jhipster版本:4.5.2

答案 1 :(得分:5)

我刚刚让PrimeNG与JHipster 4.4.1合作(使用Angular4和SCSS)。

朱利安上面的评论,以及马辛关于vendor.css的回答,结合起来为你提供了解决方案。然而,作为JHipster的新手,即使在阅读了这个帖子之后,我也花了几次尝试将它们正确地组合在一起。

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

<强> 1。安装PrimeNG和依赖项

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

运行yarn add @angular/animations(有关此问题的解释,请参阅PrimeNG Setup Guide。)

<强> 2。将PrimeNG样式添加到您的应用

不是使用.angular-cli.json将样式添加到构建中,而只需在@import(或vendor.scssvendor.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)。

答案 2 :(得分:4)

这是一个适用于其他模块(angular-calendar)的解决方案,它从node_modues目录导入样式

添加到文件:

vendor.css:

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

并运行

yarn run webpack:build:vendor

答案 3 :(得分:1)

PrimeNG 6的更新

在此处遵循主要答案,但还需要添加primeicons依赖项。 See my answer here for more info

  • 运行cmd yarn add primeicons
  • vendor.css中添加@import '~primeicons/primeicons.css';(不确定导入顺序是否重要)