PrimeNg <component> is not a known element error (@angular-2.0.0 & primeng-1.0.0-beta.16)

Question

I started with Angular 2 RC5 and PrimeNG 1.0.0-beta.13 beta. I'm loading PrimeNg components as xModules and has no problems displaying Data Table, Input, SelectItem, Buttons, modals. However, I'm getting this error when I try to use TabView or Accordion.

Unhandled Promise rejection: Template parse errors: 'p-accordionTab' is not a known element:

I imported the TabViewModule in the @NgModule. Currently, I updated my app to use Angular 2.0.0 (final) and PrimeNg beta.16 (latest) but still having the errors. I'm using webpack to chunk polyfills, vendor and app codes and I'm seeing accordion and tabview modules in the webpack-generated js files.

I'm not sure what I'm missing. Let me know if you need more info.

Thanks in advance!

Some snippets:

app.module.ts

import { 
ButtonModule, 
  DataTableModule, 
  DialogModule, 
  GrowlModule,  
  TabViewModule,
  AccordionModule }  from 'primeng/primeng';

@NgModule({
...
imports: [
DataTableModule, 
DialogModule, 
GrowlModule,  
TabViewModule,
AccordionModule
],
...
});

template.html (pasted from PrimeNG docs)

<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>

Yes, I did import AccordionModule in app.module.ts. I also tried adding it to the actual module (and component) which calls the template that renders the accordion tags but still no luck. — user6850401
might be a bit late but for some reason, when I rebuilt my local workspace with Angular 2 Final, the error went away. — user6850401
I stopped debugging and rebuilt my dotnetcore project and the error went for me too. — James

Chandru Chandru · Accepted Answer · 2017-09-10T10:23:25

The problem is primeng need animation package so i just import BrowserAnimationsModule in appModule.

npm install primeng

npm install primeng --save

app.module.ts

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import {AccordionModule} from 'primeng/primeng';

@NgModule({
    imports: [
        AccordionModule,
        BrowserAnimationsModule
    ],
})

app.component.html

<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>

.angular-cli.json

"styles": [
        "../node_modules/primeng/resources/themes/omega/theme.css",
        "../node_modules/primeng/resources/primeng.min.css"
      ],

PrimeNg <component> is not a known element error (@angular-2.0.0 & primeng-1.0.0-beta.16)

1 Answers