使用 Storybook 渲染 Angular 独立 Angular Material 选择组件？

Question

尝试使用 Storybook 渲染自定义独立 Angular Material 选择组件。

\n

它产生错误：

\n

ERROR Error: Unexpected synthetic property @transitionMessages found. Please make sure that:\n  - Either `BrowserAnimationsModule` or `NoopAnimationsModule` are imported in your application.\n  - 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).\n    at checkNoSyntheticProp (platform-browser.mjs:659:1)\n    at NoneEncapsulationDomRenderer.setProperty (platform-browser.mjs:642:1)\n    at elementPropertyInternal (core.mjs:10801:1)\n    at Module.\xc9\xb5\xc9\xb5property (core.mjs:13521:1)\n    at MatFormField_div_17_Template (form-field.mjs:26:1)\n    at executeTemplate (core.mjs:10441:1)\n    at refreshView (core.mjs:10326:1)\n    at refreshEmbeddedViews (core.mjs:11339:1)\n    at refreshView (core.mjs:10350:1)\n    at refreshComponent (core.mjs:11385:1)\n

\n

发生这种情况是因为该组件是独立的，因此应该BrowserAnimationsModule使用独立 API 来包含该组件，如下所示：

\n

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

\n

然而 Storybook 正在引导应用程序，那么如何调用呢provideAnimations()？

\n

Answer 1

请参阅decorators下面applicationConfig的示例，了解在何处添加提供程序：

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(),
  },
};