Angular Storybook中‘xxx is not a known element’错误解决咨询

当然可以把CUSTOM_ELEMENTS_SCHEMA配置到Storybook里，针对Angular项目的具体做法分两种场景：

1. 全局配置（所有Story生效） #

在.storybook/preview.ts文件中，通过moduleMetadata全局注入Schema：

import { moduleMetadata } from '@storybook/angular';
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

export const decorators = [
  moduleMetadata({
    schemas: [CUSTOM_ELEMENTS_SCHEMA],
  }),
];

配置后所有Story都会自动应用该Schema，无需逐个Story单独设置。

2. 单个Story配置 #

如果仅需给特定Story添加Schema，在对应Story文件中使用moduleMetadata装饰器：

import { moduleMetadata } from '@storybook/angular';
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { TargetComponent } from './target.component';

export default {
  title: 'TargetComponent',
  component: TargetComponent,
  decorators: [
    moduleMetadata({
      schemas: [CUSTOM_ELEMENTS_SCHEMA],
    }),
  ],
};

// 具体Story示例
export const Default = {};

完成配置后重启Storybook，Angular就会忽略自定义元素的未知标签错误，和你在应用模块中配置的效果一致。

内容的提问来源于stack exchange，提问作者Klaus M.