Cannot convert undefined or null to object at Function.keys

[Sarah Riethmüller]

Hi, 

I would like to use the DateRangePicker and it seems to work fine except the globalization.

It seems to work only if I will call my component which holds the daterangepicker directly over the routing.

When I call the component over an different component (e.g. the dashboard) it gives me the following error:

Cannot convert undefined or null to object

    at Function.keys (<anonymous>)

    at DateRangePickerComponent.CalendarBase.getCultureValues (ej2-calendars.es5.js:233)

    at DateRangePickerComponent.CalendarBase.createContentHeader (ej2-calendars.es5.js:266)

    at DateRangePickerComponent.CalendarBase.createContent (ej2-calendars.es5.js:218)

    at DateRangePickerComponent.DateRangePicker.renderCalendar (ej2-calendars.es5.js:4578)

    at DateRangePickerComponent.DateRangePicker.createCalendar (ej2-calendars.es5.js:4644)

    at DateRangePickerComponent.DateRangePicker.createControl (ej2-calendars.es5.js:4816)

    at DateRangePickerComponent.DateRangePicker.renderControl (ej2-calendars.es5.js:3304)

    at DateRangePickerComponent.DateRangePicker.createPopup (ej2-calendars.es5.js:3300)

    at DateRangePickerComponent.DateRangePicker.show (ej2-calendars.es5.js:5657)

How I can load the modules static? 

In my daterangepicker component I did following:

...

setCulture('de');

declare let require: Function;

@Component({

selector: 'app-bars-chart',

templateUrl: './bars-chart.component.html',

styleUrls: ['./bars-chart.component.scss']

})

...

constructor()

{

loadCldr(

require('../../../../node_modules/cldr-data/main/de/ca-gregorian.json'),

require('../../../../node_modules/cldr-data/main/de/numbers.json'),

require('../../../../node_modules/cldr-data/main/de/timeZoneNames.json')

);

L10n.load({

'de': {

'daterangepicker': {

placeholder: 'Wählen Sie einen Bereich aus',

today: 'heute',

startLabel: 'Wählen Sie Startdatum',

endLabel: 'Wählen Sie Enddatum',

applyText: 'Bestätigen',

cancelText: 'Abbrechen',

selectedDays: 'Ausgewählte Tage',

days: 'Tage',

stomRange: 'benutzerdefinierten Bereich',

startDate: 'Anfangsdatum',

endDate: 'Enddatum'

}

},

'en': {

'daterangepicker': {

placeholder: 'Please select a range',

today: 'Today',

startLabel: 'Choose a start date',

endLabel: 'Choose an date',

applyText: 'Apply',

cancelText: 'Cancel',

selectedDays: 'Selected days',

days: 'Days',

stomRange: 'Stom range',

startDate: 'Start date',

endDate: 'End date'

}

}

});

}

Thanks!

Sarah

[Prem Kumar Madhan Raj]

Hi Sarah,   

   

Thank you for contacting Syncfusion Support.  

   

We have checked your attached code-block and suspect that the issue may be raised because of corresponding culture files may not be loaded in your application properly before the DateRangePicker component is initialized. For your convenience, we have created a simple sample by rendering the DateRangePicker as a custom component and attached in the below link.  

   

Sample Link: https://plnkr.co/edit/pVyDxeVMhppAg9L5XuSo?p=preview    

   

In the above sample, we have used the setculture method to globally set the culture of the component within the ngOnInit function, such that the required culture files will be loaded before changing the culture of the component. Also, refer to the attached documentation link for more details about Internationalization:   

   

Documentation : https://ej2.syncfusion.com/angular/documentation/daterangepicker/globalization.html    

   

   

To know more about setCulture method, please refer the below documentation link.   

  

LINK: https://ej2.syncfusion.com/aspnetcore/documentation/base/localization.html#changing-current-locale   

     

   

Regards,   

Prem Kumar M 

[Sarah Riethmüller]

Thank you really much! Works like charm

[Prem Kumar Madhan Raj]

Hi Sarah, 

Most welcome. Please let us know if you need further assistance. 

Regards, 

Prem Kumar M

[Luiz Felipe Brito]

Hi guys.

I'm getting the same problem Sarah mentioned. I performed the step by step of the 03 links above, informed by Kumar.

When checking the sample project, present in the link https://next.plnkr.co/edit/hLpLfm8axkCoQltU? Preview, I noticed that in my project there is no file "systemjs.config.js". Could this influence the process of internationalization?

Another problem is that the following code snippet in my component class gives compile error:

import * as numberingSystems from '../numberingSystems.json';

import * as gregorian from '../ca-gregorian.json';

import * as numbers from '../numbers.json';

