PrimeNG data table not working

I added the priming controls to my shared module so that I can use them all over the place.

import {InputTextModule, GalleriaModule, MenubarModule, CheckboxModule, DialogModule, MessagesModule, GrowlModule,
  PanelModule, CalendarModule, RadioButtonModule, InputSwitchModule, SelectButtonModule, DataTableModule, DataListModule,
  SplitButtonModule, ButtonModule, DropdownModule, AccordionModule, ProgressBarModule, ConfirmDialogModule, ConfirmationService, 
  TooltipModule } from 'primeng/primeng';

@NgModule({
  imports: [CommonModule, RouterModule, ReactiveFormsModule, 
            MenubarModule, GalleriaModule, InputTextModule, PanelModule, ButtonModule, DropdownModule, DialogModule, AccordionModule, 
            CalendarModule, SelectButtonModule, CheckboxModule, ProgressBarModule, DataTableModule, DataListModule, ConfirmDialogModule],
  declarations: [ ErrorMessagesComponent, FoodDashboardComponent, KgNumberSpinnerComponent, KgDateSpinnerComponent, KgFoodSearchComponent ],
  exports: [ CommonModule, ReactiveFormsModule, HttpModule, RouterModule, 
            MenubarModule, GalleriaModule, InputTextModule, PanelModule, ButtonModule, DropdownModule, DialogModule, AccordionModule, CalendarModule,
            SelectButtonModule, CheckboxModule, DataTableModule, DataListModule, ProgressBarModule, ErrorMessagesComponent, FoodDashboardComponent,
            KgNumberSpinnerComponent, KgDateSpinnerComponent, ConfirmDialogModule, TooltipModule, KgFoodSearchComponent ]

})

This works just fine. I think you are trying to import the DataTableModule in the wrong spot.

I think you need to declare the DataTableModule import in the component.module like this (substitute DataTableModule for SharedModule):

import {SharedModule} from '../shared/shared.module' 


@NgModule({
    imports: [ SharedModule, routing ],
    declarations: [ SettingsComponent, SettingsPhysicalComponent ],
    bootstrap: [ SettingsComponent ],
    providers:[ SettingsPhysicalService ]
})

export class SettingsModule {
    constructor() {

    }

It's difficult to tell without seeing all your source files. I'll take a hunch in guessing you are not importing the modules correctly. This is more an Angular 2 issue, although PrimeNG's docs on component pages makes it a tad vague what to do.

Here is how you initialize your NgModule, by importing PrimeNG components as Angular 2 modules.

import { DataTableModule, SharedModule } from 'primeng/primeng';

@NgModule({
    imports: [ 
        DataTableModule,
        SharedModule,
        // any other modules like BrowserModule or FormsModule, etc
    ],
    // other declarations, providers, etc...
});

With that setup in place you can use p-dataTable in any component you write. The error you received is an indirect way of telling you that your app does not know what a p-dataTable component is. It has not been imported.

I had the same problem before with the table component and other ones. The problem is that the js files which exist in the primeng folder inside node_modules is a little bit different of what exist in the github project of primeng.

Are in fault some parts of code, because of this you saw that error. If you compare the ts of dataTable and the js file you have in your node_moduls folder you will see that some behaviours are missing.

I recreated them by hand in js file based on ts file present in github, and voilá that works properly.

Try yourself and giveme your feedback.