Ngrx平台中Angular 17升级后Effects模块的依赖注入问题解析

问题背景

在将Angular项目从16版本升级到17版本后，开发者可能会遇到一个与Ngrx Effects模块相关的依赖注入错误。这个错误通常发生在将Angular构建器从传统的@angular-devkit/build-angular:browser切换到新的基于esbuild的@angular-devkit/build-angular:application构建器时。

错误现象

当应用运行时，控制台会显示如下错误信息：

Error: NG0203: inject() must be called from an injection context such as a constructor, a factory function, a field initializer, or a function used with `runInInjectionContext`

这个错误表明Angular的依赖注入系统无法正确解析Ngrx Effects模块中的依赖关系，特别是在使用新的esbuild构建器时。

根本原因

经过深入分析，这个问题实际上并非Ngrx框架本身的缺陷，而是与项目的TypeScript配置有关。具体来说，当在tsconfig.json文件中添加了以下路径映射时会导致此问题：

{
  "compilerOptions": {
    "paths": {
      "@angular/*": ["./node_modules/@angular/*"]
    }
  }
}

这种配置会干扰Angular的依赖注入系统，特别是在使用新的esbuild构建器时。esbuild对模块解析的处理方式与传统的Webpack构建器有所不同，导致依赖注入上下文无法正确建立。

解决方案

解决这个问题的方法很简单：从tsconfig.json文件中移除上述路径映射配置。具体步骤如下：

1. 打开项目的tsconfig.json文件
2. 在compilerOptions.paths部分，删除@angular/*的路径映射
3. 保存文件并重新构建项目

技术原理

这个问题的本质在于Angular依赖注入系统的工作原理。当使用inject()函数时，它必须在特定的"注入上下文"中执行，这个上下文通常由Angular的依赖注入容器提供。路径映射的干扰导致esbuild构建器无法正确建立这个上下文，从而破坏了依赖注入的正常流程。

新的esbuild构建器对模块解析和代码组织有更严格的要求，这也是为什么在传统构建器下可能不会出现此问题，而在切换到esbuild后问题显现的原因。

最佳实践

对于使用Angular 17和Ngrx的项目，建议：

1. 避免不必要的路径映射，特别是对Angular核心模块的映射
2. 在升级到Angular 17时，仔细检查所有自定义的TypeScript路径配置
3. 如果必须使用路径别名，考虑使用项目特定的前缀，而不是覆盖框架本身的路径

总结

这个问题展示了构建工具升级可能带来的微妙兼容性问题。虽然表面看起来是Ngrx Effects模块的问题，但实际上是构建配置与框架交互方式的变化导致的。理解Angular依赖注入系统的工作原理以及构建工具对模块解析的影响，有助于开发者快速诊断和解决这类问题。

对于正在升级到Angular 17并使用Ngrx的团队，建议在切换构建器前全面审查TypeScript配置，确保不会引入类似的隐性问题。