Localization - No translation found warning

[Attila]

Hi,

I use MessageService for translation Kendo components, it works properly, but for some reason after the application starts, 'No-translation found for ...' warnings appear in the console.

combobox.component.html:3 No translation found for "7708502966028483300" ("NO DATA FOUND" - "kendo.combobox.noDataText").
combobox.component.html:3 No translation found for "2025597431468961462" ("clear" - "kendo.combobox.clearTitle").

I use Nx(21.4.1) monorepo with Angular (20.1.8) and Kendo (20.0.3).

How can I solve the issue so that the warnings don't appear?

Thanks!

export const translations: () => Record<string, string> = () => ({
  'kendo.textbox.clear': $localize`:@@component_textbox_clear:Törlés`,
  'kendo.label.optional': $localize`:@@component_label_required:Kötelező`,
  'kendo.combobox.noDataText': $localize`:@@component_combobox_noDataText:Nincs találat`,
  'kendo.combobox.clearTitle': $localize`:The title of the clear button.@@component_combobox_clearTitle:Törlés`,
});

import { Injectable } from'@angular/core';
import { MessageServiceasKendoMessageService } from'@progress/kendo-angular-l10n';
import { translations } from'../const/translation';

@Injectable({
  providedIn: 'root',
})
exportclassMessageServiceextendsKendoMessageService {
  publictranslations: Record<string, string> = translations();

  publicoverrideget(key: string): string {
    returnthis.translations[key] ?? key;
  }
}
             

//app.config.ts
export const appConfig: ApplicationConfig = {
  providers: [
         { provide: KendoMessageService, useClass: MessageService },
],
};

[Yanmario]

Hi Attila,

I attempted to reproduce the warnings but was unsuccessful. I will attach an example of my testing. In such cases, it is difficult to determine the cause. Generally, if the translations are working correctly, the warnings can be ignored. Alternatively, you could try using $localize with static translations:

import { Injectable } from '@angular/core';
import { MessageService } from '@progress/kendo-angular-l10n';

const translations: Record<string, string> = {
  'kendo.textbox.clear': 'Törlés',
  'kendo.label.optional': 'Kötelező',
  'kendo.combobox.noDataText': 'Nincs találat',
  'kendo.combobox.clearTitle': 'Törlés',
  'kendo.grid.noRecords': 'No hay datos disponibles.',
};

@Injectable()
export class MyMessageService extends MessageService {
  public override get(key: string): string {
    return translations[key] ?? key;
  }
}

Possible reasons for the warnings might be related to the following:

1. $localize expects translation files - When you use $localize with IDs like :@@component_textbox_clear:, Angular expects to find compiled translation files (.xlf or .json) with those IDs.

2. Not extracted/compiled translations - The warnings show the generated IDs (like "7708502966028483300") because no translation files exist

3. It falls back to the default text - While it uses "Törlés" at runtime, it still logs warnings about missing translations.

I hope this helps.