Nrwl Nx环境下Angular Storybook运行报ERR_INVALID_ARG_TYPE错误

核心是Storybook读取Angular CLI/NX对应项目的构建配置时，无法获取到合法的字符串格式路径参数，常见触发场景如下：

• 新增组件后修改了angular.json（NX项目为project.json）中lib-core项目的build配置，缺失了outputPath、tsConfig等必填路径字段，或者字段值配置错误为undefined
• lib-core对应的Storybook配置（.storybook/main.js）中angularBrowserTarget属性值写错，和angular.json/project.json中定义的构建target名不匹配
• Storybook与当前使用的Angular/NX版本出现兼容冲突，通常发生在新增组件时同步升级了某个依赖包的版本
• NX环境下缓存异常，导致旧的配置没有被正确加载

1. 校验项目构建配置
   打开angular.json（NX项目打开libs/lib-core/project.json），检查lib-core的build target配置，确认所有路径类字段都有合法的字符串值：

示例合法配置参考：

{
  "targets": {
    "build": {
      "executor": "@angular-devkit/build-angular:ng-packagr",
      "options": {
        "project": "libs/lib-core/ng-package.json",
        "tsConfig": "libs/lib-core/tsconfig.lib.json",
        "outputPath": "dist/libs/lib-core"
      }
    }
  }
}

重点检查tsConfig、outputPath、project这三个字段是否存在且值不为空。

2. 校验Storybook配置
   打开.storybook/main.js，确认angularBrowserTarget配置和项目构建target匹配：

module.exports = {
  // 其他配置项
  "angularBrowserTarget": "lib-core:build",
  // 其他配置项
}

如果是NX+Storybook7+版本，可替换为projectBuildConfig字段指向对应lib的project.json路径。

3. 清除缓存重试
   依次执行以下命令清除缓存后重启Storybook：

# 清除nx缓存
nx reset
# 清除node_modules缓存
rm -rf node_modules/.cache
# 重启storybook
nx storybook lib-core

如果是纯Angular项目无NX，执行：

rm -rf node_modules/.cache
npm run storybook

4. 版本兼容校验
   如果以上步骤都无效，检查Storybook的大版本是否和Angular版本匹配：

• Angular 14对应Storybook 6.5+
• Angular 15对应Storybook 7.0+
• Angular 16+对应Storybook 7.2+
  版本不匹配的话调整对应依赖版本后重新安装依赖即可。

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