我们遇到了 Spartacus、Angular 和 Storybook 组合的问题。
对于那些不熟悉的人:Storybook 是一个 UI 开发环境,它能够以独立的方式展示 UI 组件,并带有一些游乐场功能(更多信息在这里:https ://storybook.js.org/docs/basics/introduction/ )。我们希望能够在 Storybook 中展示从 Spartacus 库导入的一些 UI 组件,以便能够与我们的视觉设计器就我们将使用的 UI 元素创建一致的叙述。
Storybook 具有 Angular 支持,对于简单的组件,配置 Storybook 以查看定义的组件(定制的或来自库的)就足够了,它将在 Storybook 环境中显示它。对于更复杂的 Angular 组件,还可以通过模块元数据提供“模拟”上下文,该元数据可以包含导入和声明等内容,就像常规 Angular 模块一样(更多信息:https ://www.learnstorybook.com/intro -to-storybook/angular/en/composite-component/)。
在 Storybook 中简单地指向 Spartacus 中的组件时,如果没有任何其他数据,则会出现很多关于缺少声明的错误。此屏幕截图中的示例:
显示缺少“cxTranslate”和“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 控制台显示 ERROR NullInjectorError: StaticInjectorError(DynamicModule)[store]
我可以找到有关在线信息的许多导致此错误的一般 Angular 问题似乎是导入/声明丢失或使用不当的问题。但是,我还没有找到使 Spartacus 组件在 Storybook 中工作的配置。
任何人都可以帮助阐明这个问题吗?