fix(compiler-cli): add signal checks to handle negated calls (#59970)

aldillek · AndrewKushnir · commit b7ab5fa25625 · 2025-06-09T09:01:06.000-07:00
By adding these checks, we can find scenarios where a signal was expected to be called but wasn't. PR Close #59970
diff --git a/packages/compiler-cli/src/ngtsc/typecheck/extended/checks/interpolated_signal_not_invoked/index.ts b/packages/compiler-cli/src/ngtsc/typecheck/extended/checks/interpolated_signal_not_invoked/index.ts
@@ -11,6 +11,7 @@ import {
   ASTWithSource,
   BindingType,
   Interpolation,
+  PrefixNot,
   PropertyRead,
   TmplAstBoundAttribute,
   TmplAstNode,
@@ -45,6 +46,7 @@ class InterpolatedSignalCheck extends TemplateCheckWithVisitor<ErrorCode.INTERPO
     // interpolations like `{{ mySignal }}`
     if (node instanceof Interpolation) {
       return node.expressions
+        .map((item) => (item instanceof PrefixNot ? item.expression : item))
         .filter((item): item is PropertyRead => item instanceof PropertyRead)
         .flatMap((item) => buildDiagnosticForSignal(ctx, item, component));
     }
@@ -59,6 +61,7 @@ class InterpolatedSignalCheck extends TemplateCheckWithVisitor<ErrorCode.INTERPO
         return [];
       }
       // otherwise, we check if the node is
+      const nodeAst = isPropertyReadNodeAst(node);
       if (
         // a bound property like `[prop]="mySignal"`
         (node.type === BindingType.Property ||
@@ -70,16 +73,28 @@ class InterpolatedSignalCheck extends TemplateCheckWithVisitor<ErrorCode.INTERPO
           node.type === BindingType.Attribute ||
           // or an animation binding like `[@myAnimation]="mySignal"`
           node.type === BindingType.Animation) &&
-        node.value instanceof ASTWithSource &&
-        node.value.ast instanceof PropertyRead
+        nodeAst
       ) {
-        return buildDiagnosticForSignal(ctx, node.value.ast, component);
+        return buildDiagnosticForSignal(ctx, nodeAst, component);
       }
     }
     return [];
   }
 }
 
+function isPropertyReadNodeAst(node: TmplAstBoundAttribute): PropertyRead | undefined {
+  if (node.value instanceof ASTWithSource === false) {
+    return undefined;
+  }
+  if (node.value.ast instanceof PrefixNot && node.value.ast.expression instanceof PropertyRead) {
+    return node.value.ast.expression;
+  }
+  if (node.value.ast instanceof PropertyRead) {
+    return node.value.ast;
+  }
+  return undefined;
+}
+
 function isFunctionInstanceProperty(name: string): boolean {
   return FUNCTION_INSTANCE_PROPERTIES.has(name);
 }
diff --git a/packages/compiler-cli/src/ngtsc/typecheck/extended/test/checks/interpolated_signal_not_invoked/interpolated_signal_not_invoked_spec.ts b/packages/compiler-cli/src/ngtsc/typecheck/extended/test/checks/interpolated_signal_not_invoked/interpolated_signal_not_invoked_spec.ts
@@ -61,14 +61,15 @@ runInEachFileSystem(() => {
       {
         fileName,
         templates: {
-          'TestCmp': `<div>{{ mySignal1 }} {{ mySignal2 }}</div>`,
+          'TestCmp': `<div>{{ mySignal1 }} {{ mySignal2 }} {{ !mySignal3 }}</div>`,
         },
         source: `
           import {signal, Signal} from '@angular/core';
 
           export class TestCmp {
             mySignal1 = signal<number>(0);
             mySignal2: Signal<number>;
+            mySignal3 = signal<number>(0);
           }`,
       },
     ]);
@@ -81,11 +82,12 @@ runInEachFileSystem(() => {
       {} /* options */,
     );
     const diags = extendedTemplateChecker.getDiagnosticsForComponent(component);
-    expect(diags.length).toBe(2);
+    expect(diags.length).toBe(3);
     expect(diags[0].category).toBe(ts.DiagnosticCategory.Warning);
     expect(diags[0].code).toBe(ngErrorCode(ErrorCode.INTERPOLATED_SIGNAL_NOT_INVOKED));
     expect(getSourceCodeForDiagnostic(diags[0])).toBe(`mySignal1`);
     expect(getSourceCodeForDiagnostic(diags[1])).toBe(`mySignal2`);
+    expect(getSourceCodeForDiagnostic(diags[2])).toBe(`mySignal3`);
   });
 
   it('should produce a warning when a readonly signal is not invoked', () => {
@@ -638,13 +640,15 @@ runInEachFileSystem(() => {
         {
           fileName,
           templates: {
-            'TestCmp': `<div [${binding}]="mySignal"></div>`,
+            'TestCmp': `<div [${binding}]="mySignal"></div> 
+            <div [${binding}]="!negatedSignal"></div>`,
           },
           source: `
           import {signal} from '@angular/core';
 
           export class TestCmp {
             mySignal = signal<number>(0);
+            negatedSignal = signal<number>(0);
           }`,
         },
       ]);
@@ -657,10 +661,11 @@ runInEachFileSystem(() => {
         {} /* options */,
       );
       const diags = extendedTemplateChecker.getDiagnosticsForComponent(component);
-      expect(diags.length).toBe(1);
+      expect(diags.length).toBe(2);
       expect(diags[0].category).toBe(ts.DiagnosticCategory.Warning);
       expect(diags[0].code).toBe(ngErrorCode(ErrorCode.INTERPOLATED_SIGNAL_NOT_INVOKED));
       expect(getSourceCodeForDiagnostic(diags[0])).toBe(`mySignal`);
+      expect(getSourceCodeForDiagnostic(diags[1])).toBe(`negatedSignal`);
     });
 
     it(`should not produce a warning when signal is invoked on ${name} binding`, () => {
@@ -669,13 +674,15 @@ runInEachFileSystem(() => {
         {
           fileName,
           templates: {
-            'TestCmp': `<div [${binding}]="mySignal()"></div>`,
+            'TestCmp': `<div [${binding}]="mySignal()"></div>
+            <div [${binding}]="!negatedSignal()"></div>`,
           },
           source: `
           import {signal} from '@angular/core';
 
           export class TestCmp {
             mySignal = signal<number>(0);
+            negatedSignal = signal<number>(0);
           }`,
         },
       ]);
