Question

我们遇到了Spartacus，Angular和Storybook组合的问题。

对于那些不熟悉的人：Storybook是一个UI开发环境，它能够通过一些游乐场功能以隔离的方式展示UI组件（更多信息，请访问https://storybook.js.org/docs/basics/introduction/）。我们希望能够展示从Storybook的Spartacus库中导入的一些UI组件，以便能够与Visual Designer创建有关将要使用的UI元素的一致叙述。

Storybook具有Angular支持，对于简单的组件，只需将Storybook配置为查看已定义的组件（定制组件或来自库的组件）就足够了，它将在Storybook环境中进行显示。对于更复杂的Angular组件，还可以通过模块元数据提供“模拟”上下文，其中可以包含诸如导入和声明之类的内容，就像常规的Angular模块一样（更多信息，请点击此处：https://www.learnstorybook.com/intro-to-storybook/angular/en/composite-component/）。

在Storybook中仅指向Spartacus中的组件时，如果没有任何其他数据，则会出现许多有关缺少声明的错误。此屏幕快照中的示例：

Storybook errors showing missing declarations of 'cxTranslate' and 'cx-icon'

通过通过模块元数据导入包含缺少的声明的模块，似乎可以解决许多这些问题。但是，我们真正的问题来自管道（例如屏幕快照中提到的“ cxTranslate”管道）。由于Spartacus在几乎所有组件模板中都使用了诸如cx-translate / TranslatePipe之类的管道，因此必须导入它们才能使组件正常工作。但是，如下文所示，将这些管道添加到Storybook的模块元数据声明中并不能完全解决问题。

searchbox.stories.ts：


import { IconModule, HighlightPipe, MediaModule, SearchBoxComponentService } from '@spartacus/storefront';
import { RouterModule } from '@angular/router';
import { UrlPipe, TranslatePipe } from '@spartacus/core';
import { CustomSearchboxComponent } from 'src/app/general/custom-searchbox/custom-searchbox.component';

export default {
  title: 'Searchbox',
  decorators: [
    moduleMetadata({
      imports: [IconModule, RouterModule, MediaModule],
      declarations: [TranslatePipe, HighlightPipe, UrlPipe],
      providers: [SearchBoxComponentService]
    }),
  ]
};

export const Default = () => ({
  component: CustomSearchboxComponent
});

此组件的Storybook页面将不再抱怨管道名称不存在，但将在Storybook环境中显示空白组件，并在DevTools控制台中导致错误（请参见下文）。

DevTools console showing ERROR NullInjectorError: StaticInjectorError(DynamicModule)[store]

许多导致此错误的一般Angular问题，我可以找到有关在线的信息，这似乎是导入/声明丢失或使用不当的问题。但是，我无法在Storybook中找到使Spartacus组件正常工作的配置。

有人可以帮助阐明这个问题吗？

Answer 1

我不确定，因为我没有将Storybook与Spartacus组件一起使用的经验。

也就是说，这个错误看起来很熟悉。在我看来，这似乎是与ngrx存储相关的错误。由于您提供了实际的SearchBoxComponentService，它依赖于NgRx存储的外观，因此我认为可能是原因。

要解决此问题，您可以为SearchBoxComponentService提供一个模拟，例如：

{ provide: SearchBoxComponentService, useClass: MockSearchBoxComponentService }

模拟只是一个没有逻辑的假人。

或者，您可以尝试创建一个空的Ngrx存储https://github.com/storybookjs/storybook/issues/3217。

希望这会有所帮助！

在故事书中显示Spartacus组件的问题

1 个答案: