From 6618112a9e1fc448d6b14904d554f467ebfdff37 Mon Sep 17 00:00:00 2001
From: Doug Parker <dgp1130@users.noreply.github.com>
Date: Fri, 15 Nov 2024 21:20:23 -0800
Subject: [PATCH] fix(@angular-devkit/build-angular): fix hanging terminal when
 `browser-sync` is not installed

Running the SSR dev server when `browser-sync` is not installed would print the error, but then build the browser and server targets, then hang and never return control to the user until they manually Ctrl+C. This change skips building at all if `browser-sync` is not installed, immediately returning control to the user.

This is a simple workaround, but there are two deeper bugs which would benefit from investigation:
1.  Figure out why NPM sometimes doesn't install `browser-sync`. It was happening inconsistently for me when running `ng add @angular/ssr`.
2.  Figure out why Architect does not cancel/await targets still executing when a builder completes.
---
 .../src/builders/ssr-dev-server/index.ts      | 27 ++++++++++---------
 1 file changed, 14 insertions(+), 13 deletions(-)

diff --git a/packages/angular_devkit/build_angular/src/builders/ssr-dev-server/index.ts b/packages/angular_devkit/build_angular/src/builders/ssr-dev-server/index.ts
index a9fb1aa105f7..bba447815366 100644
--- a/packages/angular_devkit/build_angular/src/builders/ssr-dev-server/index.ts
+++ b/packages/angular_devkit/build_angular/src/builders/ssr-dev-server/index.ts
@@ -62,6 +62,20 @@ export function execute(
   options: SSRDevServerBuilderOptions,
   context: BuilderContext,
 ): Observable<SSRDevServerBuilderOutput> {
+  let browserSync: typeof import('browser-sync');
+  try {
+    browserSync = require('browser-sync');
+  } catch {
+    return of({
+      success: false,
+      error:
+        // eslint-disable-next-line max-len
+        'Required dependency `browser-sync` is not installed, most likely you need to run `npm install browser-sync --save-dev` in your project.',
+    });
+  }
+
+  const bsInstance = browserSync.create();
+
   const browserTarget = targetFromTargetString(options.browserTarget);
   const serverTarget = targetFromTargetString(options.serverTarget);
   const getBaseUrl = (bs: BrowserSyncInstance) =>
@@ -80,19 +94,6 @@ export function execute(
     verbose: options.verbose,
   } as json.JsonObject);
 
-  let browserSync: typeof import('browser-sync');
-  try {
-    browserSync = require('browser-sync');
-  } catch {
-    return of({
-      success: false,
-      error:
-        '"browser-sync" is not installed, most likely you need to run `npm install browser-sync --save-dev` in your project.',
-    });
-  }
-
-  const bsInstance = browserSync.create();
-
   context.logger.error(tags.stripIndents`
   ****************************************************************************************
   This is a simple server for use in testing or debugging Angular applications locally.