Angular Storybook 执行ng g component时如何自动生成.stories.ts文件

可行的便捷解决方案 #

方案1：扩展Angular Schematics（最贴合原生使用习惯） #

Angular CLI的ng generate命令本身基于Schematics实现，你可以直接扩展官方的组件生成逻辑，新增生成stories文件的步骤：

• 基于@schematics/angular:component创建自定义Schematic，提前写好.stories.ts的模板文件，内置组件名、选择器等变量的自动替换逻辑
• 在angular.json中配置schematics默认规则，将组件生成的默认执行逻辑指向你自定义的Schematic
• 配置完成后，正常执行ng g component my-component就会自动在组件目录下生成对应stories文件，无需额外操作

方案2：使用Storybook官方Angular Schematic #

Storybook官方已经提供了适配Angular的生成器，无需自行处理老PR的未文档化逻辑：

• 完成Storybook的Angular环境初始化后，可直接执行ng generate @storybook/angular:stories --name=my-component --path=src/app/xxx单独生成对应组件的stories文件
• 也可直接执行批量生成命令，一次性为现有所有组件生成stories文件

方案3：封装CLI别名（零额外学习成本） #

如果不想改动Schematics逻辑，直接封装一条自定义命令即可：

• 在项目package.json的scripts字段中新增："g:component": "ng g component $npm_config_name && node generate-story-file.js $npm_config_name"
• 后续生成组件时直接执行npm run g:component --name=my-component即可一步完成组件和stories文件的生成

特殊情况：Nx Workspace项目 #

如果你的项目是基于Nx搭建的，无需任何自定义配置，生成组件时直接加--stories参数即可自动生成对应stories文件：
ng g component my-component --stories

内容的提问来源于stack exchange，提问作者Ignacio Ambía