Angular – ‘p-header’ is not a known element in PrimeNg for Angular2 application

angularprimeng

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

Best Answer

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

Related Solutions

Angular2 material ‘md-icon’ is not a known element

What about the export section? Did you provide MaterialModule there?

@NgModule({
  imports: [
    MaterialModule.forRoot()
  ],
  exports: [
    MaterialModule
  ]
})

Remember to provide icon styles in your index.html:

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

After that you should be able to use icons in your views:

<md-icon>delete</md-icon>

Angular 2 ‘component’ is not a known element

These are the 5 steps I perform when I get such an error.

Are you sure the name is correct? (Also check the selector defined in the component)
Declare the component in a module?
If it is in another module, export the component?
If it is in another module, import that module?
Restart the cli?

When the error occurs during unit testing, make sure your declared the component or imported the module in TestBed.configureTestingModule

I also tried putting ContactBoxComponent in CustomersAddComponent and then in another one (from different module) but I got an error saying there are multiple declarations.

You can't declare a component twice. You should declare and export your component in a new separate module. Next you should import this new module in every module you want to use your component.

It is hard to tell when you should create new module and when you shouldn't. I usually create a new module for every component I reuse. When I have some components that I use almost everywhere I put them in a single module. When I have a component that I don't reuse I won't create a separate module until I need it somewhere else.

Though it might be tempting to put all you components in a single module, this is bad for the performance. While developing, a module has to recompile every time changes are made. The bigger the module (more components) the more time it takes. Making a small change to big module takes more time than making a small change in a small module.

Related Topic