У нас возникла проблема с комбинацией Spartacus, Angular и Storybook.
Для тех, кто незнаком: Storybook - это среда разработки пользовательского интерфейса, которая может выделять компоненты пользовательского интерфейса изолированным способом. с некоторыми функциями игровой площадки (подробнее здесь: https://storybook.js.org/docs/basics/introduction/). Мы хотим продемонстрировать некоторые компоненты пользовательского интерфейса, импортированные из библиотеки Spartacus в Storybook, чтобы иметь возможность создавать согласованное повествование с нашим Visual Designer об элементах пользовательского интерфейса, с которыми мы будем работать.
Storybook имеет * Поддержка 1036 *, а для простых компонентов достаточно настроить Storybook для просмотра определенного компонента (либо на заказ, либо из библиотеки), и он будет отображаться в среде Storybook. Для более сложных Angular компонентов также возможно предоставить «фиктивный» контекст через метаданные модуля, которые могут содержать такие вещи, как импорт и объявления, как обычный модуль Angular (подробнее здесь: https://www.learnstorybook.com/intro-to-storybook/angular/en/composite-component/).
Когда вы просто указываете на компонент из Spartacus в Storybook, без каких-либо дополнительных данных может появиться много ошибок о пропущенных объявлениях. Пример на этом снимке экрана:
Ошибки сборника рассказов, показывающие отсутствующие объявления 'cxTranslate' и 'cx-icon'
При импорте модулей, содержащих отсутствующие объявления, через метаданные модуля a кажется, что многие из этих проблем решены. Однако наша настоящая проблема заключается в каналах (например, канал '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 отображается ОШИБКА NullInjectorError: StaticInjectorError (DynamicModule) [store]
Многие из общих проблем Angular, приводящих к этой ошибке, я могу найти информацию об онлайн, которая кажется мне проблемой импорт / декларации отсутствуют или используются ненадлежащим образом. Однако мне не удалось найти конфигурацию для работы компонента Spartacus в Storybook.
Может ли кто-нибудь помочь пролить свет на эту проблему?