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'; 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

Answer 2

我刚刚让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.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）。

Answer 3

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

添加到文件：

vendor.css：

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

并运行

yarn run webpack:build:vendor

Answer 4

PrimeNG 6的更新

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

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

将PrimeNG与JHipster

4 个答案: