Angular库项目运行Storybook时出现TS6053错误的解决办法

问题原因 #

Storybook初始化时默认选择了库项目的lib:build目标，但该目标的配置路径解析出现异常，导致将某个配置值错误识别为文件路径../false，引发TypeScript编译错误。

解决方法 #

方法1：重新初始化Storybook并指定正确的项目

删除已生成的.storybook目录，重新运行初始化命令时指定测试应用playground作为目标项目：

rm -rf .storybook
npx storybook@latest init --project playground
npm run storybook

方法2：修改现有Storybook配置文件

打开.storybook/main.ts，找到framework.options.angularCliProject配置项，将其从lib:build修改为playground或lib（不带:build后缀）：

export default {
  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
  addons: ['@storybook/addon-links', '@storybook/addon-essentials', '@storybook/addon-interactions'],
  framework: {
    name: '@storybook/angular',
    options: {
      // 修改此处的项目标识
      angularCliProject: 'playground'
    }
  },
  docs: {
    autodocs: 'tag'
  }
};

保存后重新运行npm run storybook。

方法3：检查并修正Angular工作区配置

打开angular.json，定位到projects.lib.architect.build.options.tsConfig，确认其指向正确的tsconfig文件路径，例如：

{
  "projects": {
    "lib": {
      "architect": {
        "build": {
          "options": {
            "tsConfig": "projects/lib/tsconfig.lib.json"
          }
        }
      }
    }
  }
}

若路径错误则修正，之后重新启动Storybook。

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