Avoid child elements in translation units

[rajsite]

Elements in an angular template with the i18n attribute should not have child elements. For example:

👎 Incorrect code for the rule

<nimble-toggle-button i18n>
    <nimble-thumbtack-icon slot="start"></nimble-thumbtack-icon>
        Pin navigation
</nimble-toggle-button>

👍 Correct code for the rule

<nimble-toggle-button>
    <nimble-icon-thumbtack slot="start"></nimble-icon-thumbtack>
    <span i18n>Pin navigation</span>
</nimble-toggle-button>

Unfortunately, angular eslint does not have a rule for that yet, but there is an existing issue: angular-eslint/angular-eslint#930

For more about why we want to avoid this behavior see this Skyline PR. This is also currently documented on the Angular Internationalization page,

[jattasNI]

One idea to fix this would be to write a custom script (not an ESLint plugin) that scans the extracted XLIFF/JSON strings and fails if it contains any HTML tags. Clients would call that CLI tool from their lint/build script.

Or we could contribute a custom rule in angular-eslint.

[rajsite]

This was contributed as allowMarkupInContent by @m-akinc in angular-eslint/angular-eslint#1795 🎉
And is now just blocked on Angular 18 #157 (which should be adopted soon)

[rajsite]

Removed blocked with Angular 18 merge

[jattasNI]

I spent a bit of time testing this out today. I hit a bug in the rule implementation:

An unhandled exception occurred: Cannot read properties of undefined (reading 'customId')

I think the fix is to check for the i18n variable being undefined before accessing customId in this line of code (i.e i18n?.customId):
https://github.com/angular-eslint/angular-eslint/blob/b55ccf1053b2973be45585f60ed8ed39e90fae6d/packages/eslint-plugin-template/src/rules/i18n.ts#L598

The problem is that the caller of that code assumes the i18n attribute will be present, which is not necessarily true when allowMarkupInContent is false due to this line of code:
https://github.com/angular-eslint/angular-eslint/blob/b55ccf1053b2973be45585f60ed8ed39e90fae6d/packages/eslint-plugin-template/src/rules/i18n.ts#L425

This probably indicates a testing gap in the "valid" set of tests where there aren't any tests setting allowMarkupInContent without an i18n attribute.

Obviously all this should go in the angular-eslint repo but I ran out of time to get up to speed on their bug and contribution policies before the end of the day and wanted to write it down somewhere.

By the way, after applying that fix locally the rule worked well in WebAppHost, TestInsights, and systemlink-lib-angular, catching 4 legit issues with no false positives.

[rajsite]

JIC / FYI @m-akinc see the feedback from Jesse above trying to adopt the new allowMarkupInContent configuration.

[m-akinc]

I have a PR up into angular-eslint to fix the issue. Once it is merged, I'll put up a PR to update the dependency version so we get the fix.