fix(@angular-devkit/build-angular): avoid dev server update analysis …

…when build fails with vite

When using an esbuild-based builder (`application` or `browser-esbuild`) with the development server,
a build that fails due to an TypeScript, Angular, or bundling error will now skip all output file result
processing. This avoids unnecessary work since an update of the client code will not take place. This
also allows for an error overlay to be displayed showing the first error available. The full list of
errors will still be shown in the console used to execute the `ng serve` command. Fixing the error will
automatically clear the error overlay but if there were multiple errors the next unfixed error will be
shown instead.

(cherry picked from commit 08c1229)

packages/angular_devkit/build_angular/src/builders/application/execute-build.ts

@@ -146,6 +146,8 @@ export async function executeBuild(
 
   // Return if the bundling has errors
   if (bundlingResult.errors) {
+    executionResult.addErrors(bundlingResult.errors);
+
     return executionResult;
   }
 

packages/angular_devkit/build_angular/src/builders/dev-server/vite-server.ts

@@ -115,6 +115,7 @@ export async function* serveWithVite(
 
   let server: ViteDevServer | undefined;
   let listeningAddress: AddressInfo | undefined;
+  let hadError = false;
   const generatedFiles = new Map<string, OutputFileRecord>();
   const assetFiles = new Map<string, string>();
   const build =
@@ -134,6 +135,29 @@ export async function* serveWithVite(
   )) {
     assert(result.outputFiles, 'Builder did not provide result files.');
 
+    // If build failed, nothing to serve
+    if (!result.success) {
+      // If server is active, send an error notification
+      if (result.errors?.length && server) {
+        hadError = true;
+        server.ws.send({
+          type: 'error',
+          err: {
+            message: result.errors[0].text,
+            stack: '',
+            loc: result.errors[0].location,
+          },
+        });
+      }
+      continue;
+    } else if (hadError && server) {
+      // Send an empty update to clear the error overlay
+      server.ws.send({
+        'type': 'update',
+        updates: [],
+      });
+    }
+
     // Analyze result files for changes
     analyzeResultFiles(normalizePath, htmlIndexPath, result.outputFiles, generatedFiles);
 

packages/angular_devkit/build_angular/src/tools/esbuild/bundler-execution-result.ts

@@ -6,6 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
+import type { Message } from 'esbuild';
 import type { ChangedFiles } from '../../tools/esbuild/watcher';
 import type { SourceFileCache } from './angular/source-file-cache';
 import type { BuildOutputFile, BuildOutputFileType, BundlerContext } from './bundler-context';
@@ -28,6 +29,7 @@ export interface RebuildState {
 export class ExecutionResult {
   outputFiles: BuildOutputFile[] = [];
   assetFiles: BuildOutputAsset[] = [];
+  errors: Message[] = [];
 
   constructor(
     private rebuildContexts: BundlerContext[],
@@ -42,17 +44,22 @@ export class ExecutionResult {
     this.assetFiles.push(...assets);
   }
 
+  addErrors(errors: Message[]): void {
+    this.errors.push(...errors);
+  }
+
   get output() {
     return {
-      success: this.outputFiles.length > 0,
+      success: this.errors.length === 0,
     };
   }
 
   get outputWithFiles() {
     return {
-      success: this.outputFiles.length > 0,
+      success: this.errors.length === 0,
       outputFiles: this.outputFiles,
       assetFiles: this.assetFiles,
+      errors: this.errors,
     };
   }