Problem with locale fr

[Abdellatif BIGANE]

Hi, i'm using "@syncfusion/ej2-angular-calendars": "~19.4.56"  and angular 8.3.22,

I want to set locale in 'fr', But got an error message like 'ERROR TypeError: Cannot convert undefined or null to object'. I installed 'cldr-data', and here is my code.

i tried also follow the steps below:

•  Delete the node_modules and package-lock.json file 
• Clear the NPM cache with help of “npm cache clean --force”.
•    Run the “npm install” command to install the package. 
•    Then run “npm dedupe” command to remove the duplicate packages. 

I already done with removing my node_modules and reinstall, but still having a same issue.

here is my code:

import { Component, OnInit } from "@angular/core";

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

import * as gregorian from 'cldr-data/main/fr/ca-gregorian.json';

import * as numbers from 'cldr-data/main/fr/numbers.json';

import * as timeZoneNames from 'cldr-data/main/fr/timeZoneNames.json';

import * as numberingSystems from 'cldr-data/supplemental/numberingSystems.json';

import * as weekData from 'cldr-data/supplemental/weekData.json';

loadCldr(numberingSystems, gregorian, numbers, timeZoneNames, weekData);

@Component({

  selector: 'wz-dateTimePicker',

  template: `<ejs-datetimepicker [value]='dateValue' placeholder='Enter date' [min]='minDate' [max]='maxDate' locale='fr'></ejs-datetimepicker>`

})

export class DateTimePickersComponent implements OnInit {

  public today: Date = new Date();

  public currentYear: number = this.today.getFullYear();

  public currentMonth: number = this.today.getMonth();

  public currentDay: number = this.today.getDate();

  public currentHour: number = this.today.getHours();

  public currentMinute: number = this.today.getMinutes();

  public currentSecond: number = this.today.getSeconds();

  public date: Date = new Date(new Date().setDate(14));

  public maxMonth = this.currentMonth == 12 ? 1 : this.currentMonth + 1;

  public maxYear = this.currentMonth == 12 ? this.currentYear + 1 : this.currentYear;

  public minDate: Date = new Date(this.currentYear, this.currentMonth, this.currentDay, this.currentHour, this.currentMinute);

  public maxDate: Date = new Date(this.maxYear, this.maxMonth, this.currentDay, this.currentHour, this.currentMinute, this.currentSecond);

  dateValue = this.minDate;

  ngOnInit(): void {

    L10n.load({

      'fr': {

        datetimepicker: {

          placeholder: "Sélectionnez la date et l'heure",

          today: "Aujourd'hui"

        }

      }

    });

  }

  constructor() { }

}

Hope to get an answer soon!

Thanks.

 

[Kokila Poovendran]

Hi Abdellatif BIGANE,

Thank you for reaching out to us. We have thoroughly reviewed your requirement and have prepared a sample specifically tailored to display content in the French culture. To achieve this, we recommend loading the locale JSON file into your application. This will enable you to configure the locale settings and ensure the smooth functioning of your application.

Please find the code snippet below, which demonstrates how to load the locale JSON file:

Code snippet :

loadCldr(

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

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

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

      require('cldr-data/main/fr/currencies.json'),

      require('cldr-data/main/fr/timeZoneNames.json'),

  );

 

@Component({

  selector: 'app-root',

  template: `<ejs-datetimepicker [value]='dateValue' placeholder='Enter date' [min]='minDate' [max]='maxDate' locale='fr'></ejs-datetimepicker>`

 

})

export class AppComponent implements OnInit {

  constructor() {

  }

 

  public today: Date = new Date();

  public currentYear: number = this.today.getFullYear();

  public currentMonth: number = this.today.getMonth();

  public currentDay: number = this.today.getDate();

  public currentHour: number = this.today.getHours();

  public currentMinute: number = this.today.getMinutes();

  public currentSecond: number = this.today.getSeconds();

  public date: Date = new Date(new Date().setDate(14));

  public maxMonth = this.currentMonth == 12 ? 1 : this.currentMonth + 1;

  public maxYear = this.currentMonth == 12 ? this.currentYear + 1 : this.currentYear;

  public minDate: Date = new Date(this.currentYear, this.currentMonth, this.currentDay, this.currentHour, this.currentMinute);

  public maxDate: Date = new Date(this.maxYear, this.maxMonth, this.currentDay, this.currentHour, this.currentMinute, this.currentSecond);

  dateValue = this.minDate;

  ngOnInit(): void {

      // Load `German` culture to override spin buttons tooltip text

      L10n.load({

          'fr': {

          'datetimepicker': {

                placeholder: "Sélectionnez la date et l'heure",

                today: "Aujourd'hui"

              }

         }

      });

  }

}

 

Video reference: 

Attachment: esculture_315b2018.zip

[Abdellatif BIGANE]

Hi,

your sample worked for me, however i tried the same steps in my application, but still not working for me, below the errors that i obtain:

1 ERROR TypeError: Cannot convert undefined or null to object

2 ERROR Format options or type given must be invalid

