NX Storybook工作区添加scripts报错：Data path不得含额外属性

问题原因 #

@storybook/angular的build-storybook执行器不支持在project.json的options中添加scripts字段，这会触发Schema校验错误：

Data path "" must NOT have additional properties(scripts).

可行解决方案 #

方案一：通过Storybook Preview配置动态加载脚本 #

在宿主项目的.storybook/preview.js文件中添加动态脚本加载逻辑（如果没有该文件则新建）：

import { useEffect } from '@storybook/client-api';

useEffect(() => {
  // 创建script标签加载外部库
  const script = document.createElement('script');
  script.src = '../node_modules/leader-line/leader-line.min.js';
  script.async = false; // 确保脚本同步加载，避免依赖问题
  document.body.appendChild(script);

  // 组件卸载时清理脚本
  return () => {
    if (document.body.contains(script)) {
      document.body.removeChild(script);
    }
  };
}, []);

这种方法直接在Storybook的预览环境中注入脚本，无需修改Angular构建配置，适配性更强。

方案二：通过Angular库的构建配置传递脚本 #

如果你的storybook-host库有独立的build目标，可将scripts配置到该目标中：

1. 在project.json的targets下找到build目标（若无则需先配置）
2. 在build的options中添加scripts字段：

"build": {
  "executor": "@nx/angular:package",
  "options": {
    // 其他配置...
    "scripts": ["node_modules/leader-line/leader-line.min.js"]
  }
}

3. 将build-storybook目标的browserTarget修改为storybook-host:build，让Storybook复用Angular库的构建配置

为什么之前的尝试无效 #

es5BrowserSupport和extractCss是Angular构建的特定配置项，用于控制浏览器兼容性和CSS提取，和Storybook的外部脚本引入逻辑无关，因此无法解决当前报错。

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