inject()

Question

我最近将我的 Angular 项目从 v14 更新到了 v17。这样做之后，我在运行我的项目/测试代码时收到了许多注入错误。

我正在使用 Angular 17.3.2、Typescript 5.4.3 和 NX 18.2.3。

我知道从 v16 开始，我应该使用

runInInjectionContext

，但我觉得我好像不明白文档中应该在哪里使用它。我是否必须在使用服务的任何地方添加这一点？是否需要添加到服务和组件中？

运行我的项目时的确切错误堆栈：

main.ts:14  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 Module.ɵɵinject (core.mjs:1106:60)
    at Object.RouterModule_Factory [as useFactory] (router.mjs:424:103)
    at Object.factory (core.mjs:3322:38)
    at core.mjs:3219:47
    at runInInjectorProfilerContext (core.mjs:866:9)
    at R3Injector.hydrate (core.mjs:3218:21)
    at R3Injector.get (core.mjs:3082:33)
    at injectInjectorOnly (core.mjs:1100:40)
    at ɵɵinject (core.mjs:1106:60)

错误发生在我的

main.ts

的

platformBrowserDynamic().bootstrapModule(AppModule)

:

if (!(/msie\s|trident/i.test(window.navigator.userAgent))) {
    platformBrowserDynamic().bootstrapModule(AppModule).then(platformRef => {
        let injector = platformRef.injector;
        let notificationService = injector.get(NotificationService);
        let authService = injector.get(AuthService);
        let coBrandingService = injector.get(CoBrandingService);
        let coreCacheService = injector.get(CoreCacheService);
        let eventService = injector.get(EventService);
        let loginService = injector.get(LoginService);
        authService.RegisterHook(notificationService);
        authService.RegisterHook(coBrandingService);
        authService.RegisterHook(coreCacheService);
        authService.RegisterHook(eventService);
        authService.RegisterHook(loginService);
    });
}

组件使用我已经尝试过，但尚未承诺到处添加：

export class MyComponent{
   constructor(private service1: FirstService, private service2: SecondService, private injector: EnvironmentInjector) {}

   ngOnInit() {
       runInInjectionContext(this.injector, () => {
           inject(FirstService);
           inject(SecondService);
       })
   }
}

服务使用方式我已经尝试过，但尚未承诺到处添加：

@Injectable()
export class MyService{
   constructor(private service2: SecondService, private injector: EnvironmentInjector) {}

   ServiceMethod() {
       runInInjectionContext(this.injector, () => {
           let result = this.service2.SecondServiceMethod();
           return result;
       })
   }
}

我还尝试将@angular/*添加到compilerOptions.paths中，如下所示here

我已经尝试将 build.options.preserveSymlinks 设置为 true，如此处讨论的那样

Answer 1

此错误是因为

inject

只能同步使用，并且不能在任何异步回调中或根据角度文档

在任何等待点之后使用

这里如何使用inject和runInInjectionContext：

export class AppComponent implements OnInit {
 private service1 = inject(FirstService);
 private injector = inject(Injector);

  ngOnInit(): void {
    runInInjectionContext(this.injector, () => {
      //do something
    });
  }
}

使用

inject

函数时，不需要使用构造函数。