Css not getting applied to Prime Ng Data table

Question

I am building a angular2 prime ng app with angular cli.When I am trying to use primeNg datable ,Css is not getting applied to it properly. I have included the necessary dependencies in my app.module,

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

@NgModule({
  imports: [
 BrowserModule,HttpModule,FormsModule,DataTableModule,SharedModule
  ],
  declarations: [
  ListingComponent
  ],
  exports:[
  ListingComponent
  ],
  providers: [
    NewHireListingService
  ]
})
export class ListingModule {}

I have also included prime ng styles in angular-cli.json as,

"styles": [
    "styles.css",
    "../node_modules/font-awesome/css/font-awesome.css",
    "../node_modules/primeng/resources/themes/omega/theme.css" , // or whatever theme you prefer
    "../node_modules/primeng/resources/primeng.css"
],

And my code for datatable is as,

<p-dataTable [value]="List">
    <p-column field="firstName" header="FirstName"></p-column>
    <p-column field="lastName" header="LastName"></p-column>
    <p-column field="employee_type" header="EmployeeType"></p-column>
    <p-column field="hire_type" header="HireType"></p-column>
    <p-column field="location" header="Location"></p-column>
    <p-column field="hireDate" header="HireDate"></p-column>
</p-dataTable>

But css is getting partially applied,Can anyone tell what I am missing. Thanks in advance.

Css getting partially applied

Answer 1

package.json

"primeng": "^4.1.3"

.angular-cli.json

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

module.ts

import { DataTableModule } from 'primeng/primeng';

imports: [ DataTableModule ]

Answer 2

Delete and reinstall your node-modules file and please check that the Angular, Primeng and node.js versions are compatible.