NgRx Signals 信号存储中重复定义信号的问题解析

问题背景

在使用 NgRx Signals 库开发 Angular 应用时，开发者可能会遇到一个特定的 TypeScript 编译错误："Exported variable 'storeFactory' has or is using name 'SIGNAL' from external module..."。这个错误通常出现在从 Angular 17 升级到 Angular 18 或更高版本时，特别是在使用信号存储(Signal Store)功能时。

问题本质

这个编译错误的根本原因是开发者在信号存储中重复定义了同一个信号。具体表现为：

1. 在 withComputed 方法中多次定义了同名的计算信号
2. 信号存储不允许信号成员被覆盖或重复定义
3. TypeScript 编译器无法正确处理这种重复定义的情况

问题复现

假设我们有以下信号存储定义：

export const ExtStore = signalStore(
  withState({ /* 初始状态 */ }),
  withComputed((store) => ({
    sidenavWidth: computed(() => '200px')
  })),
  withComputed((store) => ({
    sidenavWidth: computed(() => '250px') // 这里重复定义了sidenavWidth
  }))
);

这种写法会导致上述编译错误。

解决方案

解决这个问题的方法很简单：确保每个信号在存储中只定义一次。对于上面的例子，正确的写法应该是：

export const ExtStore = signalStore(
  withState({ /* 初始状态 */ }),
  withComputed((store) => ({
    sidenavWidth: computed(() => '250px') // 只定义一次
  }))
);

开发环境中的警告

从 NgRx Signals 18 版本开始，在开发模式下，当尝试覆盖 SignalStore 成员时，控制台会显示明确的警告信息，例如：

[SignalStore] Property "sidenavWidth" is already defined and cannot be overridden.

这个警告可以帮助开发者快速定位问题所在。

最佳实践

1. 避免重复定义：确保每个信号在存储中只定义一次
2. 利用计算信号：如果需要基于其他信号创建衍生值，使用 computed
3. 模块化设计：将相关信号分组到不同的 withComputed 块中，保持代码清晰
4. 类型安全：利用 TypeScript 的类型系统确保信号类型一致

版本兼容性说明

这个问题在以下版本组合中会出现：

• Angular 18.2.11 + NgRx 18.1.1 + TypeScript 5.5.2
• Angular 19 beta + NgRx 19 beta

但通过遵循上述最佳实践，可以确保代码在所有版本中都能正常工作。

总结

NgRx Signals 提供了强大的响应式状态管理能力，但在使用时需要注意信号的定义规则。避免重复定义信号不仅能解决编译错误，还能使代码更加清晰和可维护。开发者在升级到 Angular 18+ 和 NgRx 18+ 时，应该检查现有代码中是否存在信号重复定义的情况，并按照推荐的方式重构代码。