'p-header' is not a known element in PrimeNg for Angular2 application

Question

i am using PrimeNg for my angular2 project and i am trying to add panel in the page. I used below code for this which i took from primeng tutorial ( http://www.primefaces.org/primeng/#/panel ):-

my html file has below code :-

<p-panel>
   <p-header>
      Header content here
   </p-header>
  Body Content
</p-panel>

I have added imported required modules in my module from primeng :-

   import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
   import { MyComponent } from './my.component';
   import { CommonModule } from '@angular/common';
   import { SharedModule, PanelModule } from 'primeng/primeng';


 @NgModule({
  imports: [
    CommonModule, SharedModule, PanelModule
   ],
   declarations: [MyComponent],
   schemas: [CUSTOM_ELEMENTS_SCHEMA ]
   })
  export class ThemeModule { }

This is throwing below error in console :-

EXCEPTION: Uncaught (in promise): Error: Template parse errors: 'p-header' is not a known element: 1. If 'p-header' is an Angular component, then verify that it is part of this module. 2. If 'p-header' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message. ("

Answer 1

With 2.0-RC.1 primeng changed and to and if you upgrade your version it will work.

Answer 2

Try to import SharedModule to solve this issue

import {ChartModule, CalendarModule, SharedModule} from 'primeng/primeng';

@NgModule({
imports: [
    CommonModule,
    FormsModule,
    CalendarModule,
    SharedModule,
],

Answer 3

It was version issue. Its working with version 2.

Answer 4

there is a new module for this in version 8.0.0. you can add

import {CardModule} from 'primeng/card';

to solve this issue