Angular 13.1.1项目中添加Storybook后执行ng storybook提示命令无效问题求助

我来帮你搞定这个ng storybook命令无效的问题，咱们一步步拆解原因和解决方案：

为什么会出现这个错误？ #

Angular CLI本身并没有内置storybook这个命令，你虽然在angular.json里配置了Storybook的target，但直接敲ng storybook时，CLI找不到对应的命令映射，所以会提示命令无效。

解决方案 #

1. 先确保Storybook依赖正确安装

Angular 13.1.1需要搭配兼容版本的Storybook，建议安装6.5.x系列（7.x及以上版本对Angular 13支持有限），执行以下命令：

npm install @storybook/angular@6.5.x --save-dev

同时确认项目里已经安装了@angular-devkit/build-angular（Angular构建工具），如果没有的话也一并安装：

npm install @angular-devkit/build-angular@13.1.2 --save-dev

2. 用两种方式让CLI识别Storybook命令

方式一：配置Angular CLI命令别名

在angular.json的根节点下添加cli配置，给storybook命令绑定对应的builder：

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "cli": {
    "commands": {
      "storybook": {
        "builder": "@storybook/angular:start-storybook"
      }
    }
  },
  // 其他项目配置...
  "projects": {
    "website": {
      // 你的项目配置...
      "architect": {
        "storybook": { 
          "builder": "@storybook/angular:start-storybook", 
          "options": { 
            "browserTarget": "website:build", 
            "styles": [".storybook/custom-styles.scss"] 
          } 
        }
      }
    }
  }
}

配置完成后，再运行ng storybook应该就能正常启动了。

方式二：添加npm脚本（更简单省心）

直接在package.json的scripts里添加一条脚本，通过ng run来执行自定义target：

"scripts": {
  // 其他已有脚本...
  "storybook": "ng run website:storybook"
}

之后运行npm run storybook就能启动Storybook了，这种方式不需要修改Angular CLI的全局配置，更灵活。

3. 检查你的配置细节

• 确认angular.json里的browserTarget: "website:build"中的website是你项目的正确名称，别写错了
• 检查.storybook/custom-styles.scss的路径是否正确，确保文件存在，避免路径错误导致构建失败

4. 清理缓存重试

如果以上步骤都试过还是不行，试试清理缓存重新安装依赖：

# 清理npm缓存
npm cache clean --force
# 删除依赖文件
rm -rf node_modules package-lock.json
# 重新安装依赖
npm install
# 先确保项目本身能正常构建
ng build website

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