From 97c71a9dbd07089660223633ba6f37bfcd3f96bc Mon Sep 17 00:00:00 2001
From: Charles Lyding <19598772+clydin@users.noreply.github.com>
Date: Fri, 17 Jan 2025 10:44:09 -0500
Subject: [PATCH] fix(@angular/build): reset component updates on dev-server
 index request

An index request from a client browser indicates a full page reload of the
application should occur. In this case, the latest full output of the
application should be sent to the client which would contain all separate
component and incremental updates that have occurred since the last full
update from the build system. To provide for this request, the individual
component updates that were previously queued are now cleared to avoid
reprocessing already present updates within the application output files.
---
 .../angular/build/src/builders/dev-server/vite-server.ts | 1 +
 .../src/tools/vite/middlewares/index-html-middleware.ts  | 4 ++++
 .../src/tools/vite/plugins/setup-middlewares-plugin.ts   | 9 ++++++++-
 3 files changed, 13 insertions(+), 1 deletion(-)

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 13da2788fe57..0c5924716955 100644
--- a/packages/angular/build/src/builders/dev-server/vite-server.ts
+++ b/packages/angular/build/src/builders/dev-server/vite-server.ts
@@ -819,6 +819,7 @@ export async function setupServer(
         componentStyles,
         templateUpdates,
         ssrMode,
+        resetComponentUpdates: () => templateUpdates.clear(),
       }),
       createRemoveIdPrefixPlugin(externalMetadata.explicitBrowser),
       await createAngularSsrTransformPlugin(serverOptions.workspaceRoot),
diff --git a/packages/angular/build/src/tools/vite/middlewares/index-html-middleware.ts b/packages/angular/build/src/tools/vite/middlewares/index-html-middleware.ts
index 67331ac46250..7959ccb7ec03 100644
--- a/packages/angular/build/src/tools/vite/middlewares/index-html-middleware.ts
+++ b/packages/angular/build/src/tools/vite/middlewares/index-html-middleware.ts
@@ -13,6 +13,7 @@ import { AngularMemoryOutputFiles, pathnameWithoutBasePath } from '../utils';
 export function createAngularIndexHtmlMiddleware(
   server: ViteDevServer,
   outputFiles: AngularMemoryOutputFiles,
+  resetComponentUpdates: () => void,
   indexHtmlTransformer: ((content: string) => Promise<string>) | undefined,
 ): Connect.NextHandleFunction {
   return function angularIndexHtmlMiddleware(req, res, next) {
@@ -39,6 +40,9 @@ export function createAngularIndexHtmlMiddleware(
       return;
     }
 
+    // A request for the index indicates a full page reload request.
+    resetComponentUpdates();
+
     server
       .transformIndexHtml(req.url, Buffer.from(rawHtml).toString('utf-8'))
       .then(async (processedHtml) => {
diff --git a/packages/angular/build/src/tools/vite/plugins/setup-middlewares-plugin.ts b/packages/angular/build/src/tools/vite/plugins/setup-middlewares-plugin.ts
index 63407c56d3e5..27f40ff909d7 100644
--- a/packages/angular/build/src/tools/vite/plugins/setup-middlewares-plugin.ts
+++ b/packages/angular/build/src/tools/vite/plugins/setup-middlewares-plugin.ts
@@ -53,6 +53,7 @@ interface AngularSetupMiddlewaresPluginOptions {
   componentStyles: Map<string, ComponentStyleRecord>;
   templateUpdates: Map<string, string>;
   ssrMode: ServerSsrMode;
+  resetComponentUpdates: () => void;
 }
 
 async function createEncapsulateStyle(): Promise<
@@ -82,6 +83,7 @@ export function createAngularSetupMiddlewaresPlugin(
         componentStyles,
         templateUpdates,
         ssrMode,
+        resetComponentUpdates,
       } = options;
 
       // Headers, assets and resources get handled first
@@ -117,7 +119,12 @@ export function createAngularSetupMiddlewaresPlugin(
 
         server.middlewares.use(angularHtmlFallbackMiddleware);
         server.middlewares.use(
-          createAngularIndexHtmlMiddleware(server, outputFiles, indexHtmlTransformer),
+          createAngularIndexHtmlMiddleware(
+            server,
+            outputFiles,
+            resetComponentUpdates,
+            indexHtmlTransformer,
+          ),
         );
       };
     },