带有 Storybook 的 Angular 独立管道：NG0302：在组件中找不到管道答案

【问题标题】：Angular Standalone Pipe with Storybook: NG0302: The pipe could not be found in the component带有 Storybook 的 Angular 独立管道：NG0302：在组件中找不到管道
【发布时间】：2023-02-09 02:47:02
【问题描述】：

获得在 Storybook 中包含独立管道的任务。我的管道很简单：从 '@angular/core' 导入 { Pipe, PipeTransform };

@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. Find more at https://angular.io/errors/NG0302

角度：15.0.2

@故事书/角度：6.5.15

【问题讨论】：

标签： angular typescript storybook angular-storybook

【解决方案1】：

已经找到答案，问题只是将 moduleMetadata 导入到错误的地方。将它向上移动到 decorators 数组修复它：

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

【讨论】：