I'm trying to use Kendo components in my multilanguage application. To format the dates properly, Kendo required the LOCALE_ID
from Angular to be set. I'm not sure how to accomplish that in a clean way.
Currently, I'm using the HTTP_ACCEPT_LANGUAGE
to find in which language I should serve my app.
I do it like this in my nginx.conf:
# Parse AcceptLanguage header
# en,es,pl,fr
# en,es;q=0.8,pl;q=0.7,fr;q=0.6
set $first_language $http_accept_language;
if ($http_accept_language ~* '^(.+?),') {
set $first_language $1;
}
set $language_suffix 'en';
if ($first_language ~* 'fr') {
set $language_suffix 'fr';
}
root /usr/share/nginx/html/$language_suffix;
This works. The correct .xlf files are used and messages appear translated.
Now, I need to set the LOCALE_ID
to get my Kendo components to render the dates in a correct format. I tried to set it by getting the browser current language. Here's how I tried to accomplish that:
app.module.ts
...
import { LOCALE_ID, NgModule } from '@angular/core';
import { LocaleService } from './shared/service/locale.service';
...
@NgModule({
declarations: [
...
],
imports: [
...
],
providers: [
...
{
provide: LOCALE_ID,
deps: [LocaleService],
useValue: (localeService) => localeService.getLanguage()
}
],
})
locale.service.ts
import { Injectable } from '@angular/core';
@Injectable({
providedIn: 'root'
})
export class LocaleService {
constructor() { }
getLanguage() {
// return navigator.language || navigator.userLanguage
return 'fr-FR';
}
}
I get this error message from the Kendo component.
ERROR TypeError: value.replace is not a function
at CldrIntlService.set [as localeId] (cldr-intl.service.js:38)
at new CldrIntlService (cldr-intl.service.js:24)
at _createClass (core.js:19829)
at _createProviderInstance (core.js:19801)
at resolveNgModuleDep (core.js:19765)
at NgModuleRef_.push../node_modules/@angular/core/fesm5/core.js.NgModuleRef_.get (core.js:20473)
at resolveDep (core.js:20844)
at createClass (core.js:20724)
at createDirectiveInstance (core.js:20595)
at createViewNodes (core.js:21821)
If I set it this way, it works:
{ provide: LOCALE_ID, useValue: 'fr-FR' }
I'm a beginner, still trying to find my way around Angular. What did I miss? Is that the proper way to achieve that?
I inspired myself from:
- How to set locale in DatePipe in Angular 2?
- Browser language detection
Maybe you should use FactoryProvider to instanciate your injectable and return the locale value, for example :
providers: [
{
provide: LOCALE_ID,
useFactory: (localeService: LocaleService) => {
console.log('locale ID', localeService.language);
return localeService.language;
},
deps: [LocaleService]
}
],
See this related question
The following is working for me (code added on the providers
list of the app.module
):
{
provide: LOCALE_ID,
useValue: navigator.language,
},
I'm also importing and registering supported locales, not sure that's necessary:
import { registerLocaleData } from '@angular/common'
import localeEnAu from '@angular/common/locales/en-AU'
...
registerLocaleData(localeEnAu)
...
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With