Angular 17无app.module.ts时如何使用Angular Material？

先完成Angular Material的基础安装 #

首先确保已经通过官方命令安装Material：

ng add @angular/material

安装过程中会自动配置主题、动画、Roboto字体这些基础项，不用手动修改全局配置文件。

两种导入Material组件的方式 #

1. 单个组件按需导入（推荐）

在需要使用Material组件的组件文件（比如app.component.ts）中，直接导入对应的Material模块，然后添加到组件的imports数组里：

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
// 按需导入你需要的Material组件模块
import { MatButtonModule } from '@angular/material/button';
import { MatCardModule } from '@angular/material/card';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [
    CommonModule,
    MatButtonModule, // 加入需要的Material模块
    MatCardModule
  ],
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'material-demo';
}

之后在组件的模板里就能直接用对应的Material组件，比如：

<mat-card>
  <mat-card-content>
    <button mat-button color="primary">点击我</button>
  </mat-card-content>
</mat-card>

2. 创建共享模块统一导入（适合多组件复用场景）

如果多个组件都需要用到相同的Material组件，可以创建一个共享的独立模块，把常用的Material模块集中导入并导出，再在各个组件里引用这个共享模块：

1. 创建共享模块文件material-shared.module.ts：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
// 导入常用的Material模块
import { MatButtonModule } from '@angular/material/button';
import { MatCardModule } from '@angular/material/card';
import { MatIconModule } from '@angular/material/icon';

@NgModule({
  imports: [CommonModule, MatButtonModule, MatCardModule, MatIconModule],
  exports: [MatButtonModule, MatCardModule, MatIconModule] // 导出供其他组件使用
})
export class MaterialSharedModule { }

2. 在需要的组件里导入这个共享模块：

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MaterialSharedModule } from './material-shared.module';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule, MaterialSharedModule],
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'material-demo';
}

为什么直接在main.ts里导入无效？ #

main.ts里的bootstrapApplication只是用来启动根组件，根组件本身是独立组件，所有组件级别的依赖（包括Material模块）都需要在组件的imports数组中声明，而不是直接在main.ts里导入。只有全局配置类的模块（比如BrowserAnimationsModule）才需要在bootstrapApplication的第二个参数里配置：

bootstrapApplication(AppComponent, {
  providers: [
    importProvidersFrom(BrowserAnimationsModule)
  ]
});

不过ng add @angular/material已经自动帮你配置了动画，所以这一步通常不需要手动操作。

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