如何在无AppModule的Angular 17中引入Angular Material？

Angular 17默认启用**独立组件（Standalone Components）**模式，不再生成传统的app.module.ts文件，你可以通过以下两种方式引入Angular Material组件：

1. 组件级按需引入（推荐） #

直接在需要使用Material组件的独立组件中，将对应的Material模块添加到@Component装饰器的imports数组里。同时必须配置动画支持，否则Material组件无法正常工作。

示例（以MatSlideToggle为例）： #

// app.component.ts
import { Component } from '@angular/core';
import { MatSlideToggleModule } from '@angular/material/slide-toggle';
import { provideAnimations } from '@angular/platform-browser/animations';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [MatSlideToggleModule],
  providers: [provideAnimations()], // 注入动画支持
  template: `
    <mat-slide-toggle>切换开关</mat-slide-toggle>
  `,
  styleUrls: ['./app.component.css']
})
export class AppComponent {}

2. 全局统一引入 #

如果某个Material组件需要在全应用多个组件中使用，可以在main.ts的应用启动配置里全局引入模块和动画支持：

示例： #

// main.ts
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app/app.component';
import { provideAnimations } from '@angular/platform-browser/animations';
import { MatSlideToggleModule } from '@angular/material/slide-toggle';

bootstrapApplication(AppComponent, {
  imports: [MatSlideToggleModule], // 全局引入该Material模块
  providers: [provideAnimations()] // 全局提供动画支持
});

关键提示： #

• 动画支持是Angular Material的硬性要求，你可以选择在组件内注入provideAnimations()，或者全局配置，二选一即可。
• 优先使用组件级按需引入，能有效控制应用包体积，避免不必要的代码冗余。

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