在Storybook/angular中引入@ng-select/ng-select报未知元素错误如何解决

1. @ng-select/ng-select 的类型定义文件本身就是你看到的空类结构，Angular 模块的元数据存在于编译后的js文件中，d.ts只做类型声明，这个文件没有问题，不是故障原因。
2. NgSelectModule 运行依赖 CommonModule、FormsModule 两个Angular内置模块，你的主应用里已经在全局导入过这两个模块，所以运行正常；但Storybook是独立运行环境，默认不会继承主应用的全局模块配置，缺少依赖导致组件无法注册。
3. 你当前的Storybook配置写法不符合对应版本的Angular适配要求：
   • Storybook 6及更早版本，第三方Angular模块必须包裹在 moduleMetadata 装饰器中才能生效，直接写在Meta的imports字段不会被识别
   • MatIconModule能正常运行的原因是它不需要依赖FormsModule，大概率你的Storybook全局配置已经提前导入了Angular Material相关的基础依赖。

适配Storybook 6.x版本 #

导入moduleMetadata工具包装模块配置，同时补全NgSelect依赖的内置模块：

import { NgSelectModule } from '@ng-select/ng-select';
import { MatIconModule } from '@angular/material/icon';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { moduleMetadata } from '@storybook/angular';

export default {
   title: 'shared/rating-stars',
   component: RatingStarsComponent,
   decorators: [
     moduleMetadata({
       imports: [CommonModule, FormsModule, NgSelectModule, MatIconModule]
     })
   ]
} as Meta;

适配Storybook 7.x及更高版本 #

不需要使用moduleMetadata，直接在Meta的imports字段补全所有依赖即可：

import { NgSelectModule } from '@ng-select/ng-select';
import { MatIconModule } from '@angular/material/icon';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';

export default {
   title: 'shared/rating-stars',
   component: RatingStarsComponent,
   imports: [CommonModule, FormsModule, NgSelectModule, MatIconModule]
} as Meta;

内容的提问来源于stack exchange，提问作者Marek Grác