web-dev-qa-db-ja.com

PrimeNGをJHipsterと統合する手順

PrimeNGコンポーネントをJHipster（angular 4）で生成されたプロジェクトに組み込もうとしましたが、成功しませんでした。 PrimeNGをプロジェクトにダウンロードしてインストールすると、クラスをインポートできますが、対応するタグをテンプレートに含めると何も描画されません。 PrimeNGコンポーネントのいくつかをテストしました。また、app.moduleなどでインポートを行いました。より具体的にしたいのですが、どこにもエラーが表示されません。 PrimeNGとJHipsterをどのように連携させるかについてのヒントはありますか？ありがとう

webpackjhipsterprimeng
12
Andrés Quesada

次の手順は私たちのために働いた。

1-​​= yarnで依存関係を追加します

yarn add primeng
yarn add @angular/animations

2- ng cliを使用して新しいコンポーネントを作成し、コンポーネントの実行を作成するのと同じフォルダーに立っています

ng g component new-cmp

この意志

  • 必要なnew-cmpおよび.htmlを含む.tsフォルダーを作成します。
  • 最も近いモジュールにコンポーネントをインポートして宣言します。例：home.module.ts

-使用する主要コンポーネントのimportsを、新しいコンポーネントが宣言されたモジュールのBrowserAnimationsModuleと一緒に追加します。この例ではhome.module.tsです。

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

[〜＃〜] and [〜＃〜] @ 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を実行してテストしてください！

[〜＃〜] update [〜＃〜] Jhipsterバージョン：4.5.2

18
cjmm

PrimeNGをJHipster4.4.1（Angular4とSCSSを使用）で動作させました。

上記のJulienのコメントとvendor.cssに関するMarcinの回答を組み合わせて、ソリューションを提供します。しかし、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の最後にこれらの2行を追加することを意味しました。

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

これも@NgModuleimports配列に追加することを忘れないでください。

4。 PrimeNGの使用を開始してください！

これで、すべてを接続する必要があります。PrimeNGのドキュメントに従って、コンポーネントをインポートして使用してください。

import { AccordionModule } from 'primeng/primeng'（@NgModule importsにも追加）。

5
rmhunter

これは他のモジュール（angular-calendar）で私のために働いたソリューションであり、node_moduesディレクトリからスタイルをインポートします

ファイルに追加：

vendor.css：

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

そして走る

yarn run webpack:build:vendor
4
Marcin Krajewski

PrimeNG 6のアップデート

ここで上位の回答に従いますが、primeicons依存関係を追加する必要もあります。 詳細はこちらの私の答えを参照してください

  • Cmd yarn add primeiconsを実行します
  • vendor.cssに@import '~primeicons/primeicons.css';を追加します（インポート順が重要かどうかはわかりません）
1
slyFox