Angular17切换esbuild构建器后Ngrx依赖注入NG0203错误排查

问题描述 #

将Angular从16升级至17，同时将构建器从@angular-devkit/build-angular:browser切换为@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. Find more at ``https://angular.io/errors/NG0203`` at injectInjectorOnly (core.mjs:1093:15) at ɵɵinject2 (core.mjs:1106:42) at Object.FeatureEffects_Factory [as factory] (feature-effects.ts:15:28) at chunk-BKMMLQFQ.js?v=f9269614:1898:35 at runInInjectorProfilerContext (chunk-BKMMLQFQ.js?v=f9269614:523:5) at R3Injector.hydrate (chunk-BKMMLQFQ.js?v=f9269614:1897:11) at R3Injector.get (chunk-BKMMLQFQ.js?v=f9269614:1790:23) at injectInjectorOnly (chunk-BKMMLQFQ.js?v=f9269614:646:36) at ɵɵinject (chunk-BKMMLQFQ.js?v=f9269614:652:59) at inject (chunk-BKMMLQFQ.js?v=f9269614:661:10)

当前AppModule代码：

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    StoreModule.forRoot(reducers, {
      metaReducers,
      runtimeChecks: {
        strictStateImmutability: false,
        strictActionImmutability: false
      }
    }),
    EffectsModule.forRoot([FeatureEffects])
  ],
  providers: [],
  bootstrap: [AppComponent],
  exports: []
})
export class AppModule {}

相关版本：

• NgRx 17.2.0（包含effects、entity、router-store、store、store-devtools）
• Angular 17
• Node.js v18.19.0

原因分析 #

切换到application构建器后，Angular默认使用esbuild作为打包工具，其依赖注入上下文的处理逻辑与原browser构建器（webpack）存在差异。NgRx Effects的旧版NgModule注册方式（EffectsModule.forRoot）在esbuild环境下，可能导致Effects类的工厂函数中inject()调用不在合法的注入上下文内；此外，如果Effects类中使用了构造函数外的inject()语法，也会触发该错误。

解决方案 #

方案1：改用NgRx独立API注册Effects #

将EffectsModule.forRoot替换为NgRx提供的provideEffects函数，直接在模块的providers数组中注册：

import { provideEffects } from '@ngrx/effects';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    StoreModule.forRoot(reducers, {
      metaReducers,
      runtimeChecks: {
        strictStateImmutability: false,
        strictActionImmutability: false
      }
    })
    // 移除EffectsModule.forRoot([FeatureEffects])
  ],
  providers: [
    provideEffects([FeatureEffects]) // 添加此行
  ],
  bootstrap: [AppComponent],
  exports: []
})
export class AppModule {}

如果项目已迁移为独立应用，可直接在app.config.ts的providers中配置provideEffects，替代NgModule中的注册逻辑。

方案2：确保Effects类使用构造函数注入 #

检查FeatureEffects类的实现，避免在构造函数外使用inject()，改用传统的构造函数注入方式：

// 错误示例：构造函数外使用inject()
export class FeatureEffects {
  private store = inject(Store);
  private actions$ = inject(Actions);

  loadData$ = createEffect(() => this.actions$.pipe(...));
}

// 正确示例：构造函数注入
export class FeatureEffects {
  constructor(
    private store: Store,
    private actions$: Actions
  ) {}

  loadData$ = createEffect(() => this.actions$.pipe(...));
}

验证 #

修改后重新构建并启动应用，确认NG0203错误是否消失。若问题仍存在，可尝试清除node_modules和dist目录，重新安装依赖后再构建。

内容的提问来源于stack exchange，提问作者Houssem Trabelsi