Oops guys, how are you? I'm having a problem using ngx translate on this project with Angular 9, it's not getting the translations that are in Assets. Can you help me with this? Apparently everything is fine.
appModule
export function HttpLoaderFactory(http: HttpClient) {
return new TranslateHttpLoader(http);
}
TranslateModule.forRoot({
loader: {
provide: TranslateLoader,
useFactory: HttpLoaderFactory,
deps: [HttpClient]
}
})
Assets/i18n/
{
"english": "Angular 9 Example",
"portuguese": "Welcome to our app!"
}Home Component /
imports : [
TranslateModule
]
Home Component
constructor (private translate: TranslateService) { }
ngonit() {
translate.setDefaultLang('en');
}<h2>{{ 'english' | translate }}</h2>The path of your i18n translation file should be included within the HttpLoaderFactory to be loaded correctly before using it.
export function HttpLoaderFactory(http: HttpClient) {
return new TranslateHttpLoader(http, 'assets/i18n/', '.json');
}
Then, the selected language should be defined using translate.use('en'):
ngOnInit() {
this.translate.setDefaultLang('en');
this.translate.use('en');
}
In case you're using an interceptor (e.g. AuthInterceptor), you should force it to handle the requests start with baseUrl only, and ignore the local ones, like the following:
intercept(
request: HttpRequest<unknown>,
next: HttpHandler
): Observable<HttpEvent<any>> {
if (request.url.startsWith(environment.baseUrl)) {
// Add your logic here
// e.g. inject the token and next.handle the request again
} else {
return next.handle(request);
}
}