Bug: Entire HTML template ignored when key with `{{...}}` used
AbdealiLoKo opened this issue · 7 comments
Is there an existing issue for this?
- I have searched the existing issues
Is this a regression?
No
Current behavior
When I was running transloco-keys-manager extract
- I found that some of my .html files were being skipped and keys from those html files were not being extracted into my en.json file.
I tried a bunch of variations and finally found:
Scenario 1: Use transloco with a {{
in the key
Result: 0 keys found ... expected 2 keys to be found
{{ '{{count}} items' | transloco:{ count: item.usageCount } }}
{{ 'key2' | transloco }}
Scenario 2: Use transloco with a {
in the key
Result: 2 keys found
{{ '{count} items' | transloco:{ count: 0 } }}
{{ 'key2' | transloco }}
Scenario 3: Use transloco with {{
in key + without a dict as the argument
Result: 2 keys found
{{ '{{count}} items' | transloco:1 }}
{{ 'key2' | transloco }}
Scenario 4: Use transloco with {{
in key + add as attribute in a tag
Result: 2 keys found
<a [title]="'{{count}} items' | transloco:{ count: 0 }"></a>
{{ 'key2' | transloco }}
Expected behavior
All the keys should have been found and added to my en.json file
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
{{ '{{count}} items' | transloco:{ count: item.usageCount } }}
{{ 'key2' | transloco }}
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! 🌵
Please provide a link to a minimal reproduction of the bug
Described above
Transloco Config
No response
Debug Logs
No response
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
Interestingly, this happens even when I use the directive *transloco
:
Scenario 5: Use transloco directive + {{ in key
Result: 0 keys found ... expected 2 keys
<a *transloco="let t">{{ t('{{count}} items', {count: 1}) }}</a>
{{ 'key2' | transloco }}
Scenario 6: Use transloco directive + {{ in key + without a hashmap as argument
Result: 2 keys found
<a *transloco="let t">{{ t('{{count}} items', 1) }}</a>
{{ 'key2' | transloco }}
@AbdealiJK Why would you use this convention? this is the first time I have seen someone defining keys that way.
I've explained why I define keys like this in jsverse/transloco#555 (comment)
@AbdealiJK Want to take this? 🙂
@shaharkazaz I tried looking into it briefly - and I found that the issue was from the angular parseTemplate
:
https://github.com/ngneat/transloco-keys-manager/blob/v3.4.1/src/keys-builder/template/utils.ts#L85
So, first issue I feel is that when parseTemplate
has an error today - we are not showing that to the user currently and silently skipping it.
The error coming in was that the {{
was not escaped correctly.
I checked that in angular 12 - the above syntax would give you a SyntaxError when doing a ng build
But in angular 13 - it works fine
Looks like we would need to upgrade the angular compiler version to 13 - and I wasn't sure if that was something we should be doing or not
@AbdealiJK Nice summary 🔥
So, first issue I feel is that when parseTemplate has an error today - we are not showing that to the user currently and silently skipping it.
I think you are correct and we need to inform you that a parsing error has occurred within a certain file and log it, but it should continue with the processing.
Looks like we would need to upgrade the angular compiler version to 13 ...
I don't have any objection to upgrading the compiler to v13.
We can release it as a new major version.