ngx-translate
MissingTranslationHandler wrongly triggered
Current behavior
When i got this:
<div translate>translation_key</div>
with the translation
translation_key: "Welcome to our app"
The MissingTranslationHandler is triggered with the key "Welcome to our app". So it looks like the key is translated twice and the second time it uses the translation for the lookup.
When I change the code to :
<div translate="translation_key"></div>
then the MissingTranslationHandler is not triggered.
How do you think that we should fix this?
probably best to store the original that is inside the tag, and reuse that (for example when language changes)
Environment
ngx-translate version: ~10.0.2
Angular CLI: 6.0.8
Angular: 6.0.7
Node: 8.11.2
Browser:
- [x] Chrome (desktop) version 67
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX
For Tooling issues:
- Node version: 8.11.2
- Platform: Mac
Having this same behavior on a large scale application after updating to latest.
I was able to fix this locally by modifying the installed code for the translate directive to maintain the key once it had found it as such:
if (trimmedContent.length) {
// we want to use the content as a key, not the translation value
if (content !== node.currentValue) {
key = trimmedContent;
// the content was changed from the user, we'll use it as a reference if needed
node.originalContent = this.getContent(node);
} else if (node.originalContent && forceUpdate) { // the content seems ok, but the lang has changed
node.lastKey = null;
// the current content is the translation, not the key, use the last real content as key
key = node.originalContent.trim();
}
}
this.key = key; <-- added this to the after the directive searches for they key.
This code snippet is from translate.directive.ts line 80-91 - starting if block
Then subsequent calls to checkNodes had the original key and didn't run the snippet through the missing translation handler.
This was a quick and dirty fix to make it work and may not be the best solution but it is a solution that worked.
If I have time I would be more than happy to create a PR for this as a fix if it is deemed a proper fix which would in turn save me from a headache of updating all instances of the translate directive in the current app I am working in.
The other option is that the way our application is built is causing the ngAfterViewChecked life cycle hook to run multiple times incorrectly leading to this bad behavior.
Having the same issue after updating to [email protected] @ngx-translate/[email protected] @ngx-translate/[email protected]
The problem appears when there is a line break or a space in markup. Causes the MissingTranslationHandler call: <b translate> foo </b>
Works fine: <b translate>foo</b>
So it's probably a duplicate of: https://github.com/ngx-translate/core/issues/906
Minimal reproduction of the problem: https://stackblitz.com/edit/github-ngx-translate-904-qmbro2?file=src%2Fapp%2Fapp.component.ts
Having a issue after updating to [email protected] @ngx-translate/[email protected] @ngx-translate/[email protected]
The problem appears when i use the translate.use to change the language,It don't work:
<b translate>
foo
</b>
Works fine:
<b translate>foo</b>
But when I use the @ngx-translate/[email protected] @ngx-translate/[email protected],
<b translate>
foo
</b>
was fine
I don't know, what parameters do I need to configure?
@kykint yes, there is a workaround, have a look at my initial post:
When I change the code to :
<div translate="translation_key"></div>
then the MissingTranslationHandler is not triggered.
The difference between 10.0.0 and 10.0.2 is in those lines:
let content = this.getContent(node).trim();
if (content.length) {
// we want to use the content as a key, not the translation value
if (content !== node.currentValue) {
let content = this.getContent(node);
let trimmedContent = content.trim();
if (trimmedContent.length) {
// we want to use the content as a key, not the translation value
if (content !== node.currentValue) {
trimmed value was compared to node.currentValue and now original value is compared but trimmed is the key
"@angular/core": "~7.1.4"
"@ngx-translate/core": "^11.0.1"
"@ngx-translate/http-loader": "^4.0.0"
It's working with
"@angular/core": "~7.1.4"
"@ngx-translate/core": "^10.0.0"
"@ngx-translate/http-loader": "^3.0.1"
and again not in
"@angular/core": "~7.1.4"
"@ngx-translate/core": "^10.0.1"
"@ngx-translate/http-loader": "^3.0.1"
Looks like following commit #819 introduced problem
It's also impacted the change-detection execution performance - ngAfterViewChecked of Translate directive triggers in a cycle. Unfortunately, we can't use the provided workaround in all cases since we have a prettier max-line-length option which prevents us from having the expression in one line.
Btw, provided workaround doesn't work with the latest @ngx-translate/core ^12.1.0
