Can't render PrimeNG UI component
Ok, so I'm just trying to install PrimeNG UI components for Angular 4 and I can't seem to get it done.
I am following this official PrimeNG setup ", but I find the instructions very bad and misleading.
I am using Angular-CLI v1.1.1, Node v7.9.0
Step 1:
I am creating a new Angular-CLI project with
ng new test-primeNG
cd test-primeNG
npm install primeng --save
ng serve
: OK to localhost: 4200
Step 2
They say import {AccordionModule} from 'primeng/primeng';
andimport {MenuItem} from 'primeng/primeng';
He didn't say where, but I suppose it goes to app.module.ts
.
He also didn't say (very bad documentation), but I guess I need to do something like
imports: [
BrowserModule,
AccordionModule
],
Compilation OK, ng serve
still OK
Step 3
Since I imported the module accordion
, I am trying to create an accordion. No CSS needed now, I'm just trying not to 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 sh * tload of errors in the console starting with:
Template parsing errors: "p-accordionTab" is not a known element: 1. If "p-accordionTab" is an Angular component, then make sure it is part of that module. 2. If "p-accordionTab" is a web component, add "CUSTOM_ELEMENTS_SCHEMA" to the "@ NgModule.schemas" of that component to suppress this message.
The documentation then talks about some of the Angular 4 animation stuff (?) And adds import {BrowserModule} from '@angular/platform-browser';
which is already generated by Angular-CLI in app.module.ts
, so I have no idea why it's here.
Bottom line: after struggling all morning, I still don't know how to make any PrimeNG component.
source to share
I think what you are missing is SharedModule
:
(I needed to use DataTableModule
, maybe this is not needed for the accordion and is this a completely different problem?)
import {AccordionModule, SharedModule} from 'primeng/primeng';
...
imports: [
...
AccordionModule,
SharedModule,
...
]
source to share