1. Home
  2. Forum
  3. Angular - EJ 2
  4. Cannot convert undefined or null to object at Function.keys

Cannot convert undefined or null to object at Function.keys

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

13 Replies
PK Prem Kumar Madhan Raj Syncfusion Team July 5, 2018 11:15 AM UTC

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.  
   
   
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:   
   
   
   
To know more about setCulture method, please refer the below documentation link.   
  
     
   
Regards,   

Prem Kumar M 

SR Sarah Riethmüller July 6, 2018 09:20 AM UTC

Thank you really much! Works like charm

PK Prem Kumar Madhan Raj Syncfusion Team July 9, 2018 11:13 AM UTC

Hi Sarah, 

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

Regards, 

Prem Kumar M

LF Luiz Felipe Brito September 12, 2018 08:39 PM UTC

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.

SA Shameer Ali Baig Sulaiman Ali Baig Syncfusion Team September 13, 2018 05:50 PM UTC

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. 
  

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. 

  
 
Please, let us know if you need further assistance. 

Regards, 
Shameer Ali Baig S. 


JR Jiri Richter December 11, 2019 04:24 PM UTC

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.

JR Jiri Richter December 11, 2019 04:26 PM UTC

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

JR Jiri Richter December 12, 2019 12:38 PM UTC

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'


VD Vinitha Devi Murugan Syncfusion Team December 13, 2019 01:29 PM UTC

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.  
 
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 


JR Jiri Richter January 23, 2020 12:47 PM UTC

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.

VM Vengatesh Maniraj Syncfusion Team January 24, 2020 04:43 AM UTC

Hi Sarah, 

Thanks for the update. 

We are happy that your problem has resolved. 

Kindly revert us for further assistance. 

Regards, 
Vengatesh 


PA Paul October 12, 2022 07:05 AM UTC

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'


RV Ravikumar Venkatesan Syncfusion Team October 13, 2022 05:05 PM UTC

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


Loader.
Up arrow icon