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