Общий компонент не работает при импорте в модуль отложенной загрузки

Question

Я пытаюсь загрузить один общий компонент внутри моего лениво загруженного модуля.модуль.Мой ленивый модуль импортирует SharedModule следующим образом:

// LazyModule

@NgModule({
    imports: [
      CommonModule,
      SharedModule,
      RouterModule.forChild(routes)
    ],
    declarations: [
      LazyParentComponent
    ]
})

Внутри моего SharedModule я импортирую компоненты углового материала, которые мне нужны дляMenuComponent, который я экспортирую как общий компонент:

// SharedModule

@NgModule({
  imports: [CommonModule],
  declarations: [MenuComponent],
  exports: [
    MatButtonModule,
    MatSelectModule,
    MatInputModule,
    MatOptionModule,
    MatToolbarModule,
    MenuComponent
  ]
})

Затем в моем LazyParentComponent я использую <app-menu></app-menu>, который должен визуализировать MenuComponent,который я включаю в sharedModule.

Но если я начну это, я всегда получаю много ошибок, таких как Can't bind to 'value' since it isn't a known property of 'mat-select'. или 'mat-toolbar' is not a known element.

Это, однако, работает, если я нене используйте <app-menu></app-menu>, но вместо этого используйте MatButtons непосредственно от MatButtonModule.

Answer 1

В импорт необходимо также включить все модули материалов:

Общий модуль

@NgModule({
  imports: [CommonModule,
    MatButtonModule,
    MatSelectModule,
    MatInputModule,
    MatOptionModule,
    MatToolbarModule
],
  declarations: [MenuComponent],
  exports: [
    MatButtonModule,
    MatSelectModule,
    MatInputModule,
    MatOptionModule,
    MatToolbarModule,
    MenuComponent
  ]
})