Angular注入外部库服务时遇NG0203/NG0200错误求助

问题场景 #

在Angular 16.2.12项目中，尝试通过依赖注入引入组织内部外部库的SelectionHelperService时，触发两个DI错误：

1. NG0203: inject()必须在注入上下文中调用，比如构造函数、工厂函数、字段初始化器或配合runInInjectionContext使用的函数中
2. NG0200: 检测到SelectionHelperService存在DI循环依赖

该服务在新创建的Angular 16.2.12项目及Angular 17.3.0库项目中可正常使用，但当前项目报错。安装外部库时因版本不兼容使用了--legacy-peer-deps参数，尝试通过EnvironmentInjector结合runInInjectionContext的方式注入，仍出现相同错误。

错误栈信息 #

NG0203错误栈 #

app-insights-error-handler.ts:19 ERROR Error: Uncaught (in promise): 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
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 :4200/machine-details/S0431Q0017/new RuntimeError (http://localhost:4200/vendor.js:216176:5) [angular]
    at :4200/machine-details/S0431Q0017/injectInjectorOnly (http://localhost:4200/vendor.js:217224:11) [angular]
    at :4200/machine-details/S0431Q0017/Module.ɵɵinject (http://localhost:4200/vendor.js:217234:59) [angular]
    at :4200/machine-details/S0431Q0017/Object.SelectionHelperService_Factory [as factory] (http://localhost:4200/vendor.js:207754:100) [angular]
    at :4200/vendor.js:119017:33 [angular]
    at :4200/machine-details/S0431Q0017/runInInjectorProfilerContext (http://localhost:4200/vendor.js:110639:5) [angular]
    at :4200/machine-details/S0431Q0017/R3Injector.hydrate (http://localhost:4200/vendor.js:119016:9) [angular]
    at :4200/machine-details/S0431Q0017/R3Injector.get (http://localhost:4200/vendor.js:118896:23) [angular]
    at :4200/machine-details/S0431Q0017/R3Injector.get (http://localhost:4200/vendor.js:118905:27) [angular]
    at :4200/machine-details/S0431Q0017/R3Injector.get (http://localhost:4200/vendor.js:118905:27) [angular]
    at :4200/machine-details/S0431Q0017/injectInjectorOnly (http://localhost:4200/vendor.js:110678:36) [angular]
    at :4200/machine-details/S0431Q0017/ɵɵinject (http://localhost:4200/vendor.js:110684:59) [angular]
    at :4200/machine-details/S0431Q0017/inject (http://localhost:4200/vendor.js:110767:10) [angular]
    at :4200/main.js:9664:60 [angular]
    at :4200/machine-details/S0431Q0017/resolvePromise (http://localhost:4200/polyfills.js:9062:19) [angular]
    at :4200/machine-details/S0431Q0017/resolvePromise (http://localhost:4200/polyfills.js:9015:9) [angular]
    at :4200/polyfills.js:9123:9 [angular]
    at :4200/vendor.js:120310:49 [angular]
    at :4200/machine-details/S0431Q0017/AsyncStackTaggingZoneSpec.onInvokeTask (http://localhost:4200/vendor.js:120310:30) [angular]
    at :4200/machine-details/S0431Q0017/Object.onInvokeTask (http://localhost:4200/vendor.js:120624:25) [angular]
    at :4200/machine-details/S0431Q0017/drainMicroTaskQueue (http://localhost:4200/polyfills.js:8460:23) [<root>]

NG0200错误栈 #

ERROR Error: Uncaught (in promise): Error: NG0200: Circular dependency in DI detected for SelectionHelperService. Find more at https://angular.io/errors/NG0200
Error: NG0200: Circular dependency in DI detected for SelectionHelperService. Find more at https://angular.io/errors/NG0200
    at throwCyclicDependencyError (core.mjs:228:11)
    at R3Injector.hydrate (core.mjs:9448:13)
    at R3Injector.get (core.mjs:9323:33)
    at R3Injector.get (core.mjs:9334:33)
    at R3Injector.get (core.mjs:9334:33)
    at injectInjectorOnly (core.mjs:842:40)
    at ɵɵinject (core.mjs:848:60)
    at inject (core.mjs:932:12)
    at three-d-viewer.component.ts:30:13
    at runInInjectionContext (core.mjs:10347:16)
    at new ThreeDViewerComponent (three-d-viewer.component.ts:29:26)
    at NodeInjectorFactory.ThreeDViewerComponent_Factory [as factory] (three-d-viewer.component.ts:49:4)
    at getNodeInjectable (core.mjs:4862:44)
    at instantiateAllDirectives (core.mjs:12629:27)
    at createDirectivesInstances (core.mjs:12045:5)
    at :4200/machine-details/S0431Q0017/resolvePromise (http://localhost:4200/polyfills.js:9062:19) [angular]
    at :4200/machine-details/S0431Q0017/resolvePromise (http://localhost:4200/polyfills.js:9015:9) [angular]
    at :4200/polyfills.js:9123:9 [angular]
    at :4200/vendor.js:120310:49 [angular]
    at :4200/machine-details/S0431Q0017/AsyncStackTaggingZoneSpec.onInvokeTask (http://localhost:4200/vendor.js:120310:30) [angular]
    at :4200/machine-details/S0431Q0017/Object.onInvokeTask (http://localhost:4200/vendor.js:120624:25) [angular]
    at :4200/machine-details/S0431Q0017/drainMicroTaskQueue (http://localhost:4200/polyfills.js:8460:23) [<root>]
    at :4200/machine-details/S0431Q0017/ZoneTask.invokeTask [as invoke] (http://localhost:4200/polyfills.js:8369:11) [<root>]
    at :4200/machine-details/S0431Q0017/invokeTask (http://localhost:4200/polyfills.js:9489:12) [<root>]
    at :4200/machine-details/S0431Q0017/globalCallback (http://localhost:4200/polyfills.js:9519:21) [<root>]

组件代码示例 #

初始注入写法 #

import { ChangeDetectionStrategy, Component } from '@angular/core';
import { SelectionHelperService } from 'my-external-library';

@Component({
  selector: 'svs-three-d-viewer',
  templateUrl: './three-d-viewer.component.html',
  styleUrls: ['./three-d-viewer.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class ThreeDViewerComponent {
  public constructor(private readonly selectionHelperService: SelectionHelperService) {}
}

尝试runInInjectionContext的写法 #

@Component({
  selector: 'svs-three-d-viewer',
  templateUrl: './three-d-viewer.component.html',
  styleUrls: ['./three-d-viewer.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class ThreeDViewerComponent {
  public constructor(private readonly injector: EnvironmentInjector) {
    runInInjectionContext(this.injector, () => {
      inject(SelectionHelperService);
    });
  }
}

错误成因分析 #

1. 循环依赖是核心问题：NG0200明确指出SelectionHelperService存在DI循环依赖，这种循环会破坏Angular的注入流程，进而触发NG0203的上下文错误——并非真的注入上下文不对，而是循环依赖导致注入初始化时上下文异常。
2. 依赖版本不兼容：安装库时使用--legacy-peer-deps意味着库的peer依赖与当前项目版本不匹配，可能导致Angular DI系统的兼容性问题，放大了循环依赖引发的错误。
3. 环境差异：新创建的项目依赖更干净，没有与库形成循环的服务，所以能正常运行；当前项目的已有服务可能与SelectionHelperService的依赖形成了闭环。

解决办法 #

1. 定位并修复循环依赖 #

• 执行ng build --diagnostics命令，查看构建诊断报告中的循环依赖部分，定位具体的依赖链。
• 检查SelectionHelperService的内部依赖：如果是库内部的循环，联系库维护者修复；如果是当前项目服务与库服务形成的循环，重构依赖关系，比如移除不必要的依赖，或者引入中间服务解耦。
• 临时 workaround：使用Injector延迟获取服务，避免在构造函数阶段触发循环依赖：

  import { ChangeDetectionStrategy, Component, Injector, OnInit } from '@angular/core';
  import { SelectionHelperService } from 'my-external-library';
  
  @Component({
    selector: 'svs-three-d-viewer',
    templateUrl: './three-d-viewer.component.html',
    styleUrls: ['./three-d-viewer.component.scss'],
    changeDetection: ChangeDetectionStrategy.OnPush,
  })
  export class ThreeDViewerComponent implements OnInit {
    private selectionHelperService?: SelectionHelperService;
  
    constructor(private readonly injector: Injector) {}
  
    ngOnInit(): void {
      this.selectionHelperService = this.injector.get(SelectionHelperService);
    }
  }
  

2. 修复依赖版本问题 #

• 查看外部库的package.json，确认其Angular peer依赖版本范围，确保与当前项目的16.2.12兼容。
• 尝试重新安装库，不使用--legacy-peer-deps，而是调整项目的依赖版本以匹配库的要求；若无法调整，考虑升级或降级项目的Angular版本到库支持的范围。

3. 调整库的注入配置 #

如果库的SelectionHelperService未使用@Injectable({ providedIn: 'root' })，确保在项目的AppModule或组件的providers数组中正确声明，避免重复注入导致的循环问题。

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