Angular独立Pipe在Storybook中报错NG0302：无法找到管道

问题场景 #

在Storybook中引入独立Pipe，编写了简易的ShortPipe及对应Storybook故事代码，但运行时触发NG0302错误：提示在'StorybookWrapperComponent'组件中找不到'shortpipe'管道。

ShortPipe代码 #

@Pipe({
    name: 'shortpipe',
    standalone: true,
})
export class ShortPipe implements PipeTransform {
    transform(value: any): any {
        return 'hello';
    }
}

原Storybook故事代码 #

const meta: Meta<any> = {
    title: 'Title of my fantastic story',
    render: () => ({
        template: `<p>{{'22222' | shortpipe}}</p>`,
    }),
};

export default meta;
type Story = StoryObj<any>;

export const Default: Story = {
    render: (args) => ({
        moduleMetadata: [
            {
                imports: [ShortPipe],
            },
        ],
        template: `<p>{{'22222' | shortpipe}}</p>`,
    }),
};

错误详情 #

NG0302: The pipe 'shortpipe' could not be found in the 'StorybookWrapperComponent' component. Verify that it is declared or imported in this module.

环境：Angular 15.0.2，@storybook/angular 6.5.15

解决方法 #

问题核心是moduleMetadata的格式错误——你用数组包裹了配置对象，但正确格式应该是直接传入一个对象，而非数组。另外，原meta中的render函数没有导入Pipe，会导致默认渲染时也报错，这里提供两种修正方案：

方案一：全局配置moduleMetadata（推荐） #

把moduleMetadata放到meta中全局配置，所有story都会共享这个配置，避免重复代码：

import { Meta, StoryObj } from '@storybook/angular';
import { ShortPipe } from './path-to-your-shortpipe'; // 替换为实际路径

const meta: Meta<any> = {
    title: 'Title of my fantastic story',
    moduleMetadata: {
        imports: [ShortPipe],
    },
    render: () => ({
        template: `<p>{{'22222' | shortpipe}}</p>`,
    }),
};

export default meta;
type Story = StoryObj<any>;

export const Default: Story = {};

方案二：单个Story中单独配置 #

如果只需要某个特定story使用该Pipe，就在对应story的render里正确配置moduleMetadata：

import { Meta, StoryObj } from '@storybook/angular';
import { ShortPipe } from './path-to-your-shortpipe'; // 替换为实际路径

const meta: Meta<any> = {
    title: 'Title of my fantastic story',
};

export default meta;
type Story = StoryObj<any>;

export const Default: Story = {
    render: (args) => ({
        moduleMetadata: {
            imports: [ShortPipe],
        },
        template: `<p>{{'22222' | shortpipe}}</p>`,
    }),
};

关键修正点 #

• 移除moduleMetadata外层的数组，从[{ imports: [ShortPipe] }]改为{ imports: [ShortPipe] }
• 全局配置后，单个story可以直接复用配置，无需重复编写导入逻辑

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