refactor(@angular/build): support multiple results per application build action

The `application` builder may now return more than one build result per
rebuild action. This will typically occur when using the development server
with HMR enabled. In this scenario, component template update results may
be sent to the development server in addition to incremental updates for
global styles. TailwindCSS, for instance, may update the global stylesheet
for an application based on the usage of styles within a given template.

Author: clydin

packages/angular/build/src/builders/application/build-action.ts

@@ -144,7 +144,7 @@ export async function* runEsBuildBuildAction(
   // Output the first build results after setting up the watcher to ensure that any code executed
   // higher in the iterator call stack will trigger the watcher. This is particularly relevant for
   // unit tests which execute the builder and modify the file system programmatically.
-  yield emitOutputResult(result, outputOptions);
+  yield* emitOutputResults(result, outputOptions);
 
   // Finish if watch mode is not enabled
   if (!watcher) {
@@ -196,7 +196,7 @@ export async function* runEsBuildBuildAction(
         watcher.remove([...staleWatchFiles]);
       }
 
-      yield emitOutputResult(
+      yield* emitOutputResults(
         result,
         outputOptions,
         incrementalResults ? rebuildState.previousOutputInfo : undefined,
@@ -210,7 +210,7 @@ export async function* runEsBuildBuildAction(
   }
 }
 
-function emitOutputResult(
+function* emitOutputResults(
   {
     outputFiles,
     assetFiles,
@@ -223,16 +223,18 @@ function emitOutputResult(
   }: ExecutionResult,
   outputOptions: NormalizedApplicationBuildOptions['outputOptions'],
   previousOutputInfo?: ReadonlyMap<string, { hash: string; type: BuildOutputFileType }>,
-): Result {
+): Iterable<Result> {
   if (errors.length > 0) {
-    return {
+    yield {
       kind: ResultKind.Failure,
       errors: errors as ResultMessage[],
       warnings: warnings as ResultMessage[],
       detail: {
         outputOptions,
       },
     };
+
+    return;
   }
 
   // Template updates only exist if no other JS changes have occurred
@@ -247,7 +249,7 @@ function emitOutputResult(
       })),
     };
 
-    return updateResult;
+    yield updateResult;
   }
 
   // Use an incremental result if previous output information is available
@@ -273,6 +275,13 @@ function emitOutputResult(
     for (const file of outputFiles) {
       removedOutputFiles.delete(file.path);
 
+      // Temporarily ignore JS files until Angular compiler plugin refactor to allow
+      // bypassing application code bundling for template affecting only changes.
+      // TODO: Remove once refactor is complete.
+      if (hasTemplateUpdates && /\.[cm]?js(?:\.map)?$/.test(file.path)) {
+        continue;
+      }
+
       const previousHash = previousOutputInfo.get(file.path)?.hash;
       let needFile = false;
       if (previousHash === undefined) {
@@ -312,7 +321,9 @@ function emitOutputResult(
       };
     }
 
-    return incrementalResult;
+    yield incrementalResult;
+
+    return;
   }
 
   // Otherwise, use a full result
@@ -343,5 +354,5 @@ function emitOutputResult(
     };
   }
 
-  return result;
+  yield result;
 }

packages/angular/build/src/builders/application/tests/behavior/rebuild-errors_spec.ts

@@ -132,7 +132,10 @@ describeBuilder(buildApplication, APPLICATION_BUILDER_INFO, (harness) => {
 
                 // Make an unrelated change to verify error cache was updated
                 // Should continue showing no error
-                await harness.modifyFile('src/main.ts', (content) => content + '\n');
+                await harness.modifyFile(
+                  'src/main.ts',
+                  (content) => content + '\nconsole.log("changed");',
+                );
 
                 break;
               case 4: