Angular项目运行Storybook报Zone.js检测到Promise被覆盖错误如何解决

该报错是@storybook/addon-essentials默认自动注入的core-js Promise polyfill加载时机晚于Angular依赖的Zone.js，覆盖了Zone.js打补丁后的全局Promise对象导致，可通过以下方案解决，保留所有插件功能：

方案1：配置addon-essentials关闭自动polyfill #

修改.storybook/main.js中的addons配置，将@storybook/addon-essentials改为对象形式，关闭默认的polyfill注入逻辑：

// .storybook/main.js
module.exports = {
  "stories": [
    "../src/**/*.stories.mdx",
    "../src/**/*.stories.@(js|jsx|ts|tsx)"
  ],
  "addons": [
    "@storybook/addon-actions",
    "@storybook/addon-links",
    {
      name: "@storybook/addon-essentials",
      options: {
        // *关键配置：禁用essentials自带的polyfill自动注入*
        polyfill: false,
        docs: {
          inlineStories: true
        }
      }
    }
   ]
}

修改完成后重启Storybook即可，所有插件功能不受影响。

方案2：手动拆分addon-essentials（方案1无效时使用） #

@storybook/addon-essentials是多个常用插件的集合，如果你不需要全部功能，或者方案1仍有报错，可以拆分引入需要的插件，彻底避免多余polyfill加载：

1. 卸载@storybook/addon-essentials：
   npm uninstall @storybook/addon-essentials --save-dev
2. 手动安装需要的功能插件：
   npm install @storybook/addon-controls @storybook/addon-backgrounds @storybook/addon-viewport @storybook/addon-toolbars --save-dev
3. 修改.storybook/main.js的addons配置：

addons: [
  "@storybook/addon-actions",
  "@storybook/addon-links",
  "@storybook/addon-controls",
  "@storybook/addon-backgrounds",
  "@storybook/addon-viewport",
  "@storybook/addon-toolbars"
]

配置后可保留controls、actions、样式调试等所有核心功能，无多余polyfill冲突。

补充验证操作 #

如果上述方案仍报错，可做以下调整：

• 在.storybook目录下新增preview-head.html文件，提前引入Zone.js确保加载优先级：

<script src="/node_modules/zone.js/dist/zone.min.js"></script>

• 清理依赖缓存：删除node_modules文件夹、package-lock.json/yarn.lock文件后重新执行安装命令，再启动Storybook。

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