Угловой материал с функциями модулей и угловой 6

Question

У меня проблемы с использованием материала Angular с Angular 6, когда я хочу использовать функциональные модули.Вот структура моего проекта:

app/
|- app.component.ts
|- app.component.html
|- app.module.ts
|- app-routing.module.ts
|- homepage/
  |- homepage.module.ts
  |- homepage-routing.module.ts
  |- pages/
    |- homepage.component.html
    |- homepage.component.ts
    |- homepage.component.css
|- inbox/
  |- inbox.module.ts
  |- inbox-routing.module.ts
  |- pages/
    |- inbox.component.html
    |- inbox.component.ts
    |- inbox.component.css

Загружены как входящие, так и домашняя страница.Я пытаюсь использовать Angular Material в homepage.component.html и inbox.component.html (я хочу использовать MatButtonModule), но мне это не удается, и официальная документация мне не помогает.

Вот что я пытался:

• Если я попытаюсь импортировать MatButtonModule в homepage.module.ts и inbox.module.ts, приложение вылетит с этой ошибкой Uncaught (in promise): TypeError: Cannot read property 'call' of undefined.
• Если я попытаюсь импортировать MatButtonModule втолько один модуль, он будет работать только для привязки компонента к этому модулю.
• Если я попытаюсь импортировать MatButtonModule напрямую в app.module.ts, он просто не будет работать вообще.

Итак, мой вопрос: как я могу использовать Angular Material с функциональными модулями, каковы лучшие практики?

Answer 1

Я предлагаю вам сделать еще один модуль и назвать его MaterialModule и поместить его в корень вашего приложения, а затем экспортировать все модули материалов, которые вы хотите использовать в своем приложении, т.е. MatButtonModule, как показано ниже

import { NgModule } from '@angular/core';
import { MatButtonModule } from '@angular/material';

@NgModule({
  imports: [],
  exports: [
    MatButtonModule,
  ],
  declarations: []
})
export class MaterialModule { }

И затем импортируйте MaterialModule в оба модуля (inbox.module.ts и homepage.module.ts)

Если это решение не будет работать, добавьте свой код в stackblitz так что я могу точно проверить, в чем проблема вашего кода.

Удачи

Answer 2

Вы можете создать общий модуль material.module.ts, который экспортирует все модули Angular Material.Затем импортируйте модуль материала в оба ваших модуля.Модуль может выглядеть так.

import { NgModule } from '@angular/core';
import { MatButtonModule } from '@angular/material';
@NgModule({
  imports: [ ],
  exports: [ MatButtonModule ]
})
export class MaterialModule {}