20

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>

user6850401
  • 201
  • 1
  • 2
  • 4
  • 3
    Have you imported Accordion module in the main module? – yurzui Sep 19 '16 at 20:55
  • 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 Sep 19 '16 at 21:52
  • Did you found any solutions for this problem @user6850401 ? – Cedric Sep 29 '16 at 20:10
  • 2
    might be a bit late but for some reason, when I rebuilt my local workspace with Angular 2 Final, the error went away. – user6850401 Oct 05 '16 at 20:12
  • I stopped debugging and rebuilt my dotnetcore project and the error went for me too. – James Oct 07 '16 at 15:21
  • Did you try using `p-accordion-tab` instead of `p-accordionTab` angular doesn't like camel case in templates usually – Aviad P. Aug 18 '17 at 14:25
  • can you share the error log, most probably you must have skipped injecting some dependencies. Also as commented below by another user, PrimeNG requires a peer of angular animations module https://www.primefaces.org/primeng/#/setup; also you have to add the omega css from ng Module into your resourse. – Ronit Oommen Jan 27 '18 at 05:35

1 Answers1

4

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"
      ],
Chandru
  • 10,864
  • 6
  • 38
  • 53