import * as detimeZoneNames from '../timeZoneNames.json';

import { secondaryComponent } from './secondary.component';

loadCldr(numberingSystems, gregorian, numbers, detimeZoneNames);

What verification should I make?

 I'm using angular 4.4.7.

[Shameer Ali Baig Sulaiman Ali Baig]

Hi Luiz, 

  

We have validated your query on EJ2 DateRangePicker. No, system.config.js file has no influence on globalizing the EJ2 DateRangePicker component. We suspect the CLDR data files might not be loaded properly in your application. We have prepared sample with DateRangePicker globalized in ‘de’ culture in an Angular CLI application which has no system.config.js file.  

Please, download the sample from the below link. 

  

http://www.syncfusion.com/downloads/support/directtrac/general/ze/syncfusion-1533507508   

After, extracting the application run npm install from root directory to install all the dependent files into the node_modules directory. Then, run npm run start to launch the application in the browser. 

 

Please, follow the below links to know more about EJ2 DateRangePicker component. 

Documentation: https://ej2.syncfusion.com/angular/documentation/getting-started/getting-started.html#getting-started-with-angular-cli  

  

https://ej2.syncfusion.com/angular/documentation/daterangepicker/globalization.html  

 

Please, let us know if you need further assistance. 

Regards, 

Shameer Ali Baig S. 

[Jiri Richter]

I can confirm that using setCulture() globally instead of using locale attribute on a component resolved the issue of CLDR not being loaded in time for the component (which resulted in various errors depending on which EJ2 component I tried to render localized).

It was important to actually remove the locale attribute from the component, not just adding setCulture() call.

I am using version 17.3.28 of syncfusion packages and have encountered the issue mainly on ejs-recurrenceeditor component of the Schedule package.

[Jiri Richter]

Oh, sorry, I have to take it back. The component doesn't throw an error, but it also isn't localized at all.

[Jiri Richter]

OMG I finally found out what was causing this issue.

The Schedule component has in its dependencies its own @syncfusion/ej2-base package (ie. @syncfusion/ej2-schedule/node_modules/@syncfusion/ej2-base), which is different from the @syncfusion/ej2-base package available in the root of your node_modules.

So if you load CLDR data with the loadCldr() function imported from the root ej2-base package, it will not be available to the Schedule component.

So what you have to do is import your locale functions as

import { setCulture, loadCldr, L10n } from '@syncfusion/ej2-schedule/node_modules/@syncfusion/ej2-base'

instead of 

// import { loadCldr, L10n, setCulture } from '@syncfusion/ej2-base'

[Vinitha Devi Murugan]

Hi Sarah, 

 

Thanks for your update. 

 

We suspect that some duplicate packages might be installed in your ‘@syncfusion’ folder of ‘node_modules’. Please follow the below steps to overcome the reported behavior.  

 

1. Delete package.lock.json file from your application.  

2. Remove the @syncfusion package folder from the node_modules.  

3. Use same version for all components in package.json file.  

4. Then install the new packages.  

UG Link: https://ej2.syncfusion.com/angular/documentation/common/how-to/update-npm-package/ 

 

Please refer below image with proper folder structure.  

 

 

 

If you still facing the same problem, kindly share your sample (if possible) to proceed further.  

 

Regards, 

M.Vinitha devi 

[Jiri Richter]

Hi, I have finally come to the same conclusion. There was a ej2-base package inside the ejs-scheduler package for me, which was a duplicate for the root ej2-base. Each had its own locale set. So deduping enabled me to share the locale settings through one ej2-base package.

God npm is awful.

[Vengatesh Maniraj]

Hi Sarah, 

Thanks for the update. 

We are happy that your problem has resolved. 

Kindly revert us for further assistance. 

Regards, 

Vengatesh 

[Paul]

I'm getting this error in react with latest version 20.4.39 of schedule component after just upgrading.

We haven't used setCulture before, is that a requirement even just using 'en'

[Ravikumar Venkatesan]

Hi Paul,

We have validated your query “I'm getting this error in react with latest version 20.4.39 of schedule component after just upgrading” at our end. We suspect that some duplicate packages might be installed in your ‘@syncfusion’ folder of ‘node_modules’ while upgrading to the latest version. So, we suggest you do the following steps to resolve the problem.

1. Delete the package.lock.json file from your application.

2. Remove the @syncfusion package folder from the node_modules.

3. Use the same version for all Syncfusion components in the package.json file.

4. Then install the new packages.

UG Link: https://ej2.syncfusion.com/react/documentation/common/how-to/update-npm-package/

If you still facing the same problem kindly share the issue reproducing sample if possible it will help us to provide the solution for your problem earlier.

Regards,

Ravikumar Venkatesan