Angular16独立组件TranslateLoader注入异常求助

问题说明 #

我有一个Angular 16独立应用，在使用ngx-translate时遇到了TranslateLoader的注入错误，以下是当前代码及错误信息：

main.ts代码 #

// 无关导入
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app/app.component';
import { appConfig } from './app/app.config';
import { environment } from './environments/environment';
import { HttpClient, provideHttpClient } from '@angular/common/http';
import { importProvidersFrom } from '@angular/core';
import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';

export function createTranslateLoader(http: HttpClient): TranslateHttpLoader {
  return new TranslateHttpLoader(http, './assets/i18n/', '.json');
}

const combinedConfig = {
  providers: [
    provideHttpClient(),
    importProvidersFrom(
      TranslateModule.forRoot({
        defaultLanguage: 'en',
        loader: {
          provide: TranslateLoader,
          useFactory: createTranslateLoader,
          deps: [HttpClient],
        },
      })
    ),
    // 其他必要的提供者配置
  ],
  ...appConfig, // 在TranslateModule特定配置后扩展appConfig
};


bootstrapApplication(AppComponent, combinedConfig).catch((err) => console.error(err));

inventario.component.ts代码 #

// 无关导入

import { TranslateStore, TranslateService, TranslateModule, TranslateLoader} from '@ngx-translate/core';

@Component({
    selector: 'inventario',
    templateUrl: 'inventario.component.html',
    styleUrls: ['inventario.component.scss'],
    host: { 'class': 'u-main-container' },
    standalone: true,
    imports:[CommonModule, StepperNuevaCaptacionComponent, ClarityModule, TranslateModule],
    providers: [CatalogoAprovechamientosService, NotificationService, TranslateService, TranslateStore],
})

报错信息 #

ERROR NullInjectorError: R3InjectorError(Standalone[InventarioComponent])[TranslateLoader -> TranslateLoader -> TranslateLoader -> TranslateLoader -> TranslateLoader]:
NullInjectorError: No provider for TranslateLoader!

我以为已经在代码中导入了TranslateLoader接口，但问题依然存在，已经困扰数周，求解决方案。

解决方案 #

问题核心是你在独立组件InventarioComponent的providers数组中手动添加了TranslateService和TranslateStore，这会覆盖全局提供的实例，导致组件无法获取到全局配置的TranslateLoader。

修改步骤 #

1. 移除组件内的重复服务声明：从inventario.component.ts的providers数组中删除TranslateService和TranslateStore。这两个服务已通过main.ts中的TranslateModule.forRoot()全局提供，独立组件会自动继承全局提供者。
2. 精简导入内容：组件中只需导入TranslateModule即可，TranslateLoader是接口，无需在组件中导入，全局配置已提供其实现。

修改后的inventario.component.ts关键部分：

// 仅保留必要的导入
import { TranslateModule } from '@ngx-translate/core';

@Component({
    selector: 'inventario',
    templateUrl: 'inventario.component.html',
    styleUrls: ['inventario.component.scss'],
    host: { 'class': 'u-main-container' },
    standalone: true,
    imports:[CommonModule, StepperNuevaCaptacionComponent, ClarityModule, TranslateModule],
    providers: [CatalogoAprovechamientosService, NotificationService], // 移除TranslateService和TranslateStore
})

额外优化建议 #

检查main.ts中的combinedConfig合并顺序，确保全局翻译配置不会被appConfig覆盖：

const combinedConfig = {
  ...appConfig,
  providers: [
    ...(appConfig.providers || []),
    provideHttpClient(),
    importProvidersFrom(
      TranslateModule.forRoot({
        defaultLanguage: 'en',
        loader: {
          provide: TranslateLoader,
          useFactory: createTranslateLoader,
          deps: [HttpClient],
        },
      })
    ),
    // 其他必要的提供者配置
  ],
};

这样可以保证appConfig中的现有提供者与翻译配置共存，不会出现覆盖问题。

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