2024年10月15日，备受瞩目的 Angular 22 正式发布。作为 Google 推出的前端框架，Angular 一直在为企业级应用提供坚实的技术底座。本次大版本更新不仅带来了性能优化和新的开发工具，还进一步强化了与 Angular Material 的集成。对于广大开发者来说，如何在 Angular 22 项目中快速导入并使用 Angular Material，成为当务之急。本文将为您带来完整指南与深度解析。

为什么选择 Angular 22 + Material？

Angular Material 是 Google 官方推出的 UI 组件库，遵循 Material Design 设计规范，提供按钮、表单、对话框、数据表格等 40 余种常用组件。在 Angular 22 版本中，Material 组件针对新的 Ivy 编译器进行了深度优化，打包体积缩小约 15%，且支持流式渲染（Streaming Rendering）和独立组件（Standalone）的全面兼容。这意味着您无需依赖 NgModule 即可直接使用 Material 组件，代码更加简洁高效。

前置条件：确认环境

在开始之前，请确保您的开发环境满足以下要求： - Node.js 18.x 或更高版本（推荐 20 LTS） - Angular CLI 22.0+（可通过 npm install -g @angular/cli 更新） - 一个已创建的 Angular 22 项目（ng new my-app）

如果您尚未升级，可以使用 ng update @angular/core@22 @angular/cli@22 进行迁移。请注意，从 Angular 18 之前的版本直接升级可能涉及破坏性变更，建议先在分支上测试。

步骤一：安装 Angular Material 及相关依赖

在项目根目录下，通过 Angular CLI 的添加命令是最便捷的方式：

ng add @angular/material

这个命令会自动执行以下操作： 1. 安装 @angular/material、@angular/cdk 和 @angular/animations 包。 2. 自动配置 provideAnimationsAsync()（Angular 22 中推荐使用异步动画支持，减少首次加载时间）。 3. 提示您选择预构建的主题样式：深紫色/琥珀色、靛蓝/粉色、或自定义主题。 4. 询问是否设置全局的 Material 排版（Typography）和图标字体（Material Icons 或 Material Symbols）。

注意：Angular 22 废弃了旧的 BrowserAnimationsModule，建议使用新的 provideAnimations() 或 provideAnimationsAsync() 在应用配置中进行注入。ng add 会自动处理这一逻辑。

步骤二：在独立组件中导入 Material 模块（可选）

如果您采用传统的 NgModule 架构，可以在 app.module.ts 中导入所需模块：

import { MatButtonModule } from '@angular/material/button';
import { MatInputModule } from '@angular/material/input';

@NgModule({
  imports: [
    MatButtonModule,
    MatInputModule,
    // ...
  ],
})
export class AppModule {}

但 Angular 22 更加推荐独立组件模式。您只需在组件中直接导入：

import { Component } from '@angular/core';
import { MatButtonModule } from '@angular/material/button';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [MatButtonModule],
  template: `<button mat-raised-button color="primary">Click me</button>`,
})
export class AppComponent {}

这种方式无需 NgModule 包装，代码更加直观，且 Tree-shaking 更彻底。Angular 22 的 CLI 在生成新组件时默认使用 standalone: true，无缝衔接 Material。

步骤三：使用主题与图标

ng add 完成后，会在 styles.css 中自动包含一个全局主题：

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

如果您需要自定义主题，可以手动创建 theme.scss 并使用 @use '@angular/material' as mat; 语法。Angular 22 的 Material 主题系统支持 CSS 自定义属性（CSS Variables），这让运行时切换主题更轻松。

对于图标，您可以在 index.html 中添加：

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

或者使用最新的 Material Symbols（可变字体），体积更小。然后便可在模板中使用 <mat-icon>home</mat-icon>。

步骤四：验证安装

运行 ng serve，打开浏览器。在 app.component.html 中添加一个简单的按钮测试：

<button mat-raised-button color="accent">Hello Angular 22!</button>

如果页面渲染出符合 Material Design 的按钮，说明导入成功。您还可以尝试 MatInput、MatCard 等组件，它们已按需加载，不会拖慢初始加载速度。

新特性速览：Angular 22 与 Material 的化学反应

  • 流式渲染支持：Material 组件现在支持服务器端流式渲染（SSR Streaming），对于大型页面，用户能更快看到可交互的部分。
  • Zoneless 模式实验性支持：Angular 22 引入了实验性的 Zone-free 变更检测，Material 组件已适配该模式，可减少不必要的变更检测开销。
  • 更便捷的组件校验：MatFormField 现在原生支持 Angular 22 新增的 formControl 强类型推断，减少模板错误。
  • Icon 组件升级：MatIcon 支持 SVG 图标的内联加载，无需额外字体请求。

常见问题与注意事项

  1. 版本兼容性：务必使用 @angular/material@22 版本，若错误安装旧版可能导致类型错误或动画异常。
  2. 动画性能：如果在服务端渲染中使用，需确保 provideAnimationsAsync 配置正确，否则客户端水合时可能出现闪烁。
  3. 自定义主题：使用 CSS 变量自定义主题时，注意浏览器兼容性（Angular 22 已放弃对 IE11 的支持，无需担心）。
  4. Tree-shaking：尽量按需导入单个模块，而非整个 @angular/material，以减小包体积。独立组件会自动实现这一点。

结语

Angular 22 与 Angular Material 的结合，为开发者提供了一套高度现代化、性能优异且类型安全的 UI 开发方案。通过本文的四个步骤，您可以快速在项目中搭建起精美的 Material 界面。未来，随着 Angular 生态的持续进化，Material 组件库也将进一步拥抱 Web 标准，值得每一位前端工程师关注。现在就升级您的项目，体验 Angular 22 带来的流畅与高效吧！