0

I am just trying to implement PrimeNG library in my Angular 4 project. I can see PrimeNG in my dependecies and also in my nodemodules folder but when I just did a simple: 

        <p-dataTable >
           <p-column ></p-column>
           <p-column ></p-column>
           <p-column ></p-column>
           <p-column ></p-column>
       </p-dataTable>

Here's the error in my console's browser:

Unhandled Promise rejection: Template parse errors:
'p-column' is not a known element:
1. If 'p-column' is an Angular component, then verify that it is part of this module.
2. If 'p-column' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("

        <p-dataTable >
       [ERROR ->]<p-column ></p-column>
       <p-column ></p-column>
       <p-column ></p-column>
       "): ng:///AppModule/TableaudebordComponent.html@5:4

Here is my app.module.ts:

import { TableaudebordComponent } from './tableaudebord.component';
import { RouterModule, Routes } from '@angular/router'
import { ToggleComponent }  from './toggle.component';
import { HttpModule } from '@angular/http';
import { routeConfig } from './router-config';
import { AppComponent }  from './app.component';
import { UserService } from './user.service'; //  <-- #1 import  service

@NgModule({
 imports:      [ BrowserModule, HttpModule,     RouterModule.forRoot(routeConfig)
 ],
 declarations: [ AppComponent, DashboardComponent,          PageNotFoundComponent, NavbarComponent,PetitPaveInfraComponent,   PaveInfraComponent, PetitPaveAppliComponent, DashboardnextComponent, Dashboardnext2Component, Dashboardnext3Component,  PetitPaveProblemComponent, PaveProblemComponent, ToggleComponent,   TableaudebordComponent ],
providers: [ UserService ], 
bootstrap:    [ AppComponent ]
})
export class AppModule { }
Jonathan Leffler
  • 730,956
  • 141
  • 904
  • 1,278
Emile Cantero
  • 1,943
  • 3
  • 22
  • 47

1 Answers1

0

Make sure you import the modules needed for whatever PrimeNG compenent you want to use. In this instance you want to add DataTableModule & SharedModule to the imports array in your app.module.ts after importing the modules like from primeng:

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

imports: [..., DataTableModule, SharedModule]

Borquaye
  • 756
  • 3
  • 9
  • Yes I did it I import DataTableModule as following import {DataTableModule,SharedModule} from 'primeng/primeng'; – Emile Cantero May 22 '17 at 16:43
  • Where, in your `UserService`? – Hackerman May 22 '17 at 17:04
  • If you take the `HttpModule` in your `app.module.ts` as an example you see near the top you import the actual module: `import { HttpModule } from '@angular/http';` then you add the imported module to your applications module imports so that you can use it in your application: `@NgModule({ imports: [ BrowserModule, **HttpModule**, RouterModule.forRoot(routeConfig) ],` you need to do the same thing here. As @Hackerman is suggesting you have not imported these in your `app.module.ts` – Borquaye May 22 '17 at 19:48