Apply primeng using custom module

Question

• I have created separate custom module for primeng https://www.primefaces.org/primeng/#/card .

• Custom module only contain modules related to primeng.

• It is not working using custom module

• I am getting an error shown below.

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { FirstComponent } from './first/first.component';
import { ReactiveFormsModule, FormsModule } from '@angular/forms';
import { PrimecustomModule } from './primeng.custom.module';


@NgModule({
  declarations: [
    AppComponent,
    FirstComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    ReactiveFormsModule,
    FormsModule,
    PrimecustomModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

**customModule**


 import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ReactiveFormsModule, FormsModule } from '@angular/forms';
import {DataTableModule} from 'primeng/datatable';
import {TriStateCheckboxModule} from 'primeng/tristatecheckbox';
import {CheckboxModule} from 'primeng/checkbox';
import {ListboxModule} from 'primeng/listbox';
import {EditorModule} from 'primeng/editor';
import {CardModule} from 'primeng/card';
@NgModule({
  declarations: [],
  imports: [
    CommonModule,
    DataTableModule,
    TriStateCheckboxModule,
    CheckboxModule,
    ListboxModule,
    ReactiveFormsModule,
    FormsModule,
    EditorModule,
    CardModule
  ],
  exports: []
})
export class PrimecustomModule { }

Answer 1

if you want to use custom module for prime ng component, you should do 3 steps:

1- create one custom module and import the prime ng module inside that module. then you should put the name of the module in imports array in @NgModule.

2-there is another item in @NgModule that name is exports. this is the another array. you should put the name of module in the exports array.

3- you should add the custom module inside the app.module in the application.

here is an example for you :

in primeng.module.ts

 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import {ConfirmDialogModule} from 'primeng/confirmdialog';
 import {ButtonModule} from 'primeng/button';
 import {DialogModule} from 'primeng/dialog';
 import {MessageModule} from 'primeng/message';
 import {SidebarModule} from 'primeng/sidebar';
 import {TableModule} from 'primeng/table';
 import {FileUploadModule} from 'primeng/fileupload';
 import {ToastModule} from 'primeng/toast';
 import { MessageService } from 'primeng/components/common/messageservice';

 @NgModule({
  declarations: [],
  imports: [
    CommonModule,
     ConfirmDialogModule,
    ButtonModule,
   DialogModule,
   MessageModule,
   SidebarModule,
   TableModule,
   FileUploadModule,
   ToastModule
    ],
   exports:[ToastModule,FileUploadModule
   ,ConfirmDialogModule,ButtonModule,DialogModule
   ,MessageModule,SidebarModule,TableModule],

   providers:[MessageService]
  })
  export class PrimengModule { }

then you should register this module in app.module

  import { PrimengModule } from './primeng/primeng.module';

and add this module inside imports array in app.module

   imports: [
     PrimengModule 
   ]