Тема углового материала не применяется в дочернем модуле после создания модуля материала и его импорта в app.module

Question

Как предлагалось во многих других уроках, я решил очистить мой app.module от определенных модулей угловых материалов и создал отдельный модуль под названием 'module module' - затем я импортировал этот модуль непосредственно в модуль app.module.import массив.

Теперь, если у меня есть кнопка материала в app.component.html, все в порядке и тема применяется.

Однако у меня есть модуль аутентификации, который отображается через илюбая угловая тема не применяется в этом модуле, все они являются базовыми элементами html.

Я уверен, что упускаю что-то действительно очевидное в том, как модули должны работать в угловом режиме, но после прочтениятемы и некоторые форумы через поиск в Google + документацию, я не могу понять, что мне не хватает.

Answer 1

Проблема здесь не в теме, а в AuthModule, не зная, как разрешить материальные компоненты.

В Angular модуль действует как контекст компиляции, если вы не импортируете MaterialModule в AuthModule, тогда компоненты материала находятся вне контекста и angular ничего о них не знает.

Импорт вашей MaterialModule в AuthModule решит эту проблему, например:

material.module.ts:

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

auth.module.ts

@NgModule({
  imports: [CommonModule, MaterialModule],
  providers: ...,
})
export class MaterialModule {}

Обратите внимание, что

• MaterialModule экспорт MatButtonModule
• AuthModule импорт MaterialModule Следовательно, AuthModule имеет доступ к компонентам, определенным в MatButtonModule

Для получения дополнительной информации см. Угловые документы https://angular.io/guide/sharing-ngmodules

Answer 2

1. Вы можете проверить следующие строки в файле angular.json:

   "styles": [
             {
               "input": "node_modules/@angular/material/prebuilt-themes/indigo-pink.css"
             },
   

2. Вы можете выполнить в папке вашего проекта для автоматического обновления вашего Angular проекта справильные зависимости.

   ng add @angular/material