嵌套模块中声明的组件未应用Material样式的问题排查

问题详情 #

两处使用完全相同HTML代码的按钮，根模块app.module.ts声明的app.component.html中的按钮能正常应用Material样式（绿色凸起按钮），但嵌套模块todos.module.ts声明的组件中的按钮却没有Material样式，仅显示浏览器原生默认按钮样式。

按钮HTML代码：

<button mat-raised-button color="primary">Add</button>

根模块app.module.ts代码：

import { MatButtonModule } from "@angular/material/button";
import { TodosModule } from "./todos/todos.module";

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    MatButtonModule,
    TodosModule,
  ],
})
export class AppModule {}

子模块todos.module.ts代码：

import { AddToDosComponent } from "./components/add-to-dos/add-to-dos.component";

@NgModule({
  declarations: [AddToDosComponent],
})
export class TodosModule {}

核心原因 #

Angular的模块是独立的封装单元，根模块中导入的模块不会自动传递给子模块。mat-raised-button这类Material组件指令由MatButtonModule提供，子模块如果没有显式导入该模块，就无法识别这些指令，自然不会加载对应的样式和功能。

解决方法 #

在子模块todos.module.ts中显式导入MatButtonModule，修改后的代码如下：

import { MatButtonModule } from "@angular/material/button";
import { AddToDosComponent } from "./components/add-to-dos/add-to-dos.component";

@NgModule({
  declarations: [AddToDosComponent],
  imports: [MatButtonModule]
})
export class TodosModule {}

优化方案（多模块场景） #

如果项目中有多个子模块需要使用Material组件，建议创建一个共享Material模块，统一导入并导出常用的Material模块，避免重复导入：

// material-shared.module.ts
import { NgModule } from '@angular/core';
import { MatButtonModule } from '@angular/material/button';
// 可按需添加其他常用Material模块
import { MatInputModule } from '@angular/material/input';

@NgModule({
  imports: [MatButtonModule, MatInputModule],
  exports: [MatButtonModule, MatInputModule]
})
export class MaterialSharedModule {}

之后在子模块中只需导入该共享模块即可：

import { MaterialSharedModule } from '../material-shared.module';
import { AddToDosComponent } from "./components/add-to-dos/add-to-dos.component";

@NgModule({
  declarations: [AddToDosComponent],
  imports: [MaterialSharedModule]
})
export class TodosModule {}

内容的提问来源于stack exchange，提问作者smilebomb