13

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

Marcin Krajewski
  • 43
  • 6
Andrés Quesada
  • 133
  • 1
  • 4
  • Have you imported CSS? – Gaël Marziou May 24 '17 at 20:17
  • Yes I have included them. Do you know how can I check that css files are correctly imported? – Andrés Quesada May 25 '17 at 15:07
  • Easy just search for one of primeng classes (e.g. ui-widget) in generated bundle. Which theme have you included? Myself, I've used Bootstrap theme to have something visually integrated with JHipster generated pages. – Gaël Marziou May 25 '17 at 15:59
  • Did you follow the PrimeNG installation guide? It's hard to tell your issue as you don't give any information... If you use Yarn and follow the PrimeNG guide, it should work out-of-the-box in a few minutes (I did it last week !) – Julien Dubois May 26 '17 at 01:15
  • Gaël, Julien, thank you so much for your help. I have followed the PrimeNG installation guide but probably, as Gaël said, there is something wrong with styles, probably I am not importing them correctly, as I am not sure about the correct way of doing it with webpack. I am gathering all relevant information for coming back with a concrete case. By the way, reading over here and other JHipster pages, I have seen you both are involved in the creation of the framework: congratulations, it is an amazing project!! – Andrés Quesada May 27 '17 at 07:38

4 Answers4

20

The following steps worked for us.

1- Add dependecies with yarn

yarn add primeng
yarn add @angular/animations

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

This will

  • 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- 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 add them to the imports array inside the @NgModule

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

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

7- Run yarn start and test it out!

UPDATE Jhipster version: 4.5.2

Deepu
  • 1,241
  • 1
  • 11
  • 24
cjmm
  • 425
  • 4
  • 11
  • 3
    The command in step 6 is changed to `yarn webpack:build` instead of `yarn webpack:build:vendor` – Deepu Jul 20 '17 at 13:46
5

I just got PrimeNG working with JHipster 4.4.1 (using Angular4 and SCSS).

Julien's comment above, and Marcin's answer about vendor.css, combine to give you the solution. However, as a newcomer to JHipster, even after reading this thread, it took me a couple tries to put that together correctly.

So, to clarify, here is what worked for me:

1. Install PrimeNG and dependencies

Run yarn add primeng to install PrimeNG as a dependency for your app.

Run yarn add @angular/animations (see PrimeNG Setup Guide for an explanation of this).

2. Add the PrimeNG styles to your app

Instead of using .angular-cli.json to add the styles to the build, simply @import them in your vendor.scss (or vendor.css). For me, that meant adding these two lines at the end of content/scss/vendor.scss: 

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

Run yarn run webpack:build:vendor.

If, like me, your build fails because it cannot find a few image files, I got around it by simply copying the node_modules/primeng/resources/images/ directory into content/scss/. Perhaps someone has a more "correct" way to solve this, but that workaround did the trick for me.

3. Make sure animations are included in your module

If they weren't already, make sure you're importing animations in any module that will use PrimeNG (I did this on my root module):

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

Don't forget to also add this to the @NgModule imports array.

4. Start using PrimeNG!

Now everything should be wired up -- just follow PrimeNG's docs to import and use their components within yours.

i.e. import { AccordionModule } from 'primeng/primeng' (also add to @NgModule imports).

rmhunter
  • 581
  • 2
  • 9
  • I have accepted the other answer because in my case I have vendor.css and the imports are the correct one. Anyway, thanks so much for your answer. – Andrés Quesada Jun 02 '17 at 00:20
  • That's why I clarified I used SCSS in mine, but yeah no worries. We answered at the same time anyway, if I had seen cjmm's I wouldn't have typed mine because they are basically the same. – rmhunter Jun 02 '17 at 01:42
  • Can you please suggest the best solution for that images error? – Harsh Jul 31 '18 at 09:30
  • If you're referring to the build failing because it cannot find PrimeNG's image files, all I did was exactly as it says in step 2 above: copy the `node_modules/primeng/resources/images/` directory into `content/scss/`, so that the JHipster webpack config finds it where it looks for it. I haven't used JHipster or Angular in several months, so the paths might be different now, but for me they were in the error message. – rmhunter Aug 02 '18 at 15:46
4

This is a solution that worked for me with other module (angular-calendar) and it imports styles from node_modues directory

Add to file:

vendor.css :

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

and run

yarn run webpack:build:vendor
Marcin Krajewski
  • 43
  • 6
1

Update for PrimeNG 6

Follow top answers here but also need to add primeicons dependency. See my answer here for more info

  • Run cmd yarn add primeicons
  • In vendor.css add @import '~primeicons/primeicons.css'; (not sure if import order matters)
slyFox
  • 51
  • 6