Angular Storybook是否需要在Story的moduleMetadata.declarations中逐一声明组件

你完全可以避免在story中重复罗列已声明的组件，常用的实现方案有三种：

方案1：直接导入已完成声明的AppModule #

将全局的AppModule直接加入moduleMetadata的imports配置中，即可复用AppModule中所有已声明、导出的组件，无需重复配置declarations。
代码示例：

export default {
    title: 'My Application/Data Explorer Component',
    component: DataExplorerComponent,
    decorators: [
        moduleMetadata({
            imports: [AppModule]
        }),
    ],
} as Meta;

注意：该方案会同时引入AppModule中的所有全局 Provider（如路由、HTTP请求实例等），如果不需要相关依赖可通过moduleMetadata的providers配置项覆盖，也可以选择更轻量化的方案2。

方案2：封装独立的共享组件模块 #

将所有通用子组件统一抽离为独立的共享模块，在模块内同时完成声明和导出，后续在AppModule和story中只需要导入该共享模块即可。

步骤1：创建共享组件模块 #

// shared-components.module.ts
import { NgModule } from '@angular/core';
import { MyTextComponent } from './my-text.component';
import { MyTableComponent } from './my-table.component';
import { MyGraphComponent } from './my-graph.component';

@NgModule({
  declarations: [
    MyTextComponent,
    MyTableComponent,
    MyGraphComponent
  ],
  exports: [
    MyTextComponent,
    MyTableComponent,
    MyGraphComponent
  ]
})
export class SharedComponentsModule {}

步骤2：在AppModule中导入共享模块 #

// app.module.ts
@NgModule({
  imports: [SharedComponentsModule],
  // 其余配置省略
})
export class AppModule {}

步骤3：在story中导入共享模块 #

export default {
    title: 'My Application/Data Explorer Component',
    component: DataExplorerComponent,
    decorators: [
        moduleMetadata({
            imports: [SharedComponentsModule]
        }),
    ],
} as Meta;

该方案解耦性更强，不会引入多余的全局依赖，组件维护只需要修改共享模块一处即可。

方案3：开启Storybook自动依赖扫描（推荐，适配Storybook 7及以上版本） #

Storybook 7+的Angular框架支持自动扫描组件依赖，自动生成模块元数据，无需手动维护declarations或imports配置。
只需修改Storybook配置文件.storybook/main.ts，开启autoModuleMetadata配置：

// .storybook/main.ts
import type { StorybookConfig } from '@storybook/angular';

const config: StorybookConfig = {
  stories: ['../src/**/*.stories.@(js|jsx|ts|tsx|mdx)'],
  addons: ['@storybook/addon-essentials'],
  framework: {
    name: '@storybook/angular',
    options: {
      enableIvy: true,
      autoModuleMetadata: true
    },
  },
};

export default config;

开启后Storybook会自动识别组件用到的所有子组件和依赖模块，自动注入到story的运行环境中，彻底避免手动维护组件列表的问题。

内容的提问来源于stack exchange，提问作者Vincentius Kevin