fix(compiler-cli): display proper function in NG8117 message

cexbrayat · cexbrayat · commit c60f3bbcabed · 2025-07-28T11:51:53.000+02:00
The diagnostic was displaying `'Function in text interpolation should be invoked: ect Object]()` instead of `'Function in text interpolation should be invoked: firstName()'.
diff --git a/packages/compiler-cli/src/ngtsc/typecheck/extended/checks/uninvoked_function_in_text_interpolation/index.ts b/packages/compiler-cli/src/ngtsc/typecheck/extended/checks/uninvoked_function_in_text_interpolation/index.ts
@@ -10,16 +10,7 @@ import ts from 'typescript';
 import {ErrorCode, ExtendedTemplateDiagnosticName} from '../../../../diagnostics';
 import {NgTemplateDiagnostic, SymbolKind} from '../../../api';
 import {TemplateCheckFactory, TemplateCheckWithVisitor, TemplateContext} from '../../api';
-import {
-  AbsoluteSourceSpan,
-  AST,
-  Call,
-  Interpolation,
-  PropertyRead,
-  SafeCall,
-  SafePropertyRead,
-  TmplAstNode,
-} from '@angular/compiler';
+import {AST, Interpolation, PropertyRead, SafePropertyRead, TmplAstNode} from '@angular/compiler';
 
 class UninvokedFunctionInTextInterpolation extends TemplateCheckWithVisitor<ErrorCode.UNINVOKED_FUNCTION_IN_TEXT_INTERPOLATION> {
   override code = ErrorCode.UNINVOKED_FUNCTION_IN_TEXT_INTERPOLATION as const;
@@ -31,9 +22,7 @@ class UninvokedFunctionInTextInterpolation extends TemplateCheckWithVisitor<Erro
   ): NgTemplateDiagnostic<ErrorCode.UNINVOKED_FUNCTION_IN_TEXT_INTERPOLATION>[] {
     // interpolations like `{{ myFunction }}`
     if (node instanceof Interpolation) {
-      return node.expressions.flatMap((item) =>
-        assertExpressionInvoked(item, component, node.sourceSpan, ctx),
-      );
+      return node.expressions.flatMap((item) => assertExpressionInvoked(item, component, ctx));
     }
     return [];
   }
@@ -42,7 +31,6 @@ class UninvokedFunctionInTextInterpolation extends TemplateCheckWithVisitor<Erro
 function assertExpressionInvoked(
   expression: AST,
   component: ts.ClassDeclaration,
-  sourceSpan: AbsoluteSourceSpan,
   ctx: TemplateContext<ErrorCode.UNINVOKED_FUNCTION_IN_TEXT_INTERPOLATION>,
 ): NgTemplateDiagnostic<ErrorCode.UNINVOKED_FUNCTION_IN_TEXT_INTERPOLATION>[] {
   if (!(expression instanceof PropertyRead) && !(expression instanceof SafePropertyRead)) {
@@ -53,9 +41,7 @@ function assertExpressionInvoked(
 
   if (symbol !== null && symbol.kind === SymbolKind.Expression) {
     if (symbol.tsType.getCallSignatures()?.length > 0) {
-      const fullExpressionText = generateStringFromExpression(expression, sourceSpan.toString());
-
-      const errorString = `Function in text interpolation should be invoked: ${fullExpressionText}()`;
+      const errorString = `Function in text interpolation should be invoked: ${expression.name}()`;
       const templateMapping = ctx.templateTypeChecker.getSourceMappingAtTcbLocation(
         symbol.tcbLocation,
       )!;
@@ -66,10 +52,6 @@ function assertExpressionInvoked(
   return [];
 }
 
-function generateStringFromExpression(expression: AST, source: string): string {
-  return source.substring(expression.span.start, expression.span.end);
-}
-
 export const factory: TemplateCheckFactory<
   ErrorCode.UNINVOKED_FUNCTION_IN_TEXT_INTERPOLATION,
   ExtendedTemplateDiagnosticName.UNINVOKED_FUNCTION_IN_TEXT_INTERPOLATION
diff --git a/packages/compiler-cli/src/ngtsc/typecheck/extended/test/checks/uninvoked_function_in_text_interpolation/uninvoked_function_in_text_interpolation_spec.ts b/packages/compiler-cli/src/ngtsc/typecheck/extended/test/checks/uninvoked_function_in_text_interpolation/uninvoked_function_in_text_interpolation_spec.ts
@@ -86,6 +86,7 @@ runInEachFileSystem(() => {
       expect(diags.length).toBe(1);
       expect(diags[0].category).toBe(ts.DiagnosticCategory.Warning);
       expect(diags[0].code).toBe(ngErrorCode(ErrorCode.UNINVOKED_FUNCTION_IN_TEXT_INTERPOLATION));
+      expect(diags[0].messageText).toContain('firstName()');
       expect(getSourceCodeForDiagnostic(diags[0])).toBe('firstName');
     });
 
@@ -146,6 +147,7 @@ runInEachFileSystem(() => {
       expect(diags.length).toBe(1);
       expect(diags[0].category).toBe(ts.DiagnosticCategory.Warning);
       expect(diags[0].code).toBe(ngErrorCode(ErrorCode.UNINVOKED_FUNCTION_IN_TEXT_INTERPOLATION));
+      expect(diags[0].messageText).toContain('firstName()');
       expect(getSourceCodeForDiagnostic(diags[0])).toBe('firstName');
     });
   });
