"p-menu" не является известным элементом

Question

Структура моего приложения выглядит следующим образом:

Модуль панелей мониторинга

-> компонент суперадмин-панели

Модуль макета

-> Компонент верхнего заголовка

Я пытаюсь использовать верхний заголовок при импорте компонента верхнего заголовка компонента superadmin-dashboard из меню PrimeNG

Проблема: когда я пытаюсь вызвать компонент верхнего заголовка в компоненте superadmin-dashboard, используя селектор, я получаю предупреждение, что p-menu не является известным элементом и меню не работает.

Layout Module

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { TopHeaderComponent } from './top-header/top-header.component';
import { LoginComponent } from './login/login.component';
import { FormsModule } from '@angular/forms';
import { SecondHeaderComponent } from './second-header/second-header.component';



@NgModule({
  declarations: [
    TopHeaderComponent,
    LoginComponent,
    SecondHeaderComponent],
  imports: [
    CommonModule,
    FormsModule
  ],
  exports: [
    TopHeaderComponent,
    LoginComponent,
    SecondHeaderComponent,
    FormsModule,
    CommonModule
  ]
})
export class LayoutModule { }

dashboards module

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { SuperadminDashboardComponent } from './superadmin-dashboard/superadmin-dashboard.component';
import { CustomerDashboardComponent } from './customer-dashboard/customer-dashboard.component';
import { CardModule } from 'primeng/card';
import { LayoutModule } from '../layout/layout.module';




@NgModule({
  declarations: [SuperadminDashboardComponent, CustomerDashboardComponent],
  imports: [
    CommonModule,
    CardModule,
    LayoutModule

  ],
  exports: [
    SuperadminDashboardComponent,
    CustomerDashboardComponent,
  ]
})
export class DashboardsModule { }

Answer 1

Вы должны импортировать MenuModule в модуль макета, чтобы использовать p-menu. внутри любого объявленного компонента Layout Module.

Layout Module

    import { NgModule } from '@angular/core';
    import { CommonModule } from '@angular/common';
    import { TopHeaderComponent } from './top-header/top-header.component';
    import { LoginComponent } from './login/login.component';
    import { FormsModule } from '@angular/forms';
    import { SecondHeaderComponent } from './second-header/second-header.component';
    import { MenuModule } from 'primeng/menu'; // add this import


    @NgModule({
      declarations: [
        TopHeaderComponent,
        LoginComponent,
        SecondHeaderComponent],
      imports: [
        CommonModule,
        FormsModule,
        MenuModule // use it here
      ],
      exports: [
        TopHeaderComponent,
        LoginComponent,
        SecondHeaderComponent,
        FormsModule,
        CommonModule
      ]
    })
    export class LayoutModule { }