fix(@angular-devkit/build-angular): fix hanging terminal when `browse…

…r-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. (cherry picked from commit 5d79ab7)
angular · Nov 18, 2024 · 25d928b · 25d928b
1 parent ea5ae68
commit 25d928b
Showing 1 changed file with 14 additions and 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
@@ -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.