Angular 12项目中Material Design组件无法正常显示问题求助

存在的问题 #

• 导入的Angular Material单元错误：@angular/material/button 导出的是模块类 MatButtonModule，你错误导入了组件类 MatButton，无法在根模块完成按钮指令的全局注册；同时你使用了 <mat-card> 组件，但未导入对应的 MatCardModule 模块。
• 模板代码放置位置错误：Angular的组件、指令仅在Angular框架管理的模板范围内生效，你将测试代码写在全局入口文件 index.html 中，该区域不属于Angular编译范围，mat-fab、mat-card 等指令无法被识别。
• 可选异常场景：如果ng add执行时未自动注入主题配置，也会导致组件样式缺失。

解决步骤 #

1. 修正app.module.ts的模块导入配置，代码如下：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
// 导入正确的Material模块
import { MatButtonModule } from '@angular/material/button';
import { MatCardModule } from '@angular/material/card';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MatButtonModule,
    MatCardModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

2. 调整测试代码位置
   删除你在index.html中新增的测试代码，仅保留默认的<app-root></app-root>入口节点，将测试代码迁移到app.component.html文件中：

<h1>testing angular material</h1>
<p>testing angular material!!!</p>
<button mat-fab>test button</button>
<mat-card>Simple card</mat-card>

3. 验证主题配置
   打开项目根目录的angular.json文件，检查projects -> test-anugular-mat -> architect -> build -> options -> styles数组中是否包含Material预构建主题配置，没有则手动添加：

"styles": [
  "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
  "src/styles.scss"
]

配置完成后重启ng serve即可看到正常的Material组件样式。

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