fix(compiler-cli): Ignore diagnostics on ngTemplateContextGuard lines in TCB (#63054)

atscott · atscott · commit 812463c5636e · 2025-08-07T15:38:38.000-07:00
Deprecated diagnostics can appear on the context guard becaues the directive itself may be deprecated. For example, context guards look like `if (i1.NgForOf.ngTemplateContextGuard(_t8, _t9) /*331,378*/) {...}` and typescript will report the deprecation on the whole element, from start to end tag, because the span for that node includes it. fixes angular/vscode-ng-language-service#2203 PR Close #63054
diff --git a/packages/compiler-cli/src/ngtsc/typecheck/src/type_check_block.ts b/packages/compiler-cli/src/ngtsc/typecheck/src/type_check_block.ts
@@ -598,6 +598,7 @@ class TcbTemplateBodyOp extends TcbOp {
         if (this.tcb.env.config.applyTemplateContextGuards) {
           const ctx = this.scope.resolve(hostNode);
           const guardInvoke = tsCallMethod(dirId, 'ngTemplateContextGuard', [dirInstId, ctx]);
+          markIgnoreDiagnostics(guardInvoke);
           addParseSpanInfo(guardInvoke, hostNode.sourceSpan);
           guards.push(guardInvoke);
         } else if (
diff --git a/packages/language-service/test/diagnostic_spec.ts b/packages/language-service/test/diagnostic_spec.ts
@@ -767,6 +767,45 @@ describe('getSuggestedDiagnostics', () => {
     const diags = project.getSuggestionDiagnosticsForFile('app.ts');
     expect(diags.length).toBe(0);
   });
+
+  it('should not report deprecated for directive context guard', () => {
+    const files = {
+      'app.ts': `
+      import {Component} from '@angular/core';
+
+      @Component({
+        template: \`
+        <div *my-directive>
+          <span>Test</span>
+          <span>Test</span>
+          <span>Test</span>
+        </div>
+        \`,
+        standalone: false,
+      })
+      export class AppComponent {}
+    `,
+      'bar.ts': `
+      import {Directive, input} from '@angular/core';
+      /**
+       * @deprecated deprecated
+       */
+      @Directive({
+        selector: '[my-directive]',
+        standalone: false,
+      })
+      export class MyDirective {
+        static ngTemplateContextGuard(dir: MyDirective, ctx: any): true {
+          return true;
+        }
+      }
+    `,
+    };
+    const project = createModuleAndProjectWithDeclarations(env, 'test', files);
+
+    const diags = project.getSuggestionDiagnosticsForFile('app.ts');
+    expect(diags.length).toBe(0);
+  });
 });
 
 function getTextOfDiagnostic(diag: ts.Diagnostic): string {
