Angular Standalone Pipe with Storybook: NG0302: 该管道在组件中找不到

huangapple
go评论92阅读模式
英文:

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';

  1. @Pipe({
  2.     name: 'shortpipe',
  3.     standalone: true,
  4. })
  5. export class ShortPipe implements PipeTransform {
  6.     transform(value: any): any {
  7.         return 'hello';
  8.     }
  9. }

Even my Storybook story is not that complicated:

  1. const meta: Meta<any> = {
  2.     title: 'Title of my fantastic story',
  3.     render: () => ({
  4.         template: '<p>{{'22222' | shortpipe}}</p>',
  5.     }),
  6. };
  8. export default meta;
  9. type Story = StoryObj<any>;
  11. export const Default: Story = {
  12.     render: (args) => ({
  13.         moduleMetadata: [
  14.             {
  15.                 imports: [ShortPipe],
  16.             },
  17.         ],
  18.         template: '<p>{{'22222' | shortpipe}}</p>',
  19.     }),
  20. };

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';

  1. @Pipe({
  2.     name: &#39;shortpipe&#39;,
  3.     standalone: true,
  4. })
  5. export class ShortPipe implements PipeTransform {
  6.     transform(value: any): any {
  7.         return &#39;hello&#39;;
  8.     }
  9. }

Even my Storybook story is not that complicated:

  1. const meta: Meta&lt;any&gt; = {
  2.     title: &#39;Title of my fantastic story&#39;,
  3.     render: () =&gt; ({
  4.         template: `&lt;p&gt;{{&#39;22222&#39; | shortpipe}}&lt;/p&gt;`,
  5.     }),
  6. };
  8. export default meta;
  9. type Story = StoryObj&lt;any&gt;;
  11. export const Default: Story = {
  12.     render: (args) =&gt; ({
  13.         moduleMetadata: [
  14.             {
  15.                 imports: [ShortPipe],
  16.             },
  17.         ],
  18.         template: `&lt;p&gt;{{&#39;22222&#39; | shortpipe}}&lt;/p&gt;`,
  19.     }),
  20. };

However I got the error:
NG0302: The pipe &#39;shortpipe&#39; could not be found in the &#39;StorybookWrapperComponent&#39; 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导入放在错误的位置。将其移至装饰器数组的顶部即可解决：

  1. export const Default: Story = {
  2.     decorators: [
  3.         moduleMetadata({
  4.             imports: [ShortPipe],
  5.         }),
  6.     ],
  7.     render: (args) => ({
  8.         template: `<p>{{'22222' | shortpipe}}</p>`,
  9.     }),
  10. };
英文:

Found the answer already, the issue was only placing moduleMetadata import to the wrong place. Moving it up to the decorators array fixed it:

  1. export const Default: Story = {
  2.    decorators: [
  3.        moduleMetadata({
  4.            imports: [ShortPipe],
  5.        }),
  6.    ],
  7.    render: (args) =&gt; ({
  8.        template: `&lt;p&gt;{{&#39;22222&#39; | shortpipe}}&lt;/p&gt;`,
  9.    }),
  10. };

huangapple
  • 本文由 发表于 2023年2月9日 02:40:38
  • 转载请务必保留本文链接：https://go.coder-hub.com/75390348.html
  • angular
  • angular-storybook
  • storybook
  • typescript
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定