Bug: Entire HTML template ignored when key with {{...}} used

[AbdealiLoKo]

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

[AbdealiLoKo]

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 }}

[shaharkazaz]

@AbdealiJK Why would you use this convention? this is the first time I have seen someone defining keys that way.

[AbdealiLoKo]

I've explained why I define keys like this in jsverse/transloco#555 (comment)

[shaharkazaz]

@AbdealiJK Want to take this? 🙂

[AbdealiLoKo]

@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

[shaharkazaz]

@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.