Angular项目中Storybook无法渲染Kendo UI自定义元素问题求助

问题根因 #

你当前的Storybook配置中没有正确导入Kendo UI对应的Angular组件模块，仅添加CUSTOM_ELEMENTS_SCHEMA只会让Angular编译器忽略未知标签的报错，不会加载Kendo组件的实际逻辑，因此自定义标签无法渲染为可用组件。

解决步骤 #

1. 在Story的模块配置中导入依赖的Kendo模块
   你用到了Kendo Grid和Kendo Button两个组件，需要先导入对应的模块，同时要引入Angular的动画模块（Kendo组件依赖该模块）。修改后的组件story文件参考如下：

import { HttpClientModule } from '@angular/common/http';
import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { RouterTestingModule } from '@angular/router/testing';
import { moduleMetadata } from '@storybook/angular';
import { Story, Meta } from '@storybook/angular/types-6-0';
// 导入Kendo对应模块
import { GridModule } from '@progress/kendo-angular-grid';
import { ButtonsModule } from '@progress/kendo-angular-buttons';
import DocumentsComponent from './documents.component';

export default {
  title: 'Components/Pages/Documents',
  component: DocumentsComponent,
  argTypes: {},
  decorators: [
    moduleMetadata({
      imports: [
        HttpClientModule, 
        RouterTestingModule,
        BrowserAnimationsModule,
        // 加入Kendo依赖模块
        GridModule,
        ButtonsModule
      ],
      // 可以移除CUSTOM_ELEMENTS_SCHEMA了，不需要用它规避报错
    }),
  ],
} as Meta;

const Template: Story<DocumentsComponent> = (args: DocumentsComponent) => ({
  props: args,
});

export const DocumentsList = Template.bind({});

2. 全局导入Kendo主题样式
   如果组件渲染后样式异常，需要在.storybook/preview.js文件顶部导入Kendo的主题样式：

import '@progress/kendo-theme-default/dist/all.css';

export const parameters = {
  actions: { argTypesRegex: "^on[A-Z].*" },
  controls: {
    matchers: {
      color: /(background|color)$/i,
      date: /Date$/,
    },
  },
}

3. 全局配置优化（可选）
   如果有多个Story都用到Kendo组件，可以直接在.storybook/preview.js中配置全局的moduleMetadata，不需要每个Story重复导入Kendo模块：

import { moduleMetadata } from '@storybook/angular';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { GridModule } from '@progress/kendo-angular-grid';
import { ButtonsModule } from '@progress/kendo-angular-buttons';
import '@progress/kendo-theme-default/dist/all.css';

export const decorators = [
  moduleMetadata({
    imports: [BrowserAnimationsModule, GridModule, ButtonsModule],
  }),
];

export const parameters = {
  // 原有配置保持不变
}

完成以上配置后重启Storybook即可正常渲染Kendo组件。

内容的提问来源于stack exchange，提问作者Logan Shoemaker