Can't manage to render any PrimeNG UI component

Question

Okay so I'm just trying to install PrimeNG UI components for Angular 4, and there's no way I can manage do do it.

I'm following this official "PrimeNG setup", but I find the instructions very poor and misleading.

I'm using Angular-CLI v1.1.1, Node v7.9.0

Step 1 :

I create a new Angular-CLI project with

ng new test-primeNG
cd test-primeNG
npm install primeng --save

ng serve : OK on localhost:4200

Step 2

They say to import {AccordionModule} from 'primeng/primeng'; and import {MenuItem} from 'primeng/primeng';

It's not said where, but I suppose this goes into app.module.ts.

It's also not said (very poor documentation), but I assume I have to do something like

 imports: [
    BrowserModule,
    AccordionModule
  ],

Compilation OK, ng serve still OK

Step 3

Since I imported the accordion module, I try to create an accordion. No need for CSS for now, I'm just trying to not get errors in the console.

<p-accordion>
    <p-accordionTab header="Header 1">Content 1</p-accordionTab>
    <p-accordionTab header="Header 2">Content 2</p-accordionTab>
    <p-accordionTab header="Header 3">Content 3</p-accordionTab>
</p-accordion>

I already get a sh*tload of errors in the console, starting with :

Template parse errors: 'p-accordionTab' is not a known element: 1. If 'p-accordionTab' is an Angular component, then verify that it is part of this module. 2. If 'p-accordionTab' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

Then the documentation talks about some Angular 4 animation stuff (?) and add import {BrowserModule} from '@angular/platform-browser'; which is already generated by Angular-CLI in app.module.ts so I have no idea why this is here.

Bottom line : after struggling all morning, I still don't have a clue about how to render any PrimeNG component.

Amit Amit · Accepted Answer · 2017-06-12T10:10:58

I think you're missing the SharedModule:

(I needed it to use DataTableModule, maybe it's not needed for accordion and this is just a different issue?)

import {AccordionModule, SharedModule} from 'primeng/primeng';
...
imports: [
    ...
    AccordionModule,
    SharedModule,
    ...
]

Can't manage to render any PrimeNG UI component

1 Answers