TranslateLoader with Standalone Component [Angular16]

Question

I have an Angular 16 standalone application, and i'm having issues with the Translate imports.

My current code looks like this:

main.ts

*Some non relevant imports*
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],
        },
      })
    ),
    // Otras configuraciones de providers si es necesario
  ],
  ...appConfig, // Expansión de appConfig después de la configuración específica de TranslateModule
};


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

inventario.component.ts

*non relevant imports*

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],
})

The error i'm currently experiencing is:

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

I suposedly already imported the TranslateLoader interface into my code, but seems like something its not working properly and i can't tell what it is, i've been stucked with this for serveral weeks already.

Thanks in advance for any suggestions.

Already tried the next links:

Medium

GitHub

Answer 1

I think the providers array is getting overridden by appConfig could you try this small change?

if the appConfig has its own providers array, then the previous definition of providers will get overridden rather than merged!

const combinedConfig = {
    ...appConfig, // Expansión de appConfig después de la configuración específica de TranslateModule
    providers: [
      provideHttpClient(),
      importProvidersFrom(
        TranslateModule.forRoot({
          defaultLanguage: 'en',
          loader: {
            provide: TranslateLoader,
            useFactory: createTranslateLoader,
            deps: [HttpClient],
          },
        })
      ),
      ...(appConfig.providers && appConfig.providers.length ? appConfig.providers: [])
      // Otras configuraciones de providers si es necesario
    ],
  };