refactor(@angular/build): allow component update invalidation from cl…

…ient

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.

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]);