From e74300a2cbc666482992fa8d6dbfeef37f3a9db5 Mon Sep 17 00:00:00 2001
From: Charles Lyding <19598772+clydin@users.noreply.github.com>
Date: Wed, 8 Jan 2025 22:22:40 -0500
Subject: [PATCH] fix(@angular/build): use component updates for component
 style HMR

The newly stable template HMR support has also been improved to support hot
replacement of component stylesheets. While this is not as fast during a rebuild
as external stylesheet based HMR, it does currently avoid some edge cases with
the current implementation. Once these cases are resolved, the default may
be reverted to the previous setup.

If the previous behavior is preferred, the `NG_HMR_CSTYLES=1` environment
variable can be used.

(cherry picked from commit ba51e72b5138735b42a4057ad60635b95d11381a)
---
 packages/angular/build/src/builders/dev-server/vite-server.ts | 2 +-
 packages/angular/build/src/utils/environment-options.ts       | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

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 8521b9af6674..89df08e7404f 100644
--- a/packages/angular/build/src/builders/dev-server/vite-server.ts
+++ b/packages/angular/build/src/builders/dev-server/vite-server.ts
@@ -138,7 +138,7 @@ export async function* serveWithVite(
     process.setSourceMapsEnabled(true);
   }
 
-  // Enable to support link-based component style hot reloading (`NG_HMR_CSTYLES=0` can be used to disable selectively)
+  // Enable to support link-based component style hot reloading (`NG_HMR_CSTYLES=1` can be used to enable)
   browserOptions.externalRuntimeStyles =
     serverOptions.liveReload && serverOptions.hmr && useComponentStyleHmr;
 
diff --git a/packages/angular/build/src/utils/environment-options.ts b/packages/angular/build/src/utils/environment-options.ts
index 63abd82af46e..ea06fea2d09f 100644
--- a/packages/angular/build/src/utils/environment-options.ts
+++ b/packages/angular/build/src/utils/environment-options.ts
@@ -103,7 +103,7 @@ export const shouldOptimizeChunks =
 
 const hmrComponentStylesVariable = process.env['NG_HMR_CSTYLES'];
 export const useComponentStyleHmr =
-  !isPresent(hmrComponentStylesVariable) || !isDisabled(hmrComponentStylesVariable);
+  isPresent(hmrComponentStylesVariable) && isEnabled(hmrComponentStylesVariable);
 
 const hmrComponentTemplateVariable = process.env['NG_HMR_TEMPLATES'];
 export const useComponentTemplateHmr =