如何在Storybook中渲染独立式Angular Material选择组件？

问题背景 #

在Storybook中渲染自定义独立式Angular Material选择组件时，触发如下错误：

ERROR Error: Unexpected synthetic property @transitionMessages found. Please make sure that:
  - Either `BrowserAnimationsModule` or `NoopAnimationsModule` are imported in your application.
  - There is corresponding configuration for the animation named `@transitionMessages` defined in the `animations` field of the `@Component` decorator (see https://angular.io/api/core/Component#animations).
    at checkNoSyntheticProp (platform-browser.mjs:659:1)
    at NoneEncapsulationDomRenderer.setProperty (platform-browser.mjs:642:1)
    at elementPropertyInternal (core.mjs:10801:1)
    at Module.ɵɵproperty (core.mjs:13521:1)
    at MatFormField_div_17_Template (form-field.mjs:26:1)
    at executeTemplate (core.mjs:10441:1)
    at refreshView (core.mjs:10326:1)
    at refreshEmbeddedViews (core.mjs:11339:1)
    at refreshView (core.mjs:10350:1)
    at refreshComponent (core.mjs:11385:1)

独立式组件需要通过provideAnimations()提供动画支持，但因应用由Storybook引导，无法直接在bootstrapApplication中配置。

解决方法 #

• 方法1：单个Story局部配置
  在组件的Story文件中，直接在meta的providers数组里注入动画支持：

import { Meta, StoryObj } from '@storybook/angular';
import { provideAnimations } from '@angular/platform-browser/animations';
import { YourCustomSelectComponent } from './your-custom-select.component';

const meta: Meta<YourCustomSelectComponent> = {
  component: YourCustomSelectComponent,
  title: 'Components/YourCustomSelect',
  providers: [provideAnimations()],
};

export default meta;
type Story = StoryObj<YourCustomSelectComponent>;

export const Primary: Story = {
  args: {
    // 组件参数配置
  },
};

• 方法2：全局统一配置
  如果多个组件都需要动画支持，可在.storybook/preview.ts中全局注入：

// .storybook/preview.ts
import { applicationConfig } from '@storybook/angular';
import { provideAnimations } from '@angular/platform-browser/animations';

export const preview = {
  parameters: {
    // 其他Storybook参数
  },
  decorators: [
    applicationConfig({
      providers: [provideAnimations()],
    }),
  ],
};

• 方法3：禁用动画消除错误
  若不需要实际动画效果，仅需消除错误，可使用provideNoopAnimations()替代provideAnimations()，配置方式与上述两种方法一致：

import { provideNoopAnimations } from '@angular/platform-browser/animations';

// 在Story meta或全局配置中替换为
providers: [provideNoopAnimations()]

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