Problem with ngx-translate (Angular 17, Standalone components)

I've started a new project on which I intended to use ngx-translate for providing translations. But there is a problem.

Of course, I've installed it through npm and I've implemented all the code in the app component, and configure it in the app.config.ts but. It still gives me this error:

Internal server error: R3InjectorError(Standalone[_AppComponent])[_TranslateService -> _TranslateService -> InjectionToken USE_EXTEND -> InjectionToken USE_EXTEND]: 
  NullInjectorError: No provider for InjectionToken USE_EXTEND!
      at NullInjector.get (c:/Users/germano.spina/Desktop/Angular/sft/sicily-food-tour/node_modules/@angular/core/fesm2022/core.mjs:1654:27)
      at R3Injector.get (c:/Users/germano.spina/Desktop/Angular/sft/sicily-food-tour/node_modules/@angular/core/fesm2022/core.mjs:3093:33)
      at R3Injector.get (c:/Users/germano.spina/Desktop/Angular/sft/sicily-food-tour/node_modules/@angular/core/fesm2022/core.mjs:3093:33)
      at injectInjectorOnly (c:/Users/germano.spina/Desktop/Angular/sft/sicily-food-tour/node_modules/@angular/core/fesm2022/core.mjs:1100:40)
      at Module.ɵɵinject (c:/Users/germano.spina/Desktop/Angular/sft/sicily-food-tour/node_modules/@angular/core/fesm2022/core.mjs:1106:42)
      at Object.TranslateService_Factory (c:/Users/germano.spina/Desktop/Angular/sft/sicily-food-tour/node_modules/@ngx-translate/core/dist/fesm2022/ngx-translate-core.mjs:708:259)
      at eval (c:/Users/germano.spina/Desktop/Angular/sft/sicily-food-tour/node_modules/@angular/core/fesm2022/core.mjs:3219:47)
      at runInInjectorProfilerContext (c:/Users/germano.spina/Desktop/Angular/sft/sicily-food-tour/node_modules/@angular/core/fesm2022/core.mjs:866:9)
      at R3Injector.hydrate (c:/Users/germano.spina/Desktop/Angular/sft/sicily-food-tour/node_modules/@angular/core/fesm2022/core.mjs:3218:21)
      at R3Injector.get (c:/Users/germano.spina/Desktop/Angular/sft/sicily-food-tour/node_modules/@angular/core/fesm2022/core.mjs:3082:33) (x2)

I'm a beginner so I don't really know how to fix this.

I've tried to add everything the error was telling that was missing. So this is my app.config.ts:

import { ApplicationConfig } from '@angular/core';
import { provideRouter } from '@angular/router';
import { provideClientHydration } from '@angular/platform-browser';
import { HttpClient, provideHttpClient } from '@angular/common/http';
import { TranslateCompiler, TranslateLoader, TranslateService, TranslateStore, TranslateFakeCompiler, TranslateParser, TranslateDefaultParser, MissingTranslationHandler, FakeMissingTranslationHandler, USE_DEFAULT_LANG, USE_STORE, USE_EXTEND } from '@ngx-translate/core';
import { HttpLoaderFactory } from './http-loader.factory';
import { routes } from './app.routes';

export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(routes),
    provideClientHydration(),
    provideHttpClient(),
    {
      provide: TranslateLoader,
      useFactory: HttpLoaderFactory,
      deps: [HttpClient]
    },
    TranslateService,
    TranslateStore,
    {
      provide: TranslateCompiler,
      useClass: TranslateFakeCompiler
    },
    {
      provide: TranslateParser,
      useClass: TranslateDefaultParser
    },
    {
      provide: MissingTranslationHandler,
      useClass: FakeMissingTranslationHandler,
    },
    {
      provide: USE_DEFAULT_LANG,
      useValue: true,
    },
    {
      provide: USE_STORE,
      useValue: true,
    },
  ]
};

But everytime I add a new provider, it gives me a new error.

I started the project and when I type ng serve in the terminal, is all blank and it gives me the error that something is wrong with ngx-translate.

So, how can I fix this?

Solution

You need to use importProvidersFrom(TranslateModule.forRoot()). The config is then passed as a parameter in the forRoot() function. Here is your code with the HttpLoaderFactory:

import { HttpClient, provideHttpClient } from "@angular/common/http";
import { TranslateLoader, TranslateModule } from "@ngx-translate/core";
import { ApplicationConfig, importProvidersFrom } from "@angular/core";
import { provideClientHydration } from "@angular/platform-browser";
import { provideRouter } from "@angular/router";
import { routes } from "./app.routes";
import { HttpLoaderFactory } from './http-loader.factory';

export const appConfig: ApplicationConfig = {
    providers: [
        provideRouter(routes),
        provideClientHydration(),
        provideHttpClient(),
        importProvidersFrom(
            TranslateModule.forRoot({
                loader: {
                    provide: TranslateLoader,
                    useFactory: HttpLoaderFactory,
                    deps: [HttpClient]
                }
            })
        )
    ]
}