From 9f5b5eb46e4151537eb2a96bef62f80e3aa5ba11 Mon Sep 17 00:00:00 2001
From: Charles Lyding <19598772+clydin@users.noreply.github.com>
Date: Sun, 3 Nov 2024 09:25:31 -0500
Subject: [PATCH] fix(@angular/build): correctly use dev-server hmr option to
 control stylesheet hot replacement

The development server's `hmr` option will now disable both global and component
stylesheet hot replacement if explicitly disabled. These features are enabled by
default for all projects.
---
 packages/angular/build/src/builders/dev-server/options.ts | 4 ++--
 .../angular/build/src/builders/dev-server/schema.json     | 3 +--
 .../angular/build/src/builders/dev-server/vite-server.ts  | 7 ++++---
 .../build_angular/src/builders/dev-server/builder.ts      | 8 +++++++-
 .../build_angular/src/builders/dev-server/options.ts      | 2 +-
 .../build_angular/src/builders/dev-server/schema.json     | 3 +--
 6 files changed, 16 insertions(+), 11 deletions(-)

diff --git a/packages/angular/build/src/builders/dev-server/options.ts b/packages/angular/build/src/builders/dev-server/options.ts
index 080e168699bc..237c26b8c2f6 100644
--- a/packages/angular/build/src/builders/dev-server/options.ts
+++ b/packages/angular/build/src/builders/dev-server/options.ts
@@ -114,8 +114,8 @@ export async function normalizeOptions(
     open,
     verbose,
     watch,
-    liveReload,
-    hmr,
+    liveReload: !!liveReload,
+    hmr: hmr ?? !!liveReload,
     headers,
     workspaceRoot,
     projectRoot,
diff --git a/packages/angular/build/src/builders/dev-server/schema.json b/packages/angular/build/src/builders/dev-server/schema.json
index 3adce45eb71a..2eb16987b8ca 100644
--- a/packages/angular/build/src/builders/dev-server/schema.json
+++ b/packages/angular/build/src/builders/dev-server/schema.json
@@ -67,8 +67,7 @@
     },
     "hmr": {
       "type": "boolean",
-      "description": "Enable hot module replacement.",
-      "default": false
+      "description": "Enable hot module replacement. Defaults to the value of 'liveReload'. Currently, only global and component stylesheets are supported."
     },
     "watch": {
       "type": "boolean",
diff --git a/packages/angular/build/src/builders/dev-server/vite-server.ts b/packages/angular/build/src/builders/dev-server/vite-server.ts
index 742f15155797..659d51bb2165 100644
--- a/packages/angular/build/src/builders/dev-server/vite-server.ts
+++ b/packages/angular/build/src/builders/dev-server/vite-server.ts
@@ -137,8 +137,9 @@ export async function* serveWithVite(
     process.setSourceMapsEnabled(true);
   }
 
-  // Enable to support component style hot reloading (`NG_HMR_CSTYLES=0` can be used to disable)
-  browserOptions.externalRuntimeStyles = !!serverOptions.liveReload && useComponentStyleHmr;
+  // Enable to support component style hot reloading (`NG_HMR_CSTYLES=0` can be used to disable selectively)
+  browserOptions.externalRuntimeStyles =
+    serverOptions.liveReload && serverOptions.hmr && useComponentStyleHmr;
 
   // Enable to support component template hot replacement (`NG_HMR_TEMPLATE=1` can be used to enable)
   browserOptions.templateUpdates = !!serverOptions.liveReload && useComponentTemplateHmr;
@@ -466,7 +467,7 @@ async function handleUpdate(
     return;
   }
 
-  if (serverOptions.liveReload || serverOptions.hmr) {
+  if (serverOptions.hmr) {
     if (updatedFiles.every((f) => f.endsWith('.css'))) {
       const timestamp = Date.now();
       server.ws.send({
diff --git a/packages/angular_devkit/build_angular/src/builders/dev-server/builder.ts b/packages/angular_devkit/build_angular/src/builders/dev-server/builder.ts
index 3b244a008c2c..76f8e282e8e4 100644
--- a/packages/angular_devkit/build_angular/src/builders/dev-server/builder.ts
+++ b/packages/angular_devkit/build_angular/src/builders/dev-server/builder.ts
@@ -85,12 +85,15 @@ export function execute(
           );
         }
 
+        // New build system defaults hmr option to the value of liveReload
+        normalizedOptions.hmr ??= normalizedOptions.liveReload;
+
         return defer(() =>
           Promise.all([import('@angular/build/private'), import('../browser-esbuild')]),
         ).pipe(
           switchMap(([{ serveWithVite, buildApplicationInternal }, { convertBrowserOptions }]) =>
             serveWithVite(
-              normalizedOptions,
+              normalizedOptions as typeof normalizedOptions & { hmr: boolean },
               builderName,
               (options, context, codePlugins) => {
                 return builderName === '@angular-devkit/build-angular:browser-esbuild'
@@ -124,6 +127,9 @@ export function execute(
         );
       }
 
+      // Webpack based build systems default to false for hmr option
+      normalizedOptions.hmr ??= false;
+
       // Use Webpack for all other browser targets
       return defer(() => import('./webpack-server')).pipe(
         switchMap(({ serveWebpackBrowser }) =>
diff --git a/packages/angular_devkit/build_angular/src/builders/dev-server/options.ts b/packages/angular_devkit/build_angular/src/builders/dev-server/options.ts
index 48bdc2763a17..6fa23123a236 100644
--- a/packages/angular_devkit/build_angular/src/builders/dev-server/options.ts
+++ b/packages/angular_devkit/build_angular/src/builders/dev-server/options.ts
@@ -116,7 +116,7 @@ export async function normalizeOptions(
     open,
     verbose,
     watch,
-    liveReload,
+    liveReload: !!liveReload,
     hmr,
     headers,
     workspaceRoot,
diff --git a/packages/angular_devkit/build_angular/src/builders/dev-server/schema.json b/packages/angular_devkit/build_angular/src/builders/dev-server/schema.json
index 715d9573e304..a1001107f86f 100644
--- a/packages/angular_devkit/build_angular/src/builders/dev-server/schema.json
+++ b/packages/angular_devkit/build_angular/src/builders/dev-server/schema.json
@@ -84,8 +84,7 @@
     },
     "hmr": {
       "type": "boolean",
-      "description": "Enable hot module replacement.",
-      "default": false
+      "description": "Enable hot module replacement."
     },
     "watch": {
       "type": "boolean",