Translation is not working (Cannot convert undefined or null to object, FormBase.getCultureValues)

[Dustin Bel]

I want to use the dutch translation for the date picker and time picker. When I set the locale to nl I get the following error:

• ERROR TypeError: Cannot convert undefined or null to object
•     at Function.keys (<anonymous>)
•     at FormBase.getCultureValues (ej2-calendars.es2015.js:291)
•     at FormBase.createContentHeader (ej2-calendars.es2015.js:326)
•     at FormBase.createContent (ej2-calendars.es2015.js:275)
•     at FormBase.createContent (ej2-calendars.es2015.js:2199)
•     at FormBase.render (ej2-calendars.es2015.js:147)
•     at FormBase.render (ej2-calendars.es2015.js:2056)
•     at FormBase.show (ej2-calendars.es2015.js:4162)
•     at FormBase.dateIconHandler (ej2-calendars.es2015.js:3540)
•     at ZoneDelegate.invokeTask

The strange thing is that the ejs-schedule is translating correctly without even setting the locale. 

<ejs-datepicker locale="nl"></ejs-datepicker>
<ejs-schedule></ejs-schedule>

In my app.module.ts

// @ts-ignore
import * as numberingSystems from 'cldr-data/supplemental/numberingSystems.json';
// @ts-ignore
import * as gregorian from 'cldr-data/main/nl/ca-gregorian.json';
// @ts-ignore
import * as numbers from 'cldr-data/main/nl/numbers.json';
// @ts-ignore
import * as timeZoneNames from 'cldr-data/main/nl/timeZoneNames.json';

// Angular CLI 8.0 and above versions
loadCldr(numberingSystems.default, gregorian.default, numbers.default, timeZoneNames.default);

import {L10n, loadCldr, setCulture} from '@syncfusion/ej2-base';
L10n.load({
  nl: {
    calendar: {
      today: 'Heute'
    },
    datetimepicker: {
      placeholder: 'Wählen Sie ein Datum und eine Uhrzeit aus',
      today: 'heute'
    },
    schedule: {
      day: 'Dag',
      week: 'Week',
      workWeek: 'Werkweek',
      month: 'Maand',
      agenda: 'Agenda',
      monthAgenda: 'Maandagenda',
      today: 'Vandaag',
      noEvents: 'Geen evenementen',
      allDay: 'De hele dag',
      start: 'Begin',
      end: 'Einde',
      more: 'meer',
      close: 'Dichtbij',
      cancel: 'Annuleer',
      noTitle: '(Geen titel)',
      delete: 'Verwijder',
      deleteEvent: 'Evenement verwijderen',
      selectedItems: 'Items geselecteerd',
      deleteSeries: 'Serie verwijderen',
      edit: 'Bewerk',
      editSeries: 'Bewerk serie',
      editEvent: 'Gebeurtenis bewerken',
      createEvent: 'creëren',
      subject: 'Onderwerpen',
      addTitle: 'Voeg titel toe',
      moreDetails: 'Meer details',
      save: 'Opslaan',
      editContent: 'Wilt je alleen deze gebeurtenis of hele reeks bewerken?',
      deleteRecurrenceContent: 'Wil je alleen deze gebeurtenis of hele reeks verwijderen?',
      deleteContent: 'Weet je zeker dat je deze afspraak wilt verwijderen?',
      newEvent: 'Nieuw evenement',
      title: 'Titel',
      location: 'Plaats',
      description: 'Beschrijving',
      timezone: 'Tijdzone',
      startTimezone: 'Start tijdzone',
      endTimezone: 'Eindtijdzone',
      repeat: 'Herhaling',
      saveButton: 'Opslaan',
      cancelButton: 'Annuleer',
      deleteButton: 'Verwijder',
      recurrence: 'Herhaling',
      editRecurrence: 'Herhaling bewerken',
      repeats: 'herhalingen',
      alert: 'alarm',
      startEndError: 'De geselecteerde einddatum vindt plaats vóór de startdatum.',
      invalidDateError: 'De ingevoerde datumwaarde is ongeldig.',
      ok: 'OK'
    }
  }
});
setCulture('nl');

As saying earlier, the  ejs-schedule is translated to nl (dutch), while the date picker and time picker is trowing the error.

My system.config.js

/**
 * System configuration for Angular samples
 * Adjust as necessary for your application needs.
 */
(function (global) {
  System.config({
    paths: {
      // paths serve as alias
      'npm:': 'node_modules/',
      "syncfusion:": "node_modules/@syncfusion/", // syncfusion alias
    },
// map tells the System loader where to look for things
    map: {
      // our app is within the app folder
      'app': 'app',

      // angular bundles
      '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
      '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
      '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
      '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
      '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
      '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
      '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
      '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',

      // syncfusion bundles
      "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
      "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
      "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
      "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
      "@syncfusion/ej2-schedule": "syncfusion:ej2-schedule/dist/ej2-schedule.umd.min.js",
      "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
      "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
      "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
      "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
      "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js",
      "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
      "@syncfusion/ej2-angular-base": "syncfusion:ej2-angular-base/dist/ej2-angular-base.umd.min.js",
      "@syncfusion/ej2-angular-schedule": "syncfusion:ej2-angular-schedule/dist/ej2-angular-schedule.umd.min.js",
      "cldr-data": 'npm:cldr-data',
      "plugin-json": "npm:systemjs-plugin-json/json.js",

      // other libraries
      'rxjs':                      'npm:rxjs',
      'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js'
    },
    meta: {
      '*.json': { loader: 'plugin-json' }
    },
// packages tells the System loader how to load when no filename and/or no extension
    packages: {
      app: {
        defaultExtension: 'js',
        meta: {
          './*.js': {
            loader: 'systemjs-angular-loader.js'
          }
        }
      },
      "cldr-data": { main: 'index.js', defaultExtension: 'js' },
      rxjs: {
        defaultExtension: 'js'
      }
    }
  });
})(this);

 

[Deepak Ramakrishnan]

Hi Dustin, 

 

Greetings from Syncfusion support. 

 

 

We suggest you load the culture files using require method as like below code to get rid of the issue at your end . Also you can refer the below documentation for reference. 

 

DatePicker :    https://ej2.syncfusion.com/angular/documentation/datepicker/globalization/  

 

Timepicker : https://ej2.syncfusion.com/angular/documentation/timepicker/globalization/  

 

 

 

 

import { loadCldr } from "@syncfusion/ej2-base"; 

 

declare var require: any; 

 

loadCldr( 

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

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

  require("cldr-data/supplemental/numberingSystems.json"), 

  require("cldr-data/main/de/timeZoneNames.json"), 

  require('cldr-data/supplemental/weekdata.json') // To load the culture based first day of week 

); 

 

 

 

Thanks, 

Deepak R.