From 58c2122fda84fa4388ca9ec6a0390f3eb40a2a72 Mon Sep 17 00:00:00 2001
From: Charles Lyding <19598772+clydin@users.noreply.github.com>
Date: Tue, 28 Jan 2025 18:08:22 -0500
Subject: [PATCH] refactor(@angular/build): allow component update invalidation
 from client

If HMR is enabled, a component update has the potential to be unsupported
at runtime or may cause an exception. While build time analysis attempts
to verify that an update is possible, there could be cases that are as of
yet unknown. For those cases, the runtime can now signal this information
back to the development server which will clear the errant component update
and trigger a full page reload. This action will be logged to the development
server console along with an optional message from the client.

(cherry picked from commit 9525eee739848af52ea998c5d4bc13827bcdaf55)
---
 .../src/builders/dev-server/vite-server.ts    | 35 +++++++++++++++++++
 1 file changed, 35 insertions(+)

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 e76573c30151..89b93d2a8f51 100644
--- a/packages/angular/build/src/builders/dev-server/vite-server.ts
+++ b/packages/angular/build/src/builders/dev-server/vite-server.ts
@@ -457,6 +457,41 @@ export async function* serveWithVite(
         }
       });
 
+      // Setup component HMR invalidation
+      // Invalidation occurs when the runtime cannot update a component
+      server.hot.on(
+        'angular:invalidate',
+        (data: { id: string; message?: string; error?: boolean }) => {
+          if (typeof data?.id !== 'string') {
+            context.logger.warn(
+              'Development server client sent invalid internal invalidate event.',
+            );
+          }
+
+          // Clear invalid template update
+          templateUpdates.delete(data.id);
+
+          // Some cases are expected unsupported update scenarios but some may be errors.
+          // If an error occurred, log the error in addition to the invalidation.
+          if (data.error) {
+            context.logger.error(
+              `Component update failed${data.message ? `: ${data.message}` : '.'}` +
+                '\nPlease consider reporting the error at https://github.com/angular/angular-cli/issues',
+            );
+          } else {
+            context.logger.warn(
+              `Component update unsupported${data.message ? `: ${data.message}` : '.'}`,
+            );
+          }
+
+          server?.ws.send({
+            type: 'full-reload',
+            path: '*',
+          });
+          context.logger.info('Page reload sent to client(s).');
+        },
+      );
+
       const urls = server.resolvedUrls;
       if (urls && (urls.local.length || urls.network.length)) {
         serverUrl = new URL(urls.local[0] ?? urls.network[0]);