Overview
Before 19.2, DevExpress Web Dashboard imported the Globalize modules to format dates, numbers, and currencies.
Starting from 19.2, Web Dashboard better integrates with DevExtreme and enables you to choose whether to localize date, number and currency values using Intl or Globalize. We recommend you use Intl, but you can continue using Globalize.
Note that one of the internationalization and localization provider (Intl or Globalize) is required for the Web Dashboard control to provide correct number formating.
Changes
- The Web Dashboard uses Intl as a default library.
- The Web Dashboard does not import the
devextreme/localization/globalize/*
modules. - The dependencies of the
devexpress-dashboard
package are changed:globalize
anddevextreme-cldr-data
are removed.
Motivation
Intl is a short name used to refer to a particular ECMAScript Internationalization API object.
Globalize is an open source JavaScript library for internationalization and localization that leverage the official Unicode CLDR JSON data.
Intl has several advantages over Globalize:
- Intl is a part of ECMAScript standard. You do not need to add any extra language resources to your page. In case of Globalize, you need to load
cldr-data
. - Intl is easier to configure. (See documentation).
- You do not need to patch the tsconfig.json / config-overrides.js / webpack.config files to enable Globalize in a modular application.
Affected platforms
Changes affect only modular approach.
Changes does not affect ASP.NET Web Forms, ASP.NET MVC, and ASP.NET Core platforms.
Changes do not affect your application, if you use the approach with global namespaces for HTML JavaScript control and Globalize scripts are included into your html page. In this case, you can choose whether to use Intl or Globalize in your application.
Migration Guide
For modular approach, when you migrate from 19.1 to 19.2, you need to perform the following changes to start using Intl instead of Globalize.
Switch to Intl (recommended):
- Remove the following lines if they are present in your code:
JavaScriptimport "devextreme/localization/globalize/message";
import "devextreme/localization/globalize/number";
import "devextreme/localization/globalize/currency";
import "devextreme/localization/globalize/date";
- Replace the
Globalize.locale
method with the following code:
JavaScriptimport { locale } from 'devextreme/localization';
// ...
export class DashboardComponent implements AfterViewInit, OnDestroy {
private dashboardControl!: DashboardControl;
constructor(private element: ElementRef) {
// ...
// Apply your culture:
locale('de');
}
- Remove
Globalize.load
and code associated with them. - Remove the Globalize integration from the tsconfig.json (
compilerOption.paths
) or config-overrides.js(config.resolve.alias
) files.
You can continue to use Globalize, but we do not recommend this approach.
Continue to Use Globalize
In 19.2, Globalize should be globally initialized in the application before 'devexpress-dashboard' is used:
- Install the following packages (for Global Namespaces and Modular approaches):
Codenpm install globalize@^1.0.1 devextreme-cldr-data@^1.0.2
- Import the
globalize
libraries beforedevexpress-dashboard
is used (only for the Modular approach):
JavaScriptimport "devextreme/localization/globalize/message";
import "devextreme/localization/globalize/number";
import "devextreme/localization/globalize/currency";
import "devextreme/localization/globalize/date";
import * as Globalize from 'globalize';
import { DashboardControl, ResourceManager } from 'devexpress-dashboard';