Storybook与Angular库集成中的Zone.js依赖问题解析

问题背景

在最新版本的Storybook(8.6.0+)与Angular库集成过程中，开发者遇到了一个常见问题：当尝试在Storybook中渲染Angular库组件时，控制台会抛出"NG0908: In this configuration Angular requires Zone.js"错误。这个问题特别容易出现在使用Angular 18及以上版本的项目中，尤其是当开发者通过Nx工作区创建Angular库时。

问题本质

这个问题的根源在于Storybook 8.6.0版本中移除了对Zone.js的自动导入。Zone.js是Angular变更检测机制的核心依赖，在传统Angular应用中不可或缺。虽然Angular 18+开始支持无Zone.js(zoneless)模式，但大多数现有项目仍依赖于Zone.js。

解决方案

方案一：显式导入Zone.js

对于仍需要Zone.js的项目，最简单的解决方案是在Storybook的preview.ts文件中显式导入Zone.js：

// .storybook/preview.ts
import 'zone.js';
// 或者导入项目的polyfills文件
import '../src/polyfills';

方案二：启用Zoneless模式

对于使用Angular 18+且希望采用无Zone.js模式的项目，可以通过以下配置启用：

1. 在项目的storybook和build-storybook配置中添加：

{
  "options": {
    "experimentalZoneless": true
  }
}

2. 更新测试配置（如果使用jest-preset-angular）：

// 替换原有的setupZoneTestEnv为：
import { setupZonelessTestEnv } from 'jest-preset-angular/setup-env/zoneless';
setupZonelessTestEnv();

技术深入

Zone.js的作用

Zone.js为Angular提供了执行上下文，使得框架能够自动追踪异步操作并触发变更检测。在传统Angular应用中，它负责：

1. 自动触发变更检测
2. 提供错误处理上下文
3. 追踪异步操作

Zoneless模式原理

Angular 18引入的Zoneless模式采用了一种新的变更检测策略：

1. 基于Reactive编程模型
2. 使用Signals作为核心响应式原语
3. 开发者需要手动管理状态变更通知

最佳实践建议

1. 新项目：考虑直接采用Zoneless模式，利用Angular最新的响应式编程特性
2. 现有项目：
   • 如果短期内不计划迁移到Zoneless，采用显式导入Zone.js的方案
   • 如果计划迁移，可以逐步启用Zoneless模式
3. 测试配置：确保测试环境与运行环境配置一致，特别是变更检测策略

版本兼容性说明

这个问题主要出现在Storybook 8.6.0及以上版本。对于不同Angular版本的兼容性：

• Angular <18：必须使用Zone.js，采用方案一
• Angular 18+：可以选择方案一或方案二
• Nx工作区：注意Nx特有的配置方式，可能需要额外调整

总结

Storybook与Angular库集成中的Zone.js依赖问题反映了Angular生态系统向Zoneless模式的演进过程。开发者应根据项目实际情况选择合适的解决方案，同时关注Angular未来版本中Zoneless模式的稳定性和功能完善。随着Angular响应式编程模型的成熟，Zoneless模式将成为更推荐的选择。