fix(@angular/build): invalidate component template updates with dev-server SSR

To ensure that the Vite-based dev-server SSR uses updated component template update
modules, the server module graph is invalidated when component updates are sent.
This currently does a full invalidation but in the future this could potentially be
optimized to only update the relevant modules. A fix is also present to correct the
component update identifier usage to prevent lookup misses.

Author: clydin

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

@@ -233,6 +233,12 @@ export async function* serveWithVite(
             assetFiles.set('/' + normalizePath(outputPath), normalizePath(file.inputPath));
           }
         }
+
+        // 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();
 
@@ -256,6 +262,12 @@ export async function* serveWithVite(
           '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();
+        }
+
         for (const componentUpdate of result.updates) {
           if (componentUpdate.type === 'template') {
             templateUpdates.set(componentUpdate.id, componentUpdate.content);

packages/angular/build/src/tools/vite/plugins/angular-memory-plugin.ts

@@ -66,7 +66,7 @@ export async function createAngularMemoryPlugin(
         const requestUrl = new URL(id.slice(1), 'http://localhost');
         const componentId = requestUrl.searchParams.get('c');
 
-        return (componentId && options.templateUpdates?.get(componentId)) ?? '';
+        return (componentId && options.templateUpdates?.get(encodeURIComponent(componentId))) ?? '';
       }
 
       const [file] = id.split('?', 1);