Ngx-bootstrap: docs(datepicker): add sample with import()

[leomayer]

Is there a way to use moment as well as a config-provider for the locales?

Currently I need to

import {defineLocale} from 'ngx-bootstrap/bs-moment';
import {de} from 'ngx-bootstrap/locale';

constructor(){
    defineLocale(de.abbr, de);
   this.bsConfig.locale = de;
}

Is there a way to use it like

import * as moment from 'moment';
constructor(){
 this.bsConfig.locale = moment.locale(this.lang); // or similar
}

which would allow to use the locales dynamically and not force to import them into the code in advance. To my understanding this function was already provided by date-picker ==> therefore the q.

[valorkin]

When you use moment locales, it it's not dynamic at all, it loads them all from start
Use import() to dynamically load locales

[leomayer]

Sorry to be persistent, but I do not get your reply.

First of all I guess you mean listLocales() instead of import().

Second: when I try your web-code then I get in the same browser 'en' only. Which does not give me the chance to bypass the above mentioned way. Setting bsConfig.locale='fr' the same way as it is done on the Webpage result in the error Locale "fr" is not defined, please add it with "defineLocale(...)"

==> so how is the magical stuff done on the sample page to load dynamically/automatically all available languages into the datepicker?

[valorkin]

under import() I mean https://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-4.html
listLocales() will show only already registered locales
magical stuff is not so magical (https://github.com/valor-software/ngx-bootstrap/blob/61e6ed9e2d275aa3cac5f37f724ad583722d0fd5/demo/src/app/components/+datepicker/demo-datepicker.module.ts#L13-L21)

[leomayer]

Uhu... that's about _magic_ ;-) thx for clarification...

the dynamic import() I couldn't get it to work - don't know why, but it did NOT load the locales with just the path 'ngx-bootstrap/locale' (since de-is included therein) - I guess I need to specify the import-location more precise but I fear that it requires an explicit pointer to a package structure which might change. I didn't play around too much with the proper path...

Anyway - thx for your support - even if the case was already closed.

[valorkin]

import return promise ... import()
I will leave this issue open, to add this case to docs later

[wmarques]

@valorkin FYI, here's what I've done to lazy-load the locales:

 import(`ngx-bootstrap/chronos/esm2015/i18n/${this.$locale.id}`).then(
        locale => {
          const localeKey = Object.keys(locale).find(key =>
            key.endsWith('Locale')
          );
          defineLocale(this.$locale.id, locale[localeKey]);
          this.bsLocaleService.use(this.$locale.id);
        }
      );

Not proud of the key filtering to find the locale object within the module but I couldn't find a better solution, if you have one let me know :)

[valorkin]

You actually should be able to require locale file directly, it will be a good sample idea

[wmarques]

What do you mean by "locale file" ? Can you give me the path to it ?
Couldn't find it in my node_modules/ngx-bootstrap folder :(

EDIT: when using the path ngx-bootstrap/chronos/i18n/..., my loader tells me that I shouldn't compile typescript from node_modules...