fix(language-service): prevent external template inlay hints from appearing in TS files

Inlay hints from external templates were being incorrectly applied to
TypeScript files because the compiler was processing all templates
associated with components found in the TS file, regardless of whether
the template was inline or external. This resulted in misplaced hints
due to mismatched offsets.

This change filters the templates and host bindings processed in
getInlayHintsForTemplate to only include those that belong to the
target file being queried.

Fixes #69224

(cherry picked from commit 2e4ed80)

Author: atscott

packages/language-service/src/inlay_hints.ts

@@ -210,21 +210,33 @@ export function getInlayHintsForTemplate(
   compiler: NgCompiler,
   typeCheckInfo: TypeCheckInfo,
   span: ts.TextSpan,
+  targetFileName: string,
   config: InlayHintsConfig = {},
 ): AngularInlayHint[] {
   const mergedConfig = {...DEFAULT_CONFIG, ...config};
   const hints: AngularInlayHint[] = [];
   const ttc = compiler.getTemplateTypeChecker();
+
+  // Get the template AST (may be null for directives without templates)
+  const template = ttc.getTemplate(typeCheckInfo.declaration);
+  const templateFileUrl =
+    template && template.length > 0 ? template[0].sourceSpan.start.file.url : null;
+
+  const shouldProcessTemplate = templateFileUrl !== null && templateFileUrl === targetFileName;
+  const shouldProcessHostBindings =
+    typeCheckInfo.declaration.getSourceFile().fileName === targetFileName;
+
+  if (!shouldProcessTemplate && !shouldProcessHostBindings) {
+    return hints;
+  }
+
   const typeChecker = compiler.getCurrentProgram().getTypeChecker();
 
   // Get the Type Check Block for accessing resolved types
   // The TCB has TypeScript's resolved types for all expressions, including
   // overloaded function calls and generic type inference
   const tcb = ttc.getTypeCheckBlock(typeCheckInfo.declaration);
 
-  // Get the template AST (may be null for directives without templates)
-  const template = ttc.getTemplate(typeCheckInfo.declaration);
-
   // Helper to check if a position is within our requested span
   const isInSpan = (pos: number): boolean => {
     return pos >= span.start && pos < span.start + span.length;
@@ -1805,7 +1817,7 @@ export function getInlayHintsForTemplate(
   }
 
   // Visit the template (if it exists - directives without templates will skip this)
-  if (template) {
+  if (template && shouldProcessTemplate) {
     const visitor = new InlayHintVisitor();
     tmplAstVisitAll(visitor, template);
   }
@@ -1817,7 +1829,7 @@ export function getInlayHintsForTemplate(
   // positions might be outside that range, but they should still be shown since they belong
   // to this component. We create a helper function that checks if we're requesting the whole file.
   const hostElement = ttc.getHostElement(typeCheckInfo.declaration);
-  if (hostElement) {
+  if (hostElement && shouldProcessHostBindings) {
     // For host bindings, check if the position is within the requested span.
     // Host binding keySpan positions are absolute TypeScript file positions.
     const isHostBindingInSpan = (pos: number): boolean => {

packages/language-service/src/language_service.ts

@@ -282,6 +282,7 @@ export class LanguageService {
                     compiler,
                     typeCheckInfo,
                     span,
+                    fileName,
                     config,
                   );
                   hints.push(...templateHints);
@@ -298,7 +299,13 @@ export class LanguageService {
           // For external template files (HTML), find the associated component
           const typeCheckInfo = getTypeCheckInfoAtPosition(fileName, span.start, compiler);
           if (typeCheckInfo) {
-            const templateHints = getInlayHintsForTemplate(compiler, typeCheckInfo, span, config);
+            const templateHints = getInlayHintsForTemplate(
+              compiler,
+              typeCheckInfo,
+              span,
+              fileName,
+              config,
+            );
             hints.push(...templateHints);
           }
         }

packages/language-service/test/inlay_hints_spec.ts

@@ -3724,4 +3724,63 @@ describe('inlay hints', () => {
       });
     });
   });
+
+  describe('external templates', () => {
+    it('should not provide template inlay hints in the TS file', () => {
+      const files = {
+        'app.ts': `
+          import {Component} from '@angular/core';
+
+          @Component({
+            selector: 'app-cmp',
+            templateUrl: './app.html',
+            standalone: false,
+          })
+          export class AppCmp {
+            users = [{id: 1, name: 'Alice'}];
+            onClick(event: any) {}
+          }
+        `,
+        'app.html': `
+          @for (user of users; track user.id) {
+            <div (click)="onClick($event)">{{ user.name }}</div>
+          }
+        `,
+      };
+      project = createModuleAndProjectWithDeclarations(env, 'test', files);
+      const appFile = project.openFile('app.ts');
+
+      const hints = appFile.getInlayHints();
+      expect(hints).toEqual([]);
+    });
+
+    it('should provide template inlay hints in the HTML file', () => {
+      const files = {
+        'app.ts': `
+          import {Component} from '@angular/core';
+
+          @Component({
+            selector: 'app-cmp',
+            templateUrl: './app.html',
+            standalone: false,
+          })
+          export class AppCmp {
+            users = [{id: 1, name: 'Alice'}];
+            onClick(e: any) {}
+          }
+        `,
+        'app.html': `
+          @for (user of users; track user.id) {
+            <div (click)="onClick($event)">{{ user.name }}</div>
+          }
+        `,
+      };
+      project = createModuleAndProjectWithDeclarations(env, 'test', files);
+      const htmlFile = project.openFile('app.html');
+
+      const hints = htmlFile.getInlayHints();
+      const userHint = hints.find((h) => h.text.includes('id: number'));
+      expect(userHint).toBeDefined();
+    });
+  });
 });