fix(@angular/build): prevent full page reload on HMR updates with SSR enabled

This commit resolves an issue where HMR would incorrectly trigger a full page reload when used with SSR.

Closes #29372

Author: alan-agius4

packages/angular/build/src/builders/application/build-action.ts

@@ -295,7 +295,7 @@ function* emitOutputResults(
 
       if (needFile) {
         // Updates to non-JS files must signal an update with the dev server
-        if (!/(?:\.js|\.map)?$/.test(file.path)) {
+        if (!/(?:\.m?js|\.map)?$/.test(file.path)) {
           incrementalResult.background = false;
         }
 

packages/angular/build/src/builders/dev-server/vite-server.ts

@@ -218,6 +218,8 @@ export async function* serveWithVite(
     }
 
     let needClientUpdate = true;
+    const componentUpdateIds: string[] = [];
+
     switch (result.kind) {
       case ResultKind.Full:
         if (result.detail?.['htmlIndexPath']) {
@@ -250,11 +252,6 @@ export async function* serveWithVite(
           );
         }
 
-        // Invalidate SSR module graph to ensure that only new rebuild is used and not stale component updates
-        if (server && browserOptions.ssr && templateUpdates.size > 0) {
-          server.moduleGraph.invalidateAll();
-        }
-
         // Clear stale template updates on code rebuilds
         templateUpdates.clear();
 
@@ -302,28 +299,14 @@ export async function* serveWithVite(
           server,
           'Builder must provide an initial full build before component update results.',
         );
-
-        // Invalidate SSR module graph to ensure that new component updates are used
-        // TODO: Use fine-grained invalidation of only the component update modules
-        if (browserOptions.ssr) {
-          server.moduleGraph.invalidateAll();
-          const { ɵresetCompiledComponents } = (await server.ssrLoadModule('/main.server.mjs')) as {
-            ɵresetCompiledComponents: () => void;
-          };
-          ɵresetCompiledComponents();
-        }
-
         for (const componentUpdate of result.updates) {
           if (componentUpdate.type === 'template') {
+            componentUpdateIds.push(componentUpdate.id);
             templateUpdates.set(componentUpdate.id, componentUpdate.content);
-            server.ws.send('angular:component-update', {
-              id: componentUpdate.id,
-              timestamp: Date.now(),
-            });
           }
         }
-        context.logger.info('Component update sent to client(s).');
-        continue;
+
+        break;
       default:
         context.logger.warn(`Unknown result kind [${(result as Result).kind}] provided by build.`);
         continue;
@@ -367,17 +350,17 @@ export async function* serveWithVite(
         ]),
       ];
 
-      if (needClientUpdate) {
-        await handleUpdate(
-          normalizePath,
-          generatedFiles,
-          assetFiles,
-          server,
-          serverOptions,
-          context.logger,
-          componentStyles,
-        );
-      }
+      await handleUpdate(
+        normalizePath,
+        generatedFiles,
+        assetFiles,
+        server,
+        serverOptions,
+        context.logger,
+        componentStyles,
+        componentUpdateIds,
+        needClientUpdate,
+      );
     } else {
       const projectName = context.target?.project;
       if (!projectName) {
@@ -491,6 +474,8 @@ async function handleUpdate(
   serverOptions: NormalizedDevServerOptions,
   logger: BuilderContext['logger'],
   componentStyles: Map<string, ComponentStyleRecord>,
+  componentUpdateIds: string[],
+  needClientUpdate: boolean,
 ): Promise<void> {
   const updatedFiles: string[] = [];
 
@@ -531,7 +516,11 @@ async function handleUpdate(
     updatedModules?.forEach((m) => server.moduleGraph.invalidateModule(m));
   }
 
-  if (!updatedFiles.length) {
+  if (!needClientUpdate) {
+    return;
+  }
+
+  if (!updatedFiles.length && !componentUpdateIds.length) {
     return;
   }
 
@@ -541,6 +530,17 @@ async function handleUpdate(
   }
 
   if (serverOptions.hmr) {
+    for (const id of componentUpdateIds) {
+      server.ws.send('angular:component-update', {
+        id,
+        timestamp: Date.now(),
+      });
+    }
+
+    if (componentUpdateIds.length) {
+      logger.info('Component update sent to client(s).');
+    }
+
     if (updatedFiles.every((f) => f.endsWith('.css'))) {
       let requiresReload = false;
       const timestamp = Date.now();