Internationalization in Syncfusion Ej2 with WebPack

Question

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

In particular, I am trying to use this sample http://plnkr.co/edit/4uA2rb0Q2FrLLK6V4sne

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 get it to work, I was stuck with this error: Cannot find the module. /numberingSystems.json '

What changes should be made to the sample?

Answer 1

To import json files into typescript, we need to include the json type in the declaration of the wildcard module ( https://www.typescriptlang.org/docs/handbook/modules.html#wildcard-module-declarations ). Use the ad code below in the typings.d.ts file to solve the compilation problem.

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

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