From 823852d8c24086351b7e6180bc88f3760b46ee23 Mon Sep 17 00:00:00 2001
From: Charles Lyding <19598772+clydin@users.noreply.github.com>
Date: Mon, 22 Aug 2022 12:07:01 -0400
Subject: [PATCH] refactor(@angular-devkit/build-angular): process esbuild
 builder global stylesheets and code at the same time

The global stylesheet processing using esbuild and the code bundling that also uses esbuild are now executed
asynchronously. Previously, the global stylesheet processing was required to wait until the code bundling was
complete before starting. Any warnings and/or errors for global stylesheets will also now be shown even if there
are errors during code bundling.
---
 .../src/builders/browser-esbuild/index.ts     | 71 ++++++++++---------
 1 file changed, 37 insertions(+), 34 deletions(-)

diff --git a/packages/angular_devkit/build_angular/src/builders/browser-esbuild/index.ts b/packages/angular_devkit/build_angular/src/builders/browser-esbuild/index.ts
index 217fcef316ca..20a8b9a3f5b7 100644
--- a/packages/angular_devkit/build_angular/src/builders/browser-esbuild/index.ts
+++ b/packages/angular_devkit/build_angular/src/builders/browser-esbuild/index.ts
@@ -93,32 +93,45 @@ export async function buildEsbuildBrowser(
     ),
   );
 
-  // Execute esbuild
-  const result = await bundleCode(
-    workspaceRoot,
-    entryPoints,
-    outputNames,
-    options,
-    optimizationOptions,
-    sourcemapOptions,
-    tsconfig,
-  );
+  const [codeResults, styleResults] = await Promise.all([
+    // Execute esbuild to bundle the application code
+    bundleCode(
+      workspaceRoot,
+      entryPoints,
+      outputNames,
+      options,
+      optimizationOptions,
+      sourcemapOptions,
+      tsconfig,
+    ),
+    // Execute esbuild to bundle the global stylesheets
+    bundleGlobalStylesheets(
+      workspaceRoot,
+      outputNames,
+      options,
+      optimizationOptions,
+      sourcemapOptions,
+    ),
+  ]);
 
   // Log all warnings and errors generated during bundling
-  await logMessages(context, result);
+  await logMessages(context, {
+    errors: [...codeResults.errors, ...styleResults.errors],
+    warnings: [...codeResults.warnings, ...styleResults.warnings],
+  });
 
   // Return if the bundling failed to generate output files or there are errors
-  if (!result.outputFiles || result.errors.length) {
+  if (!codeResults.outputFiles || codeResults.errors.length) {
     return { success: false };
   }
 
-  // Structure the bundling output files
+  // Structure the code bundling output files
   const initialFiles: FileInfo[] = [];
   const outputFiles: OutputFile[] = [];
-  for (const outputFile of result.outputFiles) {
+  for (const outputFile of codeResults.outputFiles) {
     // Entries in the metafile are relative to the `absWorkingDir` option which is set to the workspaceRoot
     const relativeFilePath = path.relative(workspaceRoot, outputFile.path);
-    const entryPoint = result.metafile?.outputs[relativeFilePath]?.entryPoint;
+    const entryPoint = codeResults.metafile?.outputs[relativeFilePath]?.entryPoint;
 
     outputFile.path = relativeFilePath;
 
@@ -133,6 +146,15 @@ export async function buildEsbuildBrowser(
     outputFiles.push(outputFile);
   }
 
+  // Add global stylesheets output files
+  outputFiles.push(...styleResults.outputFiles);
+  initialFiles.push(...styleResults.initialFiles);
+
+  // Return if the global stylesheet bundling has errors
+  if (styleResults.errors.length) {
+    return { success: false };
+  }
+
   // Create output directory if needed
   try {
     await fs.mkdir(outputPath, { recursive: true });
@@ -143,25 +165,6 @@ export async function buildEsbuildBrowser(
     return { success: false };
   }
 
-  // Process global stylesheets
-  const styleResults = await bundleGlobalStylesheets(
-    workspaceRoot,
-    outputNames,
-    options,
-    optimizationOptions,
-    sourcemapOptions,
-  );
-  outputFiles.push(...styleResults.outputFiles);
-  initialFiles.push(...styleResults.initialFiles);
-
-  // Log all warnings and errors generated during bundling
-  await logMessages(context, styleResults);
-
-  // Return if the bundling has errors
-  if (styleResults.errors.length) {
-    return { success: false };
-  }
-
   // Generate index HTML file
   if (options.index) {
     const entrypoints = generateEntryPoints({