如何在NX中生成Angular组件时自动生成Storybook故事？

一、配置NX生成器默认行为（全局/项目级） #

要让NX生成Angular组件时自动生成.stories.ts，核心是给@nx/angular:component生成器设置默认参数，有两种配置层级可选：

1. 全局所有项目生效 #

修改根目录下的nx.json，在generators字段中添加配置：

{
  "generators": {
    "@nx/angular:component": {
      "stories": true
    }
  }
}

2. 单个项目生效 #

打开目标项目的project.json，在generators字段中添加同样配置：

{
  "generators": {
    "@nx/angular:component": {
      "stories": true
    }
  }
}

二、单次生成时强制指定参数 #

如果不想修改配置文件，每次生成组件时直接追加参数即可：

npx nx g @nx/angular:component new-component/new-component --stories=true

关键说明 #

你之前在.storybook/main.ts中添加的framework.options.generateStories: true是Storybook自身的配置，和NX组件生成器的自动生成逻辑无关，因此不会触发组件创建时的故事文件生成。NX组件生成器是否生成故事，完全由自身的stories参数控制。

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