Ngx-bootstrap: Khronos locale error: please load locale "en" before using it

[dmitry-kostin]

I just updated to angular 7 and started to get following errors when I open datepicker:

Khronos locale error: please load locale "en" before using it
ERROR TypeError: Cannot read property 'firstDayOfWeek' of null

I already had played with defineLocale('en') and this.localeService.use('en') but had no luck
Anybody can explain this? From docs it seems 'en' is already default locale and no need to setup nothing else.

btw I have moment and moment-timezone installed but never changed any locales there too

ps edit
listLocales() returns empty array as well, and its supposed to return ['en'] at least

[dmitry-kostin]

fixed for now by downgrading from 3.1.1 to 3.0.1

[Domainv]

@dmitry-kostin Could you be more specific or/and provide a reproduction of this issue.

[fchiumeo]

maybe related #4754

[Domainv]

Build method was changed to use ng-packagr and making the library in Angular Package Format.

But the result got an error related with buildOptimizer

For now, a temporary solution is a turn off buildOptimizer.
Working on avoiding the problem...

Also, the issue looks like:

[FrancescoBorzi]

@Domainv are you sure that this issue depends on the one you linked? because that one is open since September. While our issue affects only 3.1.1 and not 3.0.1 of ngx-bootstrap

[adrienverge]

@Domainv

• For most projects it's not possible to "just set buildOptimizer: false" on production builds.

• According to several people, the issue seems to come from ngx-bootstrap, not angular-cli. Can you give more details on why you labeled this angular issue? Do you have extra info on the cause of the problem? I (and others, I believe) would be happy to contribute and try to fix this problem if they can.

[Domainv]

@adrienverge I know, I am working on avoiding the problem

[Hoakie]

I may have found part of the issue. I was getting the "Khronos locale error: please load locale...." issue and tried about everything. I created a brand new project and isolated my issue the compiler options setting for target in my tsconfig.json. I had it set to: "target": "es6" but when I set it to "target": "es5" the issue disappears. While this is "Ok" for me right now, my guess it the root error should be investigated and fixed sooner rather than later

[swathianupuram]

I am also facing the same issue "Khronos locale error: please load locale "hi-in" before using it".
Angular version: 7.2.2
ngx-Bootstrap version: 3.2.0

I tried with target: "es5" still getting the same error.
Is this issue is from library(ngx-bootstrap) or Angular?

[FrancescoBorzi]

this issue is closed, please open a new one if you think to have found a bug

[fwirsch]

The right solution for this is to add the defineLocale(‘es’, esLocale) in your component constructor, just before you call this.localeService.use(‘es’):

import { esLocale } from ‘ngx-bootstrap/locale’;
import { defineLocale } from ‘ngx-bootstrap/chronos’;
//////
constructor(
public localeService: BsLocaleService,
) {
defineLocale(‘es’, esLocale);
this.localeService.use(‘es’);
}
//////////

hope this helps...

using:
“ngx-bootstrap”: “~3.2.0”
“@angular”: “~7.2.0”

[Domainv]

@here The issue fixed from 3.1.2 version
New issue related to other reasons.
I created a new issue for it https://github.com/valor-software/ngx-bootstrap/issues/5086

[Vimallakzz]

### In order to acheive localisation in ngx date picker, need to import all possible locales of ngx-datepicker by import locales in defineLocale([localecode], [locale-object])

import * as locales from 'ngx-bootstrap/locale';
import { defineLocale } from 'ngx-bootstrap/chronos';

function defineLocales() {
  for (const locale in locales) {
      defineLocale(locales[locale].abbr, locales[locale]);
  }
}
defineLocales();

[barrita]

The right solution for this is to add the defineLocale(‘es’, esLocale) in your component constructor, just before you call this.localeService.use(‘es’):

import { esLocale } from ‘ngx-bootstrap/locale’;
import { defineLocale } from ‘ngx-bootstrap/chronos’;
//////
constructor(
public localeService: BsLocaleService,
) {
defineLocale(‘es’, esLocale);
this.localeService.use(‘es’);
}
//////////

hope this helps...

using:
“ngx-bootstrap”: “~3.2.0”
“@angular”: “~7.2.0”

this worked for me ;)

[Vimallakzz]

@barrita . Your solution is right. But if you want to show french locale you need to load once again . So that we can loop over the list of locales and load it. Find above solution to load all locales

[angelbyte01]

Para cambiar el idioma es necesario importar la configuración local en el import de esta manera:

y los idiomas los encuentras en

• node_modules/ngx-bootstrap/locale/esm5.js
  *public_api.js

y por ultimo

Espero les ayude, saludos desde Perú. :)