Rendering Angular standalone Angular Material select components with Storybook?

Question

Trying to render a custom standalone Angular Material select component with Storybook.

It produces the error:

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)

And this is something that happens because the component is standalone, and so the BrowserAnimationsModule should be included using the standalone API like this:

bootstrapApplication(AppComponent, {
  providers: [provideRouter(routes), provideAnimations(), provideHttpClient()],
});

However Storybook is bootstrapping the application, so how would be go about calling provideAnimations()?

Answer 1

See decorators and applicationConfig below as an example of where to add providers:

import { Meta, applicationConfig } from '@storybook/angular';
import { ProjectsTableComponent } from './projects-table.component';
import { provideAnimations } from '@angular/platform-browser/animations';

export default {
  title: 'Presentational/Admin/Projects Table',
  component: ProjectsTableComponent,
  decorators: [
    applicationConfig({
      providers: [provideAnimations()],
    }),
  ],
} as Meta<ProjectsTableComponent>;

export const WithData = {
  render: (args: ProjectsTableComponent) => ({
    props: args,
  }),
  args: {
    projects: getProjectsData(),
  },
};