fix(compiler): produce more accurate errors for interpolations

crisbeto · crisbeto · commit b333f433f0a0 · 2025-06-25T10:40:00.000+02:00
Currently when there's a parser error in interpolated text, the compiler reports an error on the entire text node. This can be really noisy in long strings.

These changes switch to reporting the errors on the specific expressions that caused them.
diff --git a/packages/compiler/src/expression_parser/parser.ts b/packages/compiler/src/expression_parser/parser.ts
@@ -268,12 +268,16 @@ export class Parser {
     const expressionNodes: AST[] = [];
 
     for (let i = 0; i < expressions.length; ++i) {
+      // If we have a token for the specific expression, it's preferrable to use it because it
+      // allows us to produce more accurate error messages. The expressions are always at the odd
+      // indexes inside the tokens.
+      const expressionSpan = interpolatedTokens?.[i * 2 + 1]?.sourceSpan;
       const expressionText = expressions[i].text;
       const sourceToLex = this._stripComments(expressionText);
       const tokens = this._lexer.tokenize(sourceToLex);
       const ast = new _ParseAST(
-        input,
-        parseSourceSpan,
+        expressionSpan ? expressionText : input,
+        expressionSpan || parseSourceSpan,
         absoluteOffset,
         tokens,
         ParseFlags.None,
diff --git a/packages/compiler/test/render3/r3_template_transform_spec.ts b/packages/compiler/test/render3/r3_template_transform_spec.ts
@@ -784,6 +784,41 @@ describe('R3 template transform', () => {
       expect(errors[1].msg).toContain('Invalid character [#]');
       expect(errors[2].msg).toContain(`Unexpected token ')'`);
     });
+
+    it('should report parsing errors on the specific interpolated expressions', () => {
+      const errors = parse(
+        `
+          bunch of text bunch of text bunch of text bunch of text bunch of text bunch of text
+          bunch of text bunch of text bunch of text bunch of text
+
+          {{foo[0}} bunch of text bunch of text bunch of text bunch of text {{.bar}}
+
+          bunch of text
+          bunch of text
+          bunch of text
+          bunch of text
+          bunch of text {{one + #two + baz}}
+        `,
+        {
+          ignoreError: true,
+        },
+      ).errors;
+
+      expect(errors.map((e) => e.span.toString())).toEqual([
+        '{{foo[0}}',
+        '{{.bar}}',
+        '{{one + #two + baz}}',
+      ]);
+
+      expect(errors.map((e) => e.msg)).toEqual([
+        jasmine.stringContaining('Missing expected ] at the end of the expression [foo[0]'),
+        jasmine.stringContaining('Unexpected token . at column 1 in [.bar]'),
+        jasmine.stringContaining(
+          'Private identifiers are not supported. Unexpected private identifier: ' +
+            '#two at column 7 in [one + #two + baz]',
+        ),
+      ]);
+    });
   });
 
   describe('Ignored elements', () => {
