fix(eslint-plugin-template): [prefer-self-closing-tags] do not remove HTML-encoded whitespace (#2229)

Author: reduckted

packages/eslint-plugin-template/docs/rules/prefer-self-closing-tags.md

@@ -641,6 +641,58 @@ The rule does not have any configuration options.
 <app-root></app-root>
 ```
 
+<br>
+
+---
+
+<br>
+
+#### Default Config
+
+```json
+{
+  "rules": {
+    "@angular-eslint/template/prefer-self-closing-tags": [
+      "error"
+    ]
+  }
+}
+```
+
+<br>
+
+#### ✅ Valid Code
+
+```html
+<ng-container>&nbsp;</ng-container>
+```
+
+<br>
+
+---
+
+<br>
+
+#### Default Config
+
+```json
+{
+  "rules": {
+    "@angular-eslint/template/prefer-self-closing-tags": [
+      "error"
+    ]
+  }
+}
+```
+
+<br>
+
+#### ✅ Valid Code
+
+```html
+<my-component>  <!-- not empty -->  </ng-container>
+```
+
 </details>
 
 <br>

packages/eslint-plugin-template/src/rules/prefer-self-closing-tags.ts

@@ -2,8 +2,8 @@ import type {
   TmplAstContent,
   TmplAstElement,
   TmplAstTemplate,
-  TmplAstText,
 } from '@angular-eslint/bundled-angular-compiler';
+import { TmplAstText } from '@angular-eslint/bundled-angular-compiler';
 import { getTemplateParserServices } from '@angular-eslint/utils';
 import { createESLintRule } from '../utils/create-eslint-rule';
 import { getDomElements } from '../utils/get-dom-elements';
@@ -60,12 +60,17 @@ export default createESLintRule<Options, MessageIds>({
       const noContent =
         !children.length ||
         children.every((node) => {
-          const text = (node as TmplAstText).value;
-
-          // If the node has no value, or only whitespace,
-          // we can consider it empty.
+          // If the node is only whitespace, we can consider it empty.
+          // We need to look at the text from the source code, rather
+          // than the `TmplAstText.value` property. The `value` property
+          // contains the HTML-decoded value, so if the raw text contains
+          // `&nbsp;`, that is decoded to a space, but we don't want to
+          // treat that as empty text.
           return (
-            typeof text === 'string' && text.replace(/\n/g, '').trim() === ''
+            node instanceof TmplAstText &&
+            context.sourceCode.text
+              .slice(node.sourceSpan.start.offset, node.sourceSpan.end.offset)
+              .trim() === ''
           );
         });
       const noCloseTag =

packages/eslint-plugin-template/tests/rules/prefer-self-closing-tags/cases.ts

@@ -34,6 +34,8 @@ export const valid: readonly (string | ValidTestCase<Options>)[] = [
     <p>Fallback content</p>
   </ng-content>`,
   { code: '<app-root></app-root>', filename: 'src/index.html' },
+  '<ng-container>&nbsp;</ng-container>',
+  '<my-component>  <!-- not empty -->  </ng-container>',
 ];
 
 export const invalid: readonly InvalidTestCase<MessageIds, Options>[] = [