diff --git a/packages/angular_devkit/build_angular/src/builders/browser-esbuild/tests/behavior/stylesheet_autoprefixer_spec.ts b/packages/angular_devkit/build_angular/src/builders/browser-esbuild/tests/behavior/stylesheet_autoprefixer_spec.ts
index 84aa4039d406..bf08b78bd19b 100644
--- a/packages/angular_devkit/build_angular/src/builders/browser-esbuild/tests/behavior/stylesheet_autoprefixer_spec.ts
+++ b/packages/angular_devkit/build_angular/src/builders/browser-esbuild/tests/behavior/stylesheet_autoprefixer_spec.ts
@@ -106,10 +106,12 @@ describeBuilder(buildEsbuildBrowser, BROWSER_BUILDER_INFO, (harness) => {
 
         harness
           .expectFile('dist/main.js')
-          .content.toMatch(/{\\n\s*-webkit-hyphens:\s*none;\\n\s*hyphens:\s*none;\\n\s*}/);
+          .content.toMatch(
+            /section\s*{\\n\s*-webkit-hyphens:\s*none;\\n\s*hyphens:\s*none;\\n\s*}/,
+          );
         harness
           .expectFile('dist/main.js')
-          .content.toMatch(/{\\n\s*-webkit-hyphens:\s*none;\\n\s*hyphens:\s*none;\\n\s*}/);
+          .content.toMatch(/div\s*{\\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 () => {
@@ -135,8 +137,10 @@ describeBuilder(buildEsbuildBrowser, BROWSER_BUILDER_INFO, (harness) => {
         const { result } = await harness.executeOnce();
         expect(result?.success).toBeTrue();
 
-        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*}/);
+        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*}/);
       });
     }
 
@@ -165,8 +169,7 @@ describeBuilder(buildEsbuildBrowser, BROWSER_BUILDER_INFO, (harness) => {
 
       harness
         .expectFile('dist/main.js')
-        // 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*}/);
+        .content.toMatch(/div\s*{\\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 () => {
@@ -190,7 +193,7 @@ describeBuilder(buildEsbuildBrowser, BROWSER_BUILDER_INFO, (harness) => {
       const { result } = await harness.executeOnce();
       expect(result?.success).toBeTrue();
 
-      harness.expectFile('dist/main.js').content.toMatch(/{\\n\s*hyphens:\s*none;\\n\s*}/);
+      harness.expectFile('dist/main.js').content.toMatch(/div\s*{\\n\s*hyphens:\s*none;\\n\s*}/);
     });
   });
 });
diff --git a/packages/angular_devkit/build_angular/src/tools/esbuild/angular/aot-compilation.ts b/packages/angular_devkit/build_angular/src/tools/esbuild/angular/aot-compilation.ts
index 72c452dd1947..84a59e40a7b9 100644
--- a/packages/angular_devkit/build_angular/src/tools/esbuild/angular/aot-compilation.ts
+++ b/packages/angular_devkit/build_angular/src/tools/esbuild/angular/aot-compilation.ts
@@ -19,10 +19,7 @@ import {
 
 // Temporary deep import for transformer support
 // TODO: Move these to a private exports location or move the implementation into this package.
-const {
-  mergeTransformers,
-  createAotTransformers,
-} = require('@ngtools/webpack/src/ivy/transformation');
+const { mergeTransformers, replaceBootstrap } = require('@ngtools/webpack/src/ivy/transformation');
 
 class AngularCompilationState {
   constructor(
@@ -194,11 +191,9 @@ export class AotCompilation extends AngularCompilation {
       angularCompiler.incrementalCompilation.recordSuccessfulEmit(sourceFile);
       emittedFiles.set(sourceFile, { filename: sourceFile.fileName, contents });
     };
-    const transformers = mergeTransformers(
-      angularCompiler.prepareEmit().transformers,
-      // The default behavior is to replace JIT bootstraping and remove AOT metadata calls
-      createAotTransformers(typeScriptProgram, {}),
-    );
+    const transformers = mergeTransformers(angularCompiler.prepareEmit().transformers, {
+      before: [replaceBootstrap(() => typeScriptProgram.getProgram().getTypeChecker())],
+    });
 
     // TypeScript will loop until there are no more affected files in the program
     while (