question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

MissingTranslationHandler doesn't fire when a translation is absent from selected language

See original GitHub issue

I’m submitting a … (check one with “x”)

[X] bug report => check the FAQ and search github for a similar issue or PR before submitting
[ ] support request => check the FAQ and search github for a similar issue before submitting
[X] feature request

Current behavior When I have a translation for a tag in one language but not in another, the implementation falls back into the default language.

Expected/desired behavior In my implementation of the interface I make it very obvious to the user that a translation is missing, so that QA can pick it up and we fix it. I would like to have an option for it not to fallback to the default language but to let my handler handle it.

Reproduction of the problem If the current behavior is a bug or you can illustrate your feature request better with an example, please provide the steps to reproduce and if possible a minimal demo of the problem via https://plnkr.co or similar (you can use this template as a starting point: http://plnkr.co/edit/tpl:btpW3l0jr5beJVjohy1Q). http://plnkr.co/edit/DkTJVklO7O6pfLY9IZCB?p=preview

What is the expected behavior? Let me show something other than the default language translation

What is the motivation / use case for changing the behavior? –need to help testers find missing translations

Please tell us about your environment:

  • ng2-translate version: 4.2.0

  • Angular version: 2.2.3

  • Browser: [Chrome 55]

  • Language: [TypeScript 2.0]

Issue Analytics

  • State:closed
  • Created 7 years ago
  • Reactions:3
  • Comments:9 (1 by maintainers)

github_iconTop GitHub Comments

4reactions
MichaelPollacommented, Jul 25, 2017

Since MissingTranslationHelper falls back to the default language translation if there isn’t one in the desired language, and also takes empty strings as valid translations (so it results in blank spaces in app), I overload the TranslatePipe like this (same could be done for TranslateProvider) :

export class CustomTranslatePipe extends TranslatePipe implements PipeTransform {
  transform(key: any, args: any[]): string {
    let result = super.transform(key, args);
    return (result !== "" && result !== key) ? result : "Missing text (" + key + ")";
  }
}
@NgModule({
  declarations: [
    CustomTranslatePipe
  ], ...

This way, if the translation is left empty in the selected language or if it doesn’t exist (no matching key), we get a “Missing text (KEY)” message that helps our teammates in charge of translating our app.

4reactions
JakeSummerscommented, Jun 22, 2017

Also hitting this issue.

I have set:

tranlsateService.setDefaultLang('en');
translateService.use('fr')

My expectation is that when a French String is not found the MissingTranslationHandler would be invoked. This isn’t occurring. The MissingTranslationHandler is only invoked when there is no translation in French or English.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Angular - Missing Translation Handler on condition
1 Answer 1 ; /** * Application won't load until the translations have been downloaded */ export ; initializeTranslations(translationLoadedService: ...
Read more >
ngx-translate Documentation - CodeAndWeb
The default language is used as a fall-back if no translation is found in the currently selected language. use() sets the current language...
Read more >
How to translate your Angular app with ngx-translate
1. Add ngx-translate to your Angular application 2. Set up the TranslateService in your app.module.ts 3. Create your main language translation file (in...
Read more >
@ngx-translate/http-loader - npm package | Snyk
This method allows you to configure the TranslateModule by specifying a loader, a parser and/or a missing translations handler.
Read more >
Angular I18n: How to Internationalize with ngx-translate | Phrase
The ngx-translate library allows us to change the language of the ... to display a language selection dropdown in the navbar of our...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found