fix(compiler-cli): make required inputs diagnostic less noisy

crisbeto · atscott · commit f233f7420a6d · 2025-11-03T21:27:42.000Z
Currently when a required input is missing, we produce a diagnostic on the entire start tag. This can be really noisy if there are already some attributes on the element.

This change switch to only highlighting the tag name instead.
diff --git a/packages/compiler-cli/src/ngtsc/typecheck/src/oob.ts b/packages/compiler-cli/src/ngtsc/typecheck/src/oob.ts
@@ -28,6 +28,7 @@ import {
   TmplAstTextAttribute,
   TmplAstVariable,
   TmplAstViewportDeferredTrigger,
+  ParseSourceSpan,
 } from '@angular/compiler';
 import ts from 'typescript';
 
@@ -562,11 +563,33 @@ export class OutOfBandDiagnosticRecorderImpl implements OutOfBandDiagnosticRecor
       isComponent ? 'component' : 'directive'
     } ${directiveName} must be specified.`;
 
+    let span: ParseSourceSpan;
+    let name: string | null;
+
+    if (element instanceof TmplAstElement || element instanceof TmplAstDirective) {
+      name = element.name;
+    } else if (element instanceof TmplAstComponent) {
+      name = element.componentName;
+    } else {
+      name = null;
+    }
+
+    if (name === null) {
+      span = element.startSourceSpan;
+    } else {
+      // Only highlight the tag name since highlighting the entire start tag can be noisy.
+      const start = element.startSourceSpan.start.moveBy(1);
+      const end = element.startSourceSpan.end.moveBy(
+        start.offset + name.length - element.startSourceSpan.end.offset,
+      );
+      span = new ParseSourceSpan(start, end);
+    }
+
     this._diagnostics.push(
       makeTemplateDiagnostic(
         id,
         this.resolver.getTemplateSourceMapping(id),
-        element.startSourceSpan,
+        span,
         ts.DiagnosticCategory.Error,
         ngErrorCode(ErrorCode.MISSING_REQUIRED_INPUTS),
         message,
diff --git a/packages/compiler-cli/src/ngtsc/typecheck/test/diagnostics_spec.ts b/packages/compiler-cli/src/ngtsc/typecheck/test/diagnostics_spec.ts
@@ -1046,7 +1046,7 @@ class TestComponent {
       );
 
       expect(messages).toEqual([
-        `TestComponent.html(1, 1): Required input 'input' from directive Dir must be specified.`,
+        `TestComponent.html(1, 2): Required input 'input' from directive Dir must be specified.`,
       ]);
     });
 
@@ -1103,8 +1103,8 @@ class TestComponent {
       );
 
       expect(messages).toEqual([
-        `TestComponent.html(1, 1): Required inputs 'input', 'otherInput' from directive Dir must be specified.`,
-        `TestComponent.html(1, 1): Required input 'otherDirInput' from directive OtherDir must be specified.`,
+        `TestComponent.html(1, 2): Required inputs 'input', 'otherInput' from directive Dir must be specified.`,
+        `TestComponent.html(1, 2): Required input 'otherDirInput' from directive OtherDir must be specified.`,
       ]);
     });
 
@@ -1136,7 +1136,7 @@ class TestComponent {
       );
 
       expect(messages).toEqual([
-        `TestComponent.html(1, 1): Required input 'inputAlias' from directive Dir must be specified.`,
+        `TestComponent.html(1, 2): Required input 'inputAlias' from directive Dir must be specified.`,
       ]);
     });
 
@@ -1337,7 +1337,7 @@ class TestComponent {
       );
 
       expect(messages).toEqual([
-        `TestComponent.html(1, 1): Required input 'customAlias' from directive HostDir must be specified.`,
+        `TestComponent.html(1, 2): Required input 'customAlias' from directive HostDir must be specified.`,
       ]);
     });
 
