We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
close icon

Loading CLDR Data on Runtime to Reduce Build Size


I have observed that cldr-data package is added as a dependency by default. But, can we separate it from main.ts and load it on run-time? Because, the package increases my build size from a couple MBs to 20MB.


1 Reply

JA Jesus Arockia Sankaran S Syncfusion Team November 19, 2018 12:39 PM UTC

Hi Mehmood,  

Thanks for contacting Syncfusion support.  

We suggest you to load cldr files using Ajax post to reduce the bundle size. 

Please find the below code example for your reference. 

//loading locale files 
    'de': { 
        'calendar': { today: 'heute' } 
    "ar": { 
        "calendar": { 
            today: 'اليوم' 
//Function for loading locale files based on culture name 
function loadCultureFiles(name:any) { 
    let files: string[] = ['ca-gregorian.json', 'numbers.json', 'timeZoneNames.json']; 
    if (name === 'ar') { 
     let loadCulture = function (prop:any) { 
        let val:string, ajax: Ajax; 
        if (name === 'ar' && prop === files.length - 1) { 
            ajax = new Ajax( './node_modules/cldr-data/supplemental/' + files[prop], 'GET', false); 
        } else { 
            ajax = new Ajax( './node_modules/cldr-data/main/' + name + '/' + files[prop], 'GET', false); 
        ajax.onSuccess = function (value:any) { 
            val = value; 
    for (let prop = 0; prop < files.length; prop++) { 
For your convenience we have created a typescript application to load cldr files using Ajax and the same can be referred from the below link. 


Please get back to us if you require any further assistance on this.  

Jesus Arockia Sankaran S 

Live Chat Icon For mobile
Up arrow icon