fix(compiler-cli): avoid ECMAScript private field metadata emit (#61227)

clydin · alxhub · commit c0cd3c2ed387 · 2025-05-15T09:45:01.000-07:00
The Angular class metadata emit structure does not support the use of private fields. If the class metadata emit is enabled and an ECMAScript private (i.e., `#` prefixed) member contains a decorator, the member will now be excluded from the emitting `setClassMetadata` call. This prevents runtime errors due to invalid syntax. PR Close #61227
diff --git a/packages/compiler-cli/src/ngtsc/annotations/common/src/metadata.ts b/packages/compiler-cli/src/ngtsc/annotations/common/src/metadata.ts
@@ -19,6 +19,7 @@ import {
 import ts from 'typescript';
 
 import {
+  ClassMemberAccessLevel,
   CtorParameter,
   DeclarationNode,
   Decorator,
@@ -84,11 +85,14 @@ export function extractClassMetadata(
 
   // Do the same for property decorators.
   let metaPropDecorators: Expression | null = null;
-  const classMembers = reflection
-    .getMembersOfClass(clazz)
-    .filter(
-      (member) => !member.isStatic && member.decorators !== null && member.decorators.length > 0,
-    );
+  const classMembers = reflection.getMembersOfClass(clazz).filter(
+    (member) =>
+      !member.isStatic &&
+      member.decorators !== null &&
+      member.decorators.length > 0 &&
+      // Private fields are not supported in the metadata emit
+      member.accessLevel !== ClassMemberAccessLevel.EcmaScriptPrivate,
+  );
   const duplicateDecoratedMembers = classMembers.filter(
     (member, i, arr) => arr.findIndex((arrayMember) => arrayMember.name === member.name) < i,
   );
diff --git a/packages/compiler-cli/src/ngtsc/annotations/common/test/metadata_spec.ts b/packages/compiler-cli/src/ngtsc/annotations/common/test/metadata_spec.ts
@@ -111,16 +111,32 @@ runInEachFileSystem(() => {
         `{ 'has-dashes-in-name': [{ type: Input }], noDashesInName: [{ type: Input }] })`,
       );
     });
+
+    it('should not emit metadata for ECMAScript private fields', () => {
+      const res = compileAndPrint(
+        `
+        import {Directive, Input} from '@angular/core';
+
+         @Directive() class Target {
+          @Input() #privateName = 123;
+          @Input() publicName = 456;
+        }
+      `,
+        false,
+      );
+      expect(res).toContain(`{ publicName: [{ type: Input }] })`);
+    });
   });
 
-  function compileAndPrint(contents: string): string {
+  function compileAndPrint(contents: string, experimentalDecorators: boolean = true): string {
     const _ = absoluteFrom;
     const CORE: TestFile = {
       name: _('/node_modules/@angular/core/index.d.ts'),
       contents: `
       export declare function Input(...args: any[]): any;
       export declare function Inject(...args: any[]): any;
       export declare function Component(...args: any[]): any;
+      export declare function Directive(...args: any[]): any;
       export declare class Injector {}
     `,
     };
@@ -133,7 +149,7 @@ runInEachFileSystem(() => {
           contents,
         },
       ],
-      {target: ts.ScriptTarget.ES2015},
+      {target: ts.ScriptTarget.ES2015, experimentalDecorators},
     );
     const host = new TypeScriptReflectionHost(program.getTypeChecker());
     const target = getDeclaration(program, _('/index.ts'), 'Target', ts.isClassDeclaration);
