Problems with setting locale

[lajoj]

I'm struggling with upgrade from 2.2.5 to 2.3.1 for my angular 8 application.
In my app.component.ts I'm loading the locales (as in your examples)

import './schedulerLocales.js';

The file schedulerLocales.js:

import { EnLocale } from 'bryntum-scheduler/locales/scheduler.locale.En.js';
import { SvSELocale } from 'bryntum-scheduler/locales/scheduler.locale.SvSE.js';
import { LocaleManager } from 'bryntum-scheduler/scheduler.umd.js';
LocaleManager.registerLocale('En', { locale : EnLocale });
LocaleManager.registerLocale('SvSE', { locale : SvSELocale });

So far, no problems.
In my component I try to set the locale to SvSE:

ngAfterViewInit() {
    this.scheduler.schedulerEngine.localeManager.locale = 'SvSE';
}

This results in a strange call to GET {myhost}/undefined and the locale doesn't seem to have changed.

zone-evergreen.js:1042 GET https://localhost:4200/undefined 404 (Not Found)
(anonymous)	@	zone-evergreen.js:1042
(anonymous)	@	scheduler.umd.js:17684
ZoneAwarePromise	@	zone-evergreen.js:876
(anonymous)	@	scheduler.umd.js:17683
fetch	@	scheduler.umd.js:17651
get	@	scheduler.umd.js:17603
loadLocale	@	scheduler.umd.js:34495
(anonymous)	@	scheduler.umd.js:34465
ZoneAwarePromise	@	zone-evergreen.js:876
applyLocale	@	scheduler.umd.js:34464
set	@	scheduler.umd.js:34515
ngAfterViewInit	@	service-calls.component.ts:98  (this is my code)
callProviderLifecycles	@	core.js:32328
callElementProvidersLifecycles	@	core.js:32293
callLifecycleHooksChildrenFirst	@	core.js:32275
checkAndUpdateView	@	core.js:44281
callViewAction	@	core.js:44637
execEmbeddedViewsAction	@	core.js:44594
checkAndUpdateView	@	core.js:44272
callViewAction	@	core.js:44637
execComponentViewsAction	@	core.js:44565
checkAndUpdateView	@	core.js:44278
callWithDebugContext	@	core.js:45632
debugCheckAndUpdateView	@	core.js:45194
detectChanges	@	core.js:31126
tick	@	core.js:41045
(anonymous)	@	core.js:40893
invoke	@	zone-evergreen.js:359
onInvoke	@	core.js:39699
invoke	@	zone-evergreen.js:358

[pmiklashevich]

Setting locale calls applyLocale under the hood. Docs of applyLocale says:

If it is not loaded it will be loaded using ajax and then applied.

        if (!localeConfig.locale) {
            return new Promise((resolve, reject) => {
                me.loadLocale(localeConfig.path).then(response => {

So if

bryntum.query('scheduler').localeManager.locales['SvSE'].locale

is not true, then it tries to load it.
Please check this value in console. Note, bryntum.query('scheduler') is your schedulerEngine.

[lajoj]

Hello!
The bryntum object is not available. Where do I import that from?

[pmiklashevich]

bryntum.query('scheduler')

is what works in our demos in console. You can replace it with

this.scheduler.schedulerEngine

in your code.
In your application you can create a global reference to schedulerEngine to be able to reach it in console.

[lajoj]

I can see that both En and SvSE exists in the locales, but the locales['SvSE'].locale is undefined.

[pmiklashevich]

Could you please submit a runnable testcase so we can try to help you to investigate it?

[lajoj]

I have tried the examples/localization and there it works. Then I have just copied the locale code to my project.
The only difference is that the example is angular-7 and my application is angular-8.
Could that be a reason?
I also wonder about the fact that bryntum-angular-shared is compiled in angular-7. Is there a point to upgrade the wrapper to angular-8?

[sergey.maltsev]

Hi!

Angular version shouldn't affect on this.

Try setting locale in ngAfterViewInit when scheduler instance is available.
You could try this code in basic angular/basic demo

examples/angular/basic/src/app/app.component.ts

import { Component, ViewChild, AfterViewInit } from '@angular/core';
import schedulerConfig from './schedulerConfig';
import {SchedulerComponent} from "bryntum-angular-shared";

// Enable locales

import EnLocale from 'bryntum-scheduler/locales/scheduler.locale.En.js';
import SvSELocale from 'bryntum-scheduler/locales/scheduler.locale.SvSE.js';
import { LocaleManager } from 'bryntum-scheduler/scheduler.umd.js';

// register locales
LocaleManager.registerLocale('En', { locale : EnLocale });
LocaleManager.registerLocale('SvSE', { locale : SvSELocale });


@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.scss']
})
export class AppComponent implements AfterViewInit {
    title = 'basic';
    schedulerConfig = schedulerConfig;

    @ViewChild('scheduler') scheduler : SchedulerComponent;

    ngAfterViewInit(): void {
        this.scheduler.schedulerEngine.localeManager.locale = 'SvSE';
    }

}