Bug: Unable to find key in `{{ ('key' | transloco) + 'x' }}`

[AbdealiLoKo]

Is there an existing issue for this?

• I have searched the existing issues

Is this a regression?

No

Current behavior

When I have a template using {{ ('LogIn' | transloco) + 'a' }}
It is not detected by the extract command
When I use: {{ ('LogIn' | transloco) }} - it works

I was not able to create an easy minimal example, but I simply created a folder transloco_testing and added a single file testing.html

$ tree app/transloco_testing/
app/transloco_testing/
└── testing.html

0 directories, 1 file

$ cat app/transloco_testing/testing.html
{{ ('LogIn' | transloco) + 'a' }}

And then ran:

$ ./node_modules/.bin/transloco-keys-manager extract --input app/transloco_testing
Starting Translation File Build 👷🏗

✔ Extracting Template and Component Keys 🗝
ℹ 0 keys were found in 1 file.

              🌵 Done! 🌵

When I now remove the + 'a' the same command gives me 1 key found.

Expected behavior

The key should have been found and added to my en.json file

Please provide a link to a minimal reproduction of the bug

Added in description above

Transloco Config

No response

Debug Logs

$ DEBUG=* ./node_modules/.bin/transloco-keys-manager extract --i
nput app/transloco_testing

🐞 DEBUG - Config:
   Default: {
     input: [ 'app' ],
     output: 'assets/i18n',
     langs: [ 'en' ],
     marker: 't',
     sort: false,
     defaultValue: undefined,
     replace: false,
     addMissingKeys: false,
     emitErrorOnExtraKeys: false,
     translationsPath: 'assets/i18n'
   } +0ms
   Transloco file: {
     sort: true,
     addMissingKeys: true,
     defaultValue: '',
     translationsPath: 'src/assets/i18n/',
     langs: [ 'en' ]
   } +2ms
   Inline: { input: [ 'app/transloco_testing' ], command: 'extract' } +0ms
   Merged: {
     input: [ 'app/transloco_testing' ],
     output: 'assets/i18n',
     langs: [ 'en' ],
     marker: 't',
     sort: true,
     defaultValue: '',
     replace: false,
     addMissingKeys: true,
     emitErrorOnExtraKeys: false,
     translationsPath: 'src/assets/i18n/',
     command: 'extract'
   } +0ms

🐞 DEBUG - Configuration Paths:
   Input: [
     '/home/abdealijk/project/src/app/transloco_testing'
   ] +0ms
   Output: '/home/abdealijk/project/src/assets/i18n' +0ms
   Translations: '/home/abdealijk/project/src/src/assets/i18n' +0ms

🐞 DEBUG - Scopes:
   Scopes map: {} +0ms

Starting Translation File Build 👷🏗

⠋ Extracting Template and Component Keys 🗝
🐞 DEBUG - Extracting keys:
   file: '/home/abdealijk/project/src/app/transloco_testing/testing.html' +0ms
   fileType: 'html' +0ms
✔ Extracting Template and Component Keys 🗝
ℹ 0 keys were found in 1 file.

              🌵 Done! 🌵

Please provide the environment you discovered this bug in

Transloco: 4.0.0
Transloco Keys Manager: 3.3.5
Angular: 11.2.14
Node: 16.13.2
Package Manager: npm 8.1.2
OS: Windows 10 + Ubuntu 18.04 WSL2

Additional context

No response

I would like to make a pull request for this bug

No

[AbdealiLoKo]

The workaround which I am using now is:
{{ 'LogIn {{a}}' | transloco:{a: 'a'} }}
And that works

But it would be great if the extract can handle this or show a warning in such cases so that it is clear that will not be extracted

[shaharkazaz]

@AbdealiJK, I can add support for the case you are showing. But note that it's not the best practice for translations.

[AbdealiLoKo]

@shaharkazaz completely agree. And I have moved such cases to use the argument approach.
But the only concern I have is that developers may make mistakes and nothing catches them other than a manual review.

So either:

• An eslint rule to ensure we don't use this pattern
• A warning from extract that this will not be extracted
• Or let's just extract it and let developers figure out their best practices

Would be great.

Currently it's silently not being caught - which is my only concern. If I didn't happen to compare it with my ngx-translate extract earlier ... I would not know about it

[shaharkazaz]

@AbdealiJK It's a good thing you migrate responsibly 👍
I agree that silently is not the way to go.
An Eslint rule seems like an interesting idea since you should insert dynamic values into the translation and enforcing It might be a good idea.

I think that ESlint and extraction are unrelated in the sense that Transloco does support this behavior so the extractor should pick up these cases and extract them.

Would you like to open a PR for it? IDK when I'll have the time to get to it 🙂

[AbdealiLoKo]

While I was looking into the AST parser for pipe.extractor - I found that this was not handling some other valid cases.

For example:

• {{ ('sep' | transloco) || ';' }}
• {{ ('abc' | transloco).split('sep' | transloco) }}

Will handle it in my PR