refactor(compiler): Add info about unclosed element.

We chose to throw 2 errors here because we can't assume the intention of the developer and the span we target are different.

fixes #57032

Author: JeanMeche

packages/compiler/src/ml_parser/parser.ts

@@ -753,13 +753,30 @@ class _TreeBuilder {
   }
 
   private _consumeBlockClose(token: BlockCloseToken) {
+    const initialStackLength = this._containerStack.length;
+    const topNode = this._containerStack[initialStackLength - 1];
     if (!this._popContainer(null, html.Block, token.sourceSpan)) {
+      if (this._containerStack.length < initialStackLength) {
+        const nodeName = topNode instanceof html.Component ? topNode.fullName : topNode.name;
+        this.errors.push(
+          TreeError.create(
+            null,
+            token.sourceSpan,
+            `Unexpected closing block. The block may have been closed earlier. ` +
+              `Did you forget to close the <${nodeName}> element? ` +
+              `If you meant to write the \`}\` character, you should use the "&#125;" ` +
+              `HTML entity instead.`,
+          ),
+        );
+        return;
+      }
+
       this.errors.push(
         TreeError.create(
           null,
           token.sourceSpan,
           `Unexpected closing block. The block may have been closed earlier. ` +
-            `If you meant to write the } character, you should use the "&#125;" ` +
+            `If you meant to write the \`}\` character, you should use the "&#125;" ` +
             `HTML entity instead.`,
         ),
       );

packages/compiler/test/ml_parser/html_parser_spec.ts

@@ -1108,7 +1108,7 @@ describe('HtmlParser', () => {
         expect(humanizeErrors(errors)).toEqual([
           [
             null,
-            'Unexpected closing block. The block may have been closed earlier. If you meant to write the } character, you should use the "}" HTML entity instead.',
+            'Unexpected closing block. The block may have been closed earlier. If you meant to write the `}` character, you should use the "}" HTML entity instead.',
             '0:5',
           ],
         ]);
@@ -1120,7 +1120,7 @@ describe('HtmlParser', () => {
         expect(humanizeErrors(errors)).toEqual([
           [
             null,
-            'Unexpected closing block. The block may have been closed earlier. If you meant to write the } character, you should use the "}" HTML entity instead.',
+            'Unexpected closing block. The block may have been closed earlier. Did you forget to close the <strong> element? If you meant to write the `}` character, you should use the "&#125;" HTML entity instead.',
             '0:21',
           ],
         ]);
@@ -1137,7 +1137,7 @@ describe('HtmlParser', () => {
           ],
           [
             null,
-            'Unexpected closing block. The block may have been closed earlier. If you meant to write the } character, you should use the "&#125;" HTML entity instead.',
+            'Unexpected closing block. The block may have been closed earlier. If you meant to write the `}` character, you should use the "&#125;" HTML entity instead.',
             '0:28',
           ],
         ]);