Angular Material 21版本mat-label动画失效问题求助

问题情况 #

• 使用Angular 21搭配Angular Material 21版本
• 编写的mat-form-field代码中，mat-label的动画表现与官方文档示例不一致：

<mat-form-field appearance="outline">
  <mat-label>Outline form field</mat-label>
  <input matInput placeholder="Placeholder">
  <mat-icon matSuffix>sentiment_very_satisfied</mat-icon>
  <mat-hint>Hint</mat-hint>
</mat-form-field>

• 检查DOM发现<mat-form-field>组件缺少mat-form-field-animations-enabled类名
• 当前app.config.ts配置如下：

import { ApplicationConfig } from '@angular/core';
import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
import { ANIMATION_MODULE_TYPE } from '@angular/platform-browser/animations';
import { provideRouter } from '@angular/router';
import { routes } from './app.routes';

export const appConfig: ApplicationConfig = {
  providers: [
    provideAnimationsAsync(),
    provideRouter(routes),
    { provide: ANIMATION_MODULE_TYPE, useValue: 'BrowserAnimations' },
  ]
};

解决步骤 #

1. 移除冲突的动画配置 #

同时使用provideAnimationsAsync()和ANIMATION_MODULE_TYPE会导致动画初始化逻辑冲突。provideAnimationsAsync()已经内置了动画模块的必要配置，无需额外声明ANIMATION_MODULE_TYPE。修改后的app.config.ts：

import { ApplicationConfig } from '@angular/core';
import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
import { provideRouter } from '@angular/router';
import { routes } from './app.routes';

export const appConfig: ApplicationConfig = {
  providers: [
    provideAnimationsAsync(),
    provideRouter(routes)
  ]
};

2. 确认Material模块导入正确 #

确保在独立组件或NgModule中正确导入所需的Material模块：

// 独立组件示例
import { Component } from '@angular/core';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input';
import { MatIconModule } from '@angular/material/icon';

@Component({
  selector: 'app-your-component',
  standalone: true,
  imports: [MatFormFieldModule, MatInputModule, MatIconModule],
  template: `<!-- 你的mat-form-field代码 -->`
})
export class YourComponent {}

3. 验证动画类是否自动添加 #

修改配置并重启应用后，检查<mat-form-field>元素是否自动添加了mat-form-field-animations-enabled类。该类由Angular Material内部逻辑自动注入，无需手动添加。

4. 清除缓存并重启应用 #

执行以下操作确保配置变更生效：

• 强制刷新浏览器（Ctrl+Shift+R）
• 停止开发服务器，运行ng serve --clearCache重新启动

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