Angular 17切换esbuild构建后inject()报NG0203错误的问题

切换到esbuild构建器后出现这个错误，核心原因是esbuild的打包和执行逻辑比旧的browser构建器更严格，它会更早执行部分代码，导致原本在旧构建器里“侥幸”能运行的inject()调用，现在直接暴露了上下文问题——这些inject()没有在Angular允许的注入上下文里执行。

常见问题场景及修复方法 #

1. 在类的普通方法里调用inject() #

很多人图省事会在方法里直接调用inject()，旧构建器可能没报错，但esbuild会直接触发NG0203：

// 错误写法
export class UserService {
  getUserInfo() {
    const authService = inject(AuthService); // 此处不在注入上下文
    return authService.currentUser;
  }
}

修复：把inject()移到字段初始化器或者构造函数里，提前获取依赖：

// 正确写法
export class UserService {
  private authService = inject(AuthService); // 字段初始化时注入

  getUserInfo() {
    return this.authService.currentUser;
  }
}

2. 在异步/延迟执行的代码里调用inject() #

比如setTimeout、Promise.then、RxJS的pipe操作符内部，这些代码会在初始注入流程结束后才执行，自然脱离了注入上下文：

// 错误写法
export class DashboardComponent {
  ngOnInit() {
    fetch('/api/data').then(() => {
      const logger = inject(LoggerService); // 延迟执行，无注入上下文
      logger.log('数据加载完成');
    });
  }
}

修复：要么提前注入依赖，要么用runInInjectionContext手动指定上下文：

import { inject, runInInjectionContext, Injector } from '@angular/core';

// 正确写法1：提前注入
export class DashboardComponent {
  private logger = inject(LoggerService);

  ngOnInit() {
    fetch('/api/data').then(() => {
      this.logger.log('数据加载完成');
    });
  }
}

// 正确写法2：手动指定上下文（适合无法提前注入的场景）
export class DashboardComponent {
  private injector = inject(Injector);

  ngOnInit() {
    fetch('/api/data').then(() => {
      runInInjectionContext(this.injector, () => {
        const logger = inject(LoggerService);
        logger.log('数据加载完成');
      });
    });
  }
}

3. 第三方库或自定义工厂函数的问题 #

如果是项目依赖的第三方库内部有不规范的inject()调用，或者你自己写的工厂函数在执行时不在注入上下文里，需要：

• 检查第三方库是否有适配Angular 17/esbuild的新版本
• 把工厂函数的调用逻辑包裹在runInInjectionContext里执行

额外排查步骤 #

• 清缓存：执行ng cache clean，然后重启ng serve，避免旧构建缓存干扰
• 全局搜inject(：逐个检查所有调用位置，确保都在构造函数、字段初始化器、Angular工厂函数（比如provide的useFactory）里
• 版本对齐：确保@angular-devkit/build-angular的版本和@angular/core、@angular/cli完全一致，版本不兼容也可能触发奇怪问题

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