fix(@angular/build): correctly use dev-server hmr option to control s…

…tylesheet 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.
angular · Nov 5, 2024 · 9f5b5eb · 9f5b5eb
1 parent ae9dfdd
commit 9f5b5eb
Show file tree

Hide file tree

Showing 6 changed files with 16 additions and 11 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -84,8 +84,7 @@
     },
     "hmr": {
       "type": "boolean",
-      "description": "Enable hot module replacement.",
-      "default": false
+      "description": "Enable hot module replacement."
     },
     "watch": {
       "type": "boolean",