如何在ApplicationConfig中注入Service？注入上下文错误求解

问题场景 #

你尝试在ApplicationConfig的provideTransloco配置中，通过LanguageService设置defaultLang，但直接使用以下两种方式均触发注入上下文错误：

1. defaultLang: (new LanguageService).getDefaultLanguage(),
2. defaultLang: inject(LanguageService).getDefaultLanguage(),

原因分析 #

• 直接实例化LanguageService：Angular服务通常依赖其他注入对象（如HttpClient、本地存储服务等），手动new会导致依赖缺失，且不符合依赖注入规范。
• 直接调用inject()：inject函数仅能在注入上下文中使用（如组件/服务构造函数、工厂函数、管道transform方法等），而ApplicationConfig的对象字面量是在全局上下文创建的，不属于注入上下文范围，因此报错。

可行实现方案 #

通过Angular的DI工厂函数模式，借助TRANSLOCO_CONFIG令牌动态生成Transloco配置，确保在注入上下文内安全获取LanguageService实例：

步骤1：确保LanguageService已注册 #

如果LanguageService未设置providedIn: 'root'，需先将其添加到providers数组：

import { LanguageService } from './path/to/language.service';

步骤2：用工厂函数提供TRANSLOCO_CONFIG #

import { ApplicationConfig, inject } from '@angular/core';
import { provideRouter } from '@angular/router';
import { provideTransloco, TRANSLOCO_CONFIG, TranslocoConfig } from '@ngneat/transloco';
import { TranslocoHttpLoader } from './transloco-loader';
import { appRoutes } from './app.routes';
import { LanguageService } from './path/to/language.service';
import { isDevMode } from '@angular/core';

export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(appRoutes),
    LanguageService, // 注册服务（若未用providedIn: 'root'）
    // 自定义Transloco配置工厂
    {
      provide: TRANSLOCO_CONFIG,
      useFactory: (): TranslocoConfig => {
        const langService = inject(LanguageService);
        return {
          availableLangs: ['en', 'ru', 'kk'],
          defaultLang: langService.getDefaultLanguage(),
          reRenderOnLangChange: true,
          prodMode: !isDevMode(),
        };
      }
    },
    provideTransloco({
      loader: TranslocoHttpLoader,
      // 不再直接传入config，使用上面提供的TRANSLOCO_CONFIG
    }),
  ],
};

原理说明 #

• TRANSLOCO_CONFIG是Transloco暴露的配置令牌，允许通过DI机制动态提供配置。
• useFactory函数运行在Angular的注入上下文内，因此可以安全调用inject(LanguageService)获取实例，进而拿到默认语言值。

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