Angular+Nx应用Storybook composition无限加载问题

在搭载多个Angular库的Nx monorepo项目中启用Storybook composition功能时，已部署两个独立的Storybook服务，地址分别为http://localhost:9001和http://localhost:9002，两个服务单独访问、执行构建都完全正常。但配置组合加载模式后，浏览器控制台没有输出任何报错信息，页面一直卡在无限加载状态。

现有配置 #

组合功能的配置文件为.storybook/main.js，配置内容如下：

module.exports = {
  core: { builder: 'webpack5' },
  stories: [],
  addons: ['@storybook/addon-essentials', '@storybook/addon-knobs', '@storybook/addon-a11y'],
  features: {
    buildStoriesJson: true,
  },
  refs: {
    'designsystem-core': {
      title: 'Design System Core',
      url: 'http://localhost:9001',
    },
    'designsystem-demo': {
      title: 'Design System Demo',
      url: 'http://localhost:9002',
    },
  },
}

环境与前置操作信息 #

• 两个服务分别在独立终端执行nx run <对应项目名>:storybook命令启动，构建流程均正常走完
• 两个服务对应的dist输出目录下，都成功生成了stories.json文件
• 项目核心依赖版本：
  • @nrwl/storybook：13.7.3
  • @storybook/angular：6.4.13

该问题是Nx与Storybook 6.4.x版本搭配时的典型兼容问题，由两个问题共同触发：

1. 跨域请求被拦截：Nx启动Storybook开发服务时，默认不会给stories.json这类静态资源配置跨域响应头，宿主Storybook请求子服务的stories.json时会被浏览器跨域策略拦截。而Storybook 6.4版本对composition模块的加载失败捕获逻辑存在缺陷，不会在控制台抛出跨域相关错误，直接中断加载流程。
2. 本地服务探测逻辑卡死：Storybook composition默认会先发起子服务的版本校验、服务端渲染能力探测请求，本地开发模式下服务用的是分块传输编码，探测请求永远拿不到完整响应，没有显式关闭该逻辑的话，加载流程会一直卡在探测阶段。

按以下步骤操作即可解决：

1. 给两个子Storybook服务添加跨域响应头配置，分别修改两个项目下的.storybook/main.js，追加devServer自定义配置：

module.exports = {
  // 原有配置全部保留
  async devServer(app) {
    app.use((req, res, next) => {
      res.setHeader('Access-Control-Allow-Origin', '*');
      res.setHeader('Access-Control-Allow-Headers', '*');
      next();
    })
  }
}

2. 修改宿主Storybook的refs配置，给每个子服务条目添加disableVersionCheck: true参数，跳过版本校验和服务端渲染探测，修改后的refs配置如下：

refs: {
  'designsystem-core': {
    title: 'Design System Core',
    url: 'http://localhost:9001',
    disableVersionCheck: true,
  },
  'designsystem-demo': {
    title: 'Design System Demo',
    url: 'http://localhost:9002',
    disableVersionCheck: true,
  },
}

3. 全量关闭所有正在运行的Storybook进程，重新启动服务，清空浏览器缓存后访问宿主地址，即可正常加载组合后的Storybook内容。

补充说明：如果是生产环境构建后部署的场景，不需要添加disableVersionCheck参数，只需要保证托管子Storybook静态资源的服务配置了正确的跨域响应头即可。

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