NgRx Store DevTools 中缺失 @angular/core 依赖问题解析

问题背景

在使用 NgRx 状态管理库时，开发者可能会遇到一个与依赖管理相关的构建错误。当使用 pnpm 作为包管理器并启用其隔离模块功能时，构建应用时会报错提示缺少 @angular/core 包。

错误表现

具体错误信息如下：

✘ [ERROR] Missing "./rxjs-interop" specifier in "@angular/core" package [plugin vite:dep-pre-bundle]

7 │ import { toSignal } from '@angular/core/rxjs-interop';

问题根源

这个问题源于 @ngrx/store-devtools 包在 package.json 中没有正确声明 @angular/core 作为 peerDependency。相比之下，@ngrx/store 模块已经正确设置了这一依赖关系。

在 pnpm 的隔离模块模式下，依赖关系会被严格管理。由于 @ngrx/store-devtools 没有声明对 @angular/core 的依赖，导致构建时无法找到所需的 Angular 核心模块。

解决方案

官方修复方案

该问题已被官方修复，解决方案是在 @ngrx/store-devtools 的 package.json 中添加 @angular/core 作为 peerDependency，与 @ngrx/store 模块保持一致。

临时解决方案

在等待官方发布修复版本期间，开发者可以手动修改 pnpm 的 lockfile 来临时解决这个问题：

1. 打开 pnpm-lock.yaml 文件
2. 找到 @ngrx/store-devtools 的依赖项
3. 添加 @angular/core 作为依赖

修改示例如下：

'@ngrx/store-devtools@18.0.2(@ngrx/store@18.0.2(@angular/core@18.1.3(rxjs@7.8.1)(zone.js@0.14.10))(rxjs@7.8.1)':
  dependencies:
    '@angular/core': 18.1.3(rxjs@7.8.1)(zone.js@0.14.10)
    '@ngrx/store': 18.0.2(@angular/core@18.1.3(rxjs@7.8.1)(zone.js@0.14.10))(rxjs@7.8.1)
    rxjs: 7.8.1
    tslib: 2.6.3

修改后运行 pnpm install，应该会显示添加了一个依赖项：

Lockfile is up to date, resolution step is skipped
Packages: +1
+
Progress: resolved 1, reused 1, downloaded 0, added 0, done

技术原理

这个问题涉及到 npm 包管理中的依赖声明机制：

1. peerDependencies：表示这个包需要宿主环境提供的依赖，但不会自动安装
2. dependencies：表示这个包直接需要的依赖，会被自动安装
3. pnpm 的隔离模式：每个包都有自己独立的 node_modules，依赖关系更加严格

在 Angular 生态系统中，核心功能如 rxjs-interop 是通过 @angular/core 提供的。当 @ngrx/store-devtools 尝试使用 toSignal 等功能时，必须确保 @angular/core 可用。

最佳实践

1. 对于库开发者：应该明确声明所有必需的 peerDependencies
2. 对于应用开发者：
   • 定期更新依赖版本
   • 了解所使用的包管理器的特性
   • 遇到类似问题时，可以检查依赖关系图

总结

依赖管理是现代前端开发中的重要环节。通过理解 npm 包的各种依赖类型和不同包管理器的工作机制，开发者可以更好地解决构建时遇到的依赖问题。NgRx 团队已经修复了这个问题，展示了开源社区对这类问题的快速响应能力。