5

I'm trying to use the internationalization features of Syncfusion EJ2 in Angular-Cli with WebPack, which is problematic because all the documentation uses SystemJs.

In particular I'm trying to use this sample

import { L10n, loadCldr, setCulture, setCurrencyCode } from '@syncfusion/ej2-base';
import * as currencies from './currencies.json';
import * as cagregorian from './ca-gregorian.json';
import * as numbers from './numbers.json';
import * as timeZoneNames from './timeZoneNames.json';
import * as numberingSystems from './numberingSystems.json';
import { Component, OnInit } from '@angular/core';
import { data } from './datasource';

loadCldr(currencies, cagregorian, numbers, timeZoneNames, numberingSystems);

setCulture('de-DE');
setCurrencyCode('EUR');

I tried but could not make it to work, I'm stuck on this error:

 Cannot find module './numberingSystems.json'

Which changes should I make to the sample?

Jason Aller
  • 3,541
  • 28
  • 38
  • 38
James Gordon
  • 135
  • 1
  • 5

1 Answers1

9

In order to import the json files in the typescript, we need to include the json type in the wildcard card module declaration( https://www.typescriptlang.org/docs/handbook/modules.html#wildcard-module-declarations ). Use the below declaration code in the typings.d.ts file to resolve the compilation issue.

declare module "*.json" {
  const value: any;
  export default value;
}

Note: You can also use the cldr json files by installing the npm package cldr-data. This package contains all cultures json files.

Mydeen sn
  • 161
  • 3
  • Now works as expected, thanks. I installed the clrd-data package, I'm importing the files this way import * as numbers from '../../node_modules/cldr-data/main/es-AR/numbers.json'; There is a "better" way? – James Gordon Sep 15 '17 at 11:20
  • The JSON files can also imported be using require as mentioned in the below snippet. loadCldr(require('../../node_modules/cldr-data/main/de/numbers.json')); For using the require in the anguar-cli app we need to declare the require in typings.d.ts file as below snippet declare var require: any; – Mydeen sn Sep 18 '17 at 08:48