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.

+3


source to share


1 answer


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,
    ...
]

      

+2


source







All Articles