Примените primeng, используя пользовательский модуль

Question

• Я создал отдельный пользовательский модуль для добавления https://www.primefaces.org/primeng/#/card.

• Пользовательский модуль содержит только модули, относящиеся к прайменгу.

• Не работает с использованием пользовательского модуля

• Я получаю сообщение об ошибке, показанное ниже.

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

Если вы хотите использовать пользовательский модуль для простого компонента ng, вы должны сделать 3 шага:

1 - создайте один пользовательский модуль и импортируйте основной модуль ng внутри этого модуля. тогда вы должны поместить имя модуля в массив импорта в @ NgModule.

2 - в @NgModule есть еще один элемент, имя которого - export. это другой массив. Вы должны поместить имя модуля в массив экспорта.

3 - вы должны добавить пользовательский модуль в app.module в приложении.

вот пример для вас:

в 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 { }

тогда вам нужно зарегистрировать этот модуль в app.module

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

и добавьте этот модуль в массив импорта в app.module

   imports: [
     PrimengModule 
   ]

Answer 2

В настоящее время ваш primeng.custom.module.ts ничего не экспортирует для app.module.ts для импорта.

Чтобы решить эту проблему, вам также необходимо добавить каждый из модулей PrimeNG в массив exports вашегопользовательский модуль.Это сделает их доступными для импорта в модуль приложения.

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: [
    CommonModule,
    DataTableModule,
    TriStateCheckboxModule,
    CheckboxModule,
    ListboxModule,
    ReactiveFormsModule,
    FormsModule,
    EditorModule,
    CardModule
  ]
})
export class PrimecustomModule { }