Error: Format options or type given must be invalid

i noticed that in your sample are u using angular 14 and in my application am using angular 8, so am asking if there is not a problem of angular version??

Thanks

 "@angular-builders/custom-webpack": "^16.0.0",

    "@angular-devkit/build-angular": "~0.803.22",

    "@angular/cli": "^8.3.22",

    "@angular/compiler-cli": "^8.2.14",

"@syncfusion/ej2-angular-base": "~19.2.55",

    "@syncfusion/ej2-angular-buttons": "~19.2.55",

    "@syncfusion/ej2-angular-calendars": "~19.3.53",

    "@syncfusion/ej2-angular-charts": "~19.2.57",

[Kokila Poovendran]

Hi Abdellatif BIGANE,

For Angular version below 12, you can use the legacy (ngcc) package of the Syncfusion Angular components. Kindly refer the bellow documentation.

Documentation link: https://ej2.syncfusion.com/angular/documentation/datetimepicker/getting-started#angular-compatibility-compiled-packagengcc

[Abdellatif BIGANE]

Hi,

I tried this version too, but i still get the same issue when i start adding locale='fr' for translation

    "@syncfusion/ej2-angular-calendars": "20.2.38-ngcc",

as u can see below all files exists and correctly loaded, to avoid any doubt i copied them in the same location of the component, 

but still get the same error:

can you send me a sample with angular 8, in order to compare with my app? 

Hope to get an answer soon!

thanks.

[Kokila Poovendran]

Hi Abdellatif BIGANE,

We understand that you have tried version 20.2.38-ngcc and even copied the necessary files in the component's location to ensure correctness. However, we apologize for any inconvenience caused by the persistent error.

In order to assist you better, we have prepared a sample with the Angular 8 version. Please find the sample at the following link: 

Sample: https://stackblitz.com/edit/angular-test-custom-location-2uap4n?file=src%2Fapp%2Fapp.module.ts,src%2Fapp%2Fapp.component.scss,src%2Fapp%2Fcldr-data%2FtimeZoneNames.json,src%2Fapp%2Fcldr-data%2FnumberingSystems.json,src%2Fapp%2Fcldr-data%2Fca-gregorian.json,src%2Fapp%2Fcldr-data%2Fnumbers.json,src%2Fapp%2Fapp-routing.module.ts,src%2Fapp%2Fcldr-data%2Fcurrencies.json,src%2Fapp%2Fapp.component.ts,src%2Fapp%2Fapp.component.spec.ts

Please try out the sample and see if it works as expected in your environment. If the issue persists, we kindly request you to provide us with the following details to further investigate and find a suitable solution:

• A reproducible sample: If possible, modify the provided sample to reflect your scenario, or create a new sample that demonstrates the issue.

[Abdellatif BIGANE]

Hi,

Thank you, i tried the version ngcc of calendar like your last sample, and that work for me, hower particulary with this version i get the message below of license even we already had one (a valid licence), so how can you help us to fixe that,

Thank you.

[Kokila Poovendran]

Hi Abdellatif BIGANE

We have evaluated the issue you have reported and understand that you are facing difficulties while registering the license in your application. Please ensure that you are using the same major version for all Syncfusion components. Our Syncfusion licenses are version-specific, and if multiple versions of our components are used in the same application, it can create version conflicts. Therefore, please make sure that you use the same version for all Syncfusion components.

 

Also, we suspect that you have been utilizing two different packages for Syncfusion controls like for example (22.X.XX-ngcc) and (22.X.XX). If you want to utilize the Syncfusion components for Angular version below 12 it is mandatory to add the ngcc tag for all Syncfusion components referring in the package.json file like "@syncfusion/ej2-angular-buttons": "22.X.XX-ngcc". For Angular version above 12 you can refer the packages without ngcc tag. So, please make sure on using same packages for all controls since Syncfusion controls are version specific we cannot utilize different packages in same project this will create a conflict at your end.

 

Additionally, If you are utilizing packages with (ngcc) support, please ensure that you have removed the caret(^) and Tilde (~) symbol used before the versions of the Syncfusion packages, because when you try to use caret(^) or Tilde (~) symbol for ngcc packages it will refer the packages without the ngcc support and this will create an conflict at your end

 

 

Kindly ensure that you have followed the below steps once changes are done.

 

• Delete the @Syncfusion folder from node_modules and the package-lock.json file from the root folder.

• Clear npm cache at your end.

• Update our packages to the same major version. For example, if your utilizing version like (i.e. v21.1.XX) use the same version for all the Syncfusion components in the package.json file.

• Remove the caret (^) and Tilde (~) symbol before the version number (e.g., "@syncfusion/ej2-angular-buttons": "22.X.XX-ngcc").

 

• Run the "npm install” command to install the packages.

 

Please refer our below documentation licensing FAQ's

 

Link:  https://ej2.syncfusion.com/angular/documentation/licensing/licensing-troubleshoot#potential-causes-of-licensing-errors-in-applications

 

If the issue still persists, kindly share the package.json file, so that we can provide a prompt solution.