'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. ("

`` was introduced as of PrimeNG 2.0.0. In previous versions this tag is not known. Which version are you running? — Emdee, Jan 23 '17 at 13:46

score 8 · Accepted Answer · answered Jan 24 '17 at 14:12

8

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

answered Jan 24 '17 at 14:12

Mertcan Diken

14,483
2
26
33

1

how to change primeng version ...by installing or by changing package.json file – Shreekant N Jun 09 '17 at 14:10

score 5 · Answer 2 · answered Feb 01 '17 at 06:01

5

Try to import SharedModule to solve this issue

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

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

answered Feb 01 '17 at 06:01

saravanakumar

103
1
1
5

score 1 · Answer 3 · answered Jan 23 '17 at 13:57

1

It was version issue. Its working with version 2.

answered Jan 23 '17 at 13:57

Rj-s

484
3
7
17

How did you upgrade it? – Eranki Feb 07 '22 at 10:27

Hussain Wali · Answer 4 · 2019-08-18T10:13:41.350

0

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

import {CardModule} from 'primeng/card';

to solve this issue

edited Aug 18 '19 at 10:13

answered Aug 18 '19 at 10:10

Hussain Wali

183
1
4
11

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

4 Answers4