仅在lib目录部署Angular Storybook遇警告错误求助

问题背景 #

采用Angular多项目文件结构，目标是仅在lib目录中配置.storybook，不在工作区根目录部署。已完成配置可编译展示组件，但收到以下警告与错误：

WARN Your Storybook startup uses a solution that will not be supported in version 7.0.
WARN You must use angular builder to have an explicit configuration on the project used in angular.json
WARN Read more at:
WARN - https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#sb-angular-builder)
WARN - https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#angular13)
ERR! => Could not find angular workspace config (angular.json) on this path "/path_to_the_workspace/projects/lib"
info => Fail to load angular-cli config. Using base config

其中找不到angular.json的错误符合预期（库目录无该文件），需解决上述问题。

解决思路 #

1. 为Lib项目配置Angular Builder（核心解决警告） #

Storybook 7.0强制要求使用Angular Builder，需在工作区根目录的angular.json中为lib项目添加Storybook的builder配置：

• 找到projects下的lib项目节点，新增architect配置：

"architect": {
  "storybook": {
    "builder": "@storybook/angular:start-storybook",
    "options": {
      "configDir": "projects/lib/.storybook",
      "browserTarget": "lib:build",
      "port": 6006
    }
  },
  "build-storybook": {
    "builder": "@storybook/angular:build-storybook",
    "options": {
      "configDir": "projects/lib/.storybook",
      "outputDir": "dist/storybook/lib",
      "browserTarget": "lib:build"
    }
  }
}

• 之后通过根目录的Angular CLI命令启动Storybook：ng run lib:storybook，而非直接在lib目录执行storybook命令。这样Storybook会通过Angular Builder读取根目录的angular.json，彻底解决找不到配置的错误。

2. 调整Lib目录.storybook配置文件 #

• 在projects/lib/.storybook/main.js中，明确指定Angular项目的核心配置路径：

module.exports = {
  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
  addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
  framework: '@storybook/angular',
  core: {
    builder: 'webpack5'
  },
  angularOptions: {
    enableIvy: true,
    tsConfig: '../tsconfig.lib.json',
    projectRoot: '../'
  }
};

• 确保tsConfig指向lib项目自身的TypeScript配置文件，projectRoot设为lib目录的上级，帮助Storybook正确识别项目结构。

3. 处理版本兼容（消除7.0警告） #

• 升级Storybook相关依赖到最新稳定版（或7.x版本），确保与当前Angular版本匹配。
• 删除lib目录下旧版的启动脚本（如直接调用start-storybook的npm run storybook），统一使用Angular CLI的ng run命令启动和构建。

4. 验证配置 #

• 执行ng run lib:storybook启动服务，检查警告与错误是否消除。
• 执行ng run lib:build-storybook构建静态文件，确认输出目录正常生成内容。

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