使用esbuild构建Angular应用时持续出现NG0203错误的求助

问题分析 #

从错误栈和你的代码来看，该错误源于NgModule与独立组件/API混合使用时，esbuild对注入上下文的校验更严格，尤其是通过importProvidersFrom导入NgModule时，某些服务的注入时机不符合独立API的规范。

排查与解决方案 #

1. 检查NgModule内的服务实现 #

确认SharedModule、DataSetModule等导入模块中的服务，是否存在**非构造函数场景下调用inject()**的情况，比如字段初始化、普通方法中：

// 错误示例：字段初始化时直接调用inject()
export class FaultyService {
  http = inject(HttpClient);
}

改为标准构造函数注入：

// 正确写法
export class CorrectService {
  constructor(private http: HttpClient) {}
}

2. 拆分importProvidersFrom调用 #

将集中在一个importProvidersFrom中的多个NgModule拆分为单独调用，避免模块间的注入上下文冲突：

export const appConfig: ApplicationConfig = {
  providers: [
    importProvidersFrom(BrowserModule),
    importProvidersFrom(SharedModule),
    importProvidersFrom(DataSetModule),
    importProvidersFrom(LookUpTablesModule),
    importProvidersFrom(NormsModule),
    importProvidersFrom(
      StoreModule.forRoot({
        mappings: mappingsReducer,
        auth: authReducer,
      })
    ),
    importProvidersFrom(EffectsModule.forRoot([AuthEffects])),
    provideAnimations(),
    provideHttpClient(),
    provideRouter(routes),
  ],
};

3. 校验bootstrap组件的依赖链 #

错误栈显示错误发生在_ApplicationRef.bootstrap阶段，说明启动组件的依赖链中存在非法注入。检查你的bootstrap组件，确认所有间接依赖的服务都遵循正确的注入规范。

4. 临时关闭esbuild优化排查 #

在angular.json中关闭构建优化，确认是否是优化逻辑导致注入上下文丢失：

"architect": {
  "build": {
    "builder": "@angular-devkit/build-angular:application",
    "options": {
      "optimization": false,
      // 其他配置项...
    }
  }
}

若关闭后错误消失，说明是树摇或压缩过程破坏了注入上下文，需检查服务的@Injectable装饰器配置，确保providedIn为'root'或明确的模块，而非'any'。

5. 规范服务的提供范围 #

确保所有服务的@Injectable配置符合规范，避免使用providedIn: 'any'：

// 错误示例
@Injectable({ providedIn: 'any' })
export class DataSetService {}

// 正确写法
@Injectable({ providedIn: 'root' })
export class DataSetService {}

总结 #

该错误的核心是注入操作未在Angular认可的上下文（构造函数、工厂函数等）中执行，esbuild比旧构建器更严格地执行了这一规则。重点排查导入NgModule中的服务实现，以及NgModule与独立API混合使用时的不规范场景。

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