Angular子组件ng serve运行正常但Storybook中无法识别问题求助

Angular 项目 ng serve 运行时会加载完整的模块依赖树，你已经在父组件模块中导入了子组件模块，因此运行正常。但 Storybook 运行时是独立的组件渲染上下文，默认不会自动读取组件所属的 NgModule 配置，你当前的 Story 仅声明了父组件本身，未导入对应的模块依赖，因此无法识别子组件标签。

修改 Story 文件，通过 moduleMetadata 装饰器导入父组件所属的 BoxSizeFrameModule 即可，修改后的完整 Story 代码如下：

import { Meta, Story } from "@storybook/angular/types-6-0";
// 导入Storybook模块装饰器
import { moduleMetadata } from "@storybook/angular";
import { boxSizeParams, boxSizeSize } from "../box-size-visualizer/box-size-visualizer.component";
import { BoxSizeFrameComponent } from "./box-size-frame.component";
// 导入父组件所属模块
import { BoxSizeFrameModule } from "./box-size-frame.module";

export default{
    title: 'Demo Frames/Box Size Frame',
    component: BoxSizeFrameComponent,
    // 新增模块配置
    decorators: [
        moduleMetadata({
            imports: [BoxSizeFrameModule]
        })
    ]
} as Meta;

const Sizes: boxSizeParams[] = [/*a bunch of objects*/]

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

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

Primary.args = {Sizes:Sizes};

如果你不想导入完整模块，也可以选择在 moduleMetadata 中单独声明所需组件，适合仅测试单个组件、不想引入模块其他无关依赖的场景：

moduleMetadata({
    declarations: [BoxSizeFrameComponent, BoxSizeVisualizerComponent],
    imports: [CommonModule]
})

修改后重启 Storybook 即可正常渲染嵌套的子组件。

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