fix(compiler-cli): report cases where initializer APIs are used in a non-directive class (#54993)

crisbeto · dylhunn · commit 694ba79cbf7a · 2024-03-28T09:17:03.000-07:00
Expands the check for initializer APIs to also flag when the function is called on a class that isn't a component or directive. PR Close #54993
diff --git a/packages/compiler-cli/src/ngtsc/validation/src/rules/initializer_api_usage_rule.ts b/packages/compiler-cli/src/ngtsc/validation/src/rules/initializer_api_usage_rule.ts
@@ -38,7 +38,7 @@ export class InitializerApiUsageRule implements SourceFileValidatorRule {
     });
   }
 
-  checkNode(node: ts.Node): ts.Diagnostic[]|null {
+  checkNode(node: ts.Node): ts.Diagnostic|null {
     // We only care about call expressions.
     if (!ts.isCallExpression(node)) {
       return null;
@@ -50,9 +50,7 @@ export class InitializerApiUsageRule implements SourceFileValidatorRule {
       node = node.parent;
     }
 
-    // Initializer functions are allowed to be used in the initializer.
-    if (!node.parent || !ts.isCallExpression(node) ||
-        (ts.isPropertyDeclaration(node.parent) && node.parent.initializer === node)) {
+    if (!node.parent || !ts.isCallExpression(node)) {
       return null;
     }
 
@@ -62,13 +60,36 @@ export class InitializerApiUsageRule implements SourceFileValidatorRule {
       return null;
     }
 
-    return [
-      makeDiagnostic(
-          ErrorCode.UNSUPPORTED_INITIALIZER_API_USAGE, node,
-          `Unsupported call to the ${identifiedInitializer.api.functionName}${
-              identifiedInitializer.isRequired ?
-                  '.required' :
-                  ''} function. This function can only be called in the initializer of a class member.`)
-    ];
+    const functionName = identifiedInitializer.api.functionName +
+        (identifiedInitializer.isRequired ? '.required' : '');
+
+    if (ts.isPropertyDeclaration(node.parent) && node.parent.initializer === node) {
+      let closestClass: ts.Node = node.parent;
+
+      while (closestClass && !ts.isClassDeclaration(closestClass)) {
+        closestClass = closestClass.parent;
+      }
+
+      if (closestClass && ts.isClassDeclaration(closestClass)) {
+        const decorators = this.reflector.getDecoratorsOfDeclaration(closestClass);
+        const isComponentOrDirective = decorators !== null && decorators.some(decorator => {
+          return decorator.import?.from === '@angular/core' &&
+              (decorator.name === 'Component' || decorator.name === 'Directive');
+        });
+
+        return isComponentOrDirective ?
+            null :
+            makeDiagnostic(
+                ErrorCode.UNSUPPORTED_INITIALIZER_API_USAGE, node,
+                `Unsupported call to the ${
+                    functionName} function. This function can only be used as the initializer ` +
+                    `of a property on a @Component or @Directive class.`);
+      }
+    }
+
+    return makeDiagnostic(
+        ErrorCode.UNSUPPORTED_INITIALIZER_API_USAGE, node,
+        `Unsupported call to the ${
+            functionName} function. This function can only be called in the initializer of a class member.`);
   }
 }
diff --git a/packages/compiler-cli/test/ngtsc/authoring_diagnostics_spec.ts b/packages/compiler-cli/test/ngtsc/authoring_diagnostics_spec.ts
@@ -209,5 +209,38 @@ runInEachFileSystem(() => {
       const diags = env.driveDiagnostics();
       expect(diags.length).toBe(0);
     });
+
+    it('should report initializer function being used in an undecorated class', () => {
+      env.write('test.ts', `
+        import {input} from '@angular/core';
+
+        export class Test {
+          inp = input();
+        }
+      `);
+
+      const diags = env.driveDiagnostics();
+      expect(diags.length).toBe(1);
+      expect(diags[0].messageText)
+          .toContain(
+              'Unsupported call to the input function. This function can only be used as the initializer of a property on a @Component or @Directive class.');
+    });
+
+    it('should report initializer function being used in an unsupported Angular class', () => {
+      env.write('test.ts', `
+        import {input, Pipe} from '@angular/core';
+
+        @Pipe({name: 'test'})
+        export class Test {
+          inp = input();
+        }
+      `);
+
+      const diags = env.driveDiagnostics();
+      expect(diags.length).toBe(1);
+      expect(diags[0].messageText)
+          .toContain(
+              'Unsupported call to the input function. This function can only be used as the initializer of a property on a @Component or @Directive class.');
+    });
   });
 });
