英文:
Angular Standalone Pipe with Storybook: NG0302: The pipe could not be found in the component
问题
以下是您要翻译的内容:
"Got the task to include a standalone pipe in Storybook. My Pipe as simple as:
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'shortpipe',
standalone: true,
})
export class ShortPipe implements PipeTransform {
transform(value: any): any {
return 'hello';
}
}
Even my Storybook story is not that complicated:
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>',
}),
};
However I got the error:
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
Angular: 15.0.2
@storybook/angular: 6.5.15"
英文:
Got the task to include a standalone pipe in Storybook. My Pipe as simple as:
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'shortpipe',
standalone: true,
})
export class ShortPipe implements PipeTransform {
transform(value: any): any {
return 'hello';
}
}
Even my Storybook story is not that complicated:
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>`,
}),
};
However I got the error:
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
Angular: 15.0.2
@storybook/angular: 6.5.15
答案1
得分: 0
已找到答案,问题只是将moduleMetadata
导入放在错误的位置。将其移至装饰器数组的顶部即可解决:
export const Default: Story = {
decorators: [
moduleMetadata({
imports: [ShortPipe],
}),
],
render: (args) => ({
template: `<p>{{'22222' | shortpipe}}</p>`,
}),
};
英文:
Found the answer already, the issue was only placing moduleMetadata import to the wrong place. Moving it up to the decorators array fixed it:
export const Default: Story = {
decorators: [
moduleMetadata({
imports: [ShortPipe],
}),
],
render: (args) => ({
template: `<p>{{'22222' | shortpipe}}</p>`,
}),
};
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论