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

Question

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

my html file has the following code: -

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

I added the imported necessary modules to 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 the error below in the console: -

: Uncaught ( ): : : 'p-header' : 1. p- , , . 2. p-header -, "CUSTOM_ELEMENTS_SCHEMA" "@NgModule.schemas" , . ("

Answer 1

2.0-RC.1 primeng , , .

Answer 2

SharedModule .

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

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

Answer 3

. 2.

Answer 4

8.0.0.

import {CardModule} from 'primeng/card';