Angular与Material样式未加载：自定义模块后按钮无Material样式

看起来你踩了几个Angular Material配置里的常见小坑，我帮你一步步排查修复：

1. 根模块未正确导入自定义Material模块 #

你在app.component.ts里导入MyOwnMaterialModule是无效的——组件文件里导入模块不会让Angular识别并加载它，必须在**根模块（AppModule）**的imports数组中添加这个自定义模块。

修改app.module.ts：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; // 也可以用NoopAnimationsModule
import { AppComponent } from './app.component';
import { MyOwnMaterialModule } from './myown-material.module'; // 导入自定义Material模块

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    BrowserAnimationsModule, // 动画模块必须在根模块配置
    MyOwnMaterialModule // 添加入自定义模块
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

2. 清理自定义Material模块的冗余代码 #

你的MyOwnMaterialModule里不需要BrowserModule和NoopAnimationsModule——这些是根模块该负责的配置，自定义Material模块只需要专注于导入/导出Material组件模块：

import { NgModule } from '@angular/core';
import { MatButtonModule } from '@angular/material/button'; // 注意：Angular Material 14+的组件导入路径已改为@angular/material/xxx

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

补充：如果是旧版本Angular Material，导入路径还是@angular/material，但新版本必须用细分后的路径，否则可能出现组件找不到或样式不生效的问题。

3. 确保引入Angular Material的主题样式 #

Angular Material依赖主题样式才能渲染出Material风格的组件，你需要在全局样式文件（比如src/styles.scss）中添加一行：

@import '@angular/material/prebuilt-themes/indigo-pink.css';

也可以直接在angular.json的styles数组里引入这个CSS文件，效果完全一致。

4. 验证动画模块的配置 #

如果你不需要动画效果，用NoopAnimationsModule代替BrowserAnimationsModule也可以，但必须确保它在根模块的imports数组里——缺少动画模块会导致部分Material组件的样式和交互异常。

做完这些修改后，重启Angular开发服务器，应该就能看到带有Material风格的按钮了！

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