fix(@angular-devkit/build-angular): preemptively remove AOT metadata in esbuild builder

The Angular compiler generates two types of metadata calls when it generates AOT code.
This metadata is not used in fully AOT compiled applications and can contain direct references
to components, services, etc. that may affect the output chunk layout of the application.
While this currently has not lead to any problems, it could in the future and the Webpack
bundler already performs a transform that preemptively removes these calls. To remain
consistent, the esbuild-based build system will now also perform this transform.

This also updates the autoprefixer behavior tests to check the actual runtime style text
instead of the style text within the metadata calls.

(cherry picked from commit c462d9c)

Author: clydin

packages/angular_devkit/build_angular/src/builders/browser-esbuild/angular/aot-compilation.ts

@@ -19,7 +19,10 @@ import {
 
 // Temporary deep import for transformer support
 // TODO: Move these to a private exports location or move the implementation into this package.
-const { mergeTransformers, replaceBootstrap } = require('@ngtools/webpack/src/ivy/transformation');
+const {
+  mergeTransformers,
+  createAotTransformers,
+} = require('@ngtools/webpack/src/ivy/transformation');
 
 class AngularCompilationState {
   constructor(
@@ -153,9 +156,11 @@ export class AotCompilation extends AngularCompilation {
     assert(this.#state, 'Angular compilation must be initialized prior to emitting files.');
     const { angularCompiler, typeScriptProgram } = this.#state;
 
-    const transformers = mergeTransformers(angularCompiler.prepareEmit().transformers, {
-      before: [replaceBootstrap(() => typeScriptProgram.getProgram().getTypeChecker())],
-    });
+    const transformers = mergeTransformers(
+      angularCompiler.prepareEmit().transformers,
+      // The default behavior is to replace JIT bootstraping and remove AOT metadata calls
+      createAotTransformers(typeScriptProgram, {}),
+    );
 
     return async (file: string) => {
       const sourceFile = typeScriptProgram.getSourceFile(file);

packages/angular_devkit/build_angular/src/builders/browser-esbuild/tests/behavior/stylesheet_autoprefixer_spec.ts

@@ -106,12 +106,10 @@ describeBuilder(buildEsbuildBrowser, BROWSER_BUILDER_INFO, (harness) => {
 
         harness
           .expectFile('dist/main.js')
-          .content.toMatch(
-            /section\s*{\\n\s*-webkit-hyphens:\s*none;\\n\s*hyphens:\s*none;\\n\s*}/,
-          );
+          .content.toMatch(/{\\n\s*-webkit-hyphens:\s*none;\\n\s*hyphens:\s*none;\\n\s*}/);
         harness
           .expectFile('dist/main.js')
-          .content.toMatch(/div\s*{\\n\s*-webkit-hyphens:\s*none;\\n\s*hyphens:\s*none;\\n\s*}/);
+          .content.toMatch(/{\\n\s*-webkit-hyphens:\s*none;\\n\s*hyphens:\s*none;\\n\s*}/);
       });
 
       it(`should not add prefixes if not required by browsers in external component styles [${ext}]`, async () => {
@@ -137,10 +135,8 @@ describeBuilder(buildEsbuildBrowser, BROWSER_BUILDER_INFO, (harness) => {
         const { result } = await harness.executeOnce();
         expect(result?.success).toBeTrue();
 
-        harness
-          .expectFile('dist/main.js')
-          .content.toMatch(/section\s*{\\n\s*hyphens:\s*none;\\n\s*}/);
-        harness.expectFile('dist/main.js').content.toMatch(/div\s*{\\n\s*hyphens:\s*none;\\n\s*}/);
+        harness.expectFile('dist/main.js').content.toMatch(/{\\n\s*hyphens:\s*none;\\n\s*}/);
+        harness.expectFile('dist/main.js').content.toMatch(/{\\n\s*hyphens:\s*none;\\n\s*}/);
       });
     }
 
@@ -169,7 +165,8 @@ describeBuilder(buildEsbuildBrowser, BROWSER_BUILDER_INFO, (harness) => {
 
       harness
         .expectFile('dist/main.js')
-        .content.toMatch(/div\s*{\\n\s*-webkit-hyphens:\s*none;\\n\s*hyphens:\s*none;\\n\s*}/);
+        // div[_ngcontent-%COMP%] {\n  -webkit-hyphens: none;\n  hyphens: none;\n}\n
+        .content.toMatch(/{\\n\s*-webkit-hyphens:\s*none;\\n\s*hyphens:\s*none;\\n\s*}/);
     });
 
     it('should not add prefixes if not required by browsers in inline component styles', async () => {
@@ -193,7 +190,7 @@ describeBuilder(buildEsbuildBrowser, BROWSER_BUILDER_INFO, (harness) => {
       const { result } = await harness.executeOnce();
       expect(result?.success).toBeTrue();
 
-      harness.expectFile('dist/main.js').content.toMatch(/div\s*{\\n\s*hyphens:\s*none;\\n\s*}/);
+      harness.expectFile('dist/main.js').content.toMatch(/{\\n\s*hyphens:\s*none;\\n\s*}/);
     });
   });
 });