Storybook用于Angular不显示Kendo UI创建的元素

Question

我想在Angular项目中使用Storybook。Angular项目在整个组件模板中都使用了Kendo UI的Kendo网格元素。

问题是使用kendo元素的组件模板的任何部分在我运行它时都不会显示在Storybook界面中。如果我更改为标准html元素，数据将按预期显示。

我有什么设置不正确，阻止这些自定义元素在Storybook中显示?

任何帮助或想法将不胜感激，我很乐意为任何事情提供更多的背景。下面是一些代码示例:

@progress/kendo-angular-grid - ^5.4.0
@storybook/angular - ^6.3.4

.storybook/main.js文件

module.exports = {
"stories": [
"../src/**/*.story.mdx",
"../src/**/*.story.@(js|jsx|ts|tsx)"
],
"addons": [
"@storybook/addon-links",
"@storybook/addon-essentials",
],
"core": {
"builder": "webpack5"
}
}

组件故事

import { HttpClientModule } from '@angular/common/http';
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { RouterTestingModule } from '@angular/router/testing';
import { moduleMetadata } from '@storybook/angular';
import { Story, Meta } from '@storybook/angular/types-6-0';
import DocumentsComponent from './documents.component';
export default {
title: 'Components/Pages/Documents',
component: DocumentsComponent,
argTypes: {},
decorators: [
moduleMetadata({
imports: [HttpClientModule, RouterTestingModule],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
}),
],
} as Meta;
const Template: Story<DocumentsComponent> = (args: DocumentsComponent) => ({
props: args,
});
export const DocumentsList = Template.bind({});

组件模板文件

<div class="documents">
<button kendoButton (click)="addNew()" class="add-new" icon="plus" look="flat">Add New</button>
<h1>Documents</h1>

<!-- start block added to confirm data was available when rendering -->
<div *ngFor="let data of gridData">
<h2>{{data.id}}</h2>
</div>
<!-- end block added to confirm data was available when rendering -->

<kendo-grid
[data]="gridData"
[sort]="sort"
[sortable]="{ allowUnsort: true, mode: 'multiple' }"
(sortChange)="sortChange($event)"
>
<kendo-grid-column field="id" title="ID" [width]="100"> </kendo-grid-column>
<kendo-grid-column field="assignee.username" title="Assignee" [width]="100"> </kendo-grid-column>
<kendo-grid-column field="status" title="Status" [width]="120">
...

Answer 1

一个来自Telerik论坛的管理员帮我解决了这个问题。我在我的故事文件中丢失了几个导入;特别是GridComponent。

我遇到了一个i18n错误，将这一行导入到preview.js文件中解决了这个问题:

import '@angular/localize/init';