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.

Author: clydin

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),

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) => {

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,
+          ),
         );
       };
     },