angularngx-translate

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