fix(compiler): produce more accurate errors for interpolations

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.
angular · crisbeto · Jun 25, 2025 · Jun 25, 2025 · 497e71e597865caaf3ae0a23660d9d8925d4e73c · crisbeto
commit 497e71e597865caaf3ae0a23660d9d8925d4e73c
diff --git a/packages/compiler-cli/test/ngtsc/ngtsc_spec.ts b/packages/compiler-cli/test/ngtsc/ngtsc_spec.ts
@@ -10022,7 +10022,7 @@ runInEachFileSystem((os: string) => {
           expect(diags.length).toBe(2);
           expect(diags[0].messageText).toEqual(`Type 'string' is not assignable to type 'number'.`);
           expect(diags[1].messageText).toContain(
-            'Parser Error: Bindings cannot contain assignments at column 5 in [ {{x = 2}}]',
+            'Parser Error: Bindings cannot contain assignments at column 5 in [x = 2]',
           );
         });
       });

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', () => {

diff --git a/packages/language-service/test/diagnostic_spec.ts b/packages/language-service/test/diagnostic_spec.ts
@@ -193,7 +193,7 @@ describe('getSemanticDiagnostics', () => {
     expect(category).toBe(ts.DiagnosticCategory.Error);
     expect(file?.fileName).toBe('/test/app.html');
     expect(messageText).toContain(
-      `Parser Error: Bindings cannot contain assignments at column 8 in [{{nope = true}}]`,
+      `Parser Error: Bindings cannot contain assignments at column 8 in [nope = true]`,
     );
   });
 
@@ -231,13 +231,13 @@ describe('getSemanticDiagnostics', () => {
       'app.ts': `
       import {Component, NgModule} from '@angular/core';
 
-      @Component({ 
+      @Component({
         templateUrl: './app1.html',
         standalone: false,
       })
       export class AppComponent1 { nope = false; }
 
-      @Component({ 
+      @Component({
         templateUrl: './app2.html',
         standalone: false,
       })
@@ -262,13 +262,13 @@ describe('getSemanticDiagnostics', () => {
     const diags1 = project.getDiagnosticsForFile('app1.html');
     expect(diags1.length).toBe(1);
     expect(diags1[0].messageText).toBe(
-      'Parser Error: Bindings cannot contain assignments at column 8 in [{{nope = false}}] in /test/app1.html@0:0',
+      'Parser Error: Bindings cannot contain assignments at column 8 in [nope = false] in /test/app1.html@0:0',
     );
 
     const diags2 = project.getDiagnosticsForFile('app2.html');
     expect(diags2.length).toBe(1);
     expect(diags2[0].messageText).toBe(
-      'Parser Error: Bindings cannot contain assignments at column 8 in [{{nope = true}}] in /test/app2.html@0:0',
+      'Parser Error: Bindings cannot contain assignments at column 8 in [nope = true] in /test/app2.html@0:0',
     );
   });
 
@@ -386,7 +386,7 @@ describe('getSemanticDiagnostics', () => {
     const files = {
       'app.ts': `
         import {Component} from '@angular/core';
-        @Component({ 
+        @Component({
           template: '',
           standalone: false,
         })