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,16 @@ 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();
+          const { ɵresetCompiledComponents } = (await server.ssrLoadModule('/main.server.mjs')) as {
+            ɵresetCompiledComponents: () => void;
+          };
+          ɵresetCompiledComponents();
+        }
+
         for (const componentUpdate of result.updates) {
           if (componentUpdate.type === 'template') {
             templateUpdates.set(componentUpdate.id, componentUpdate.content);

packages/angular/build/src/tools/esbuild/application-code-bundle.ts

@@ -357,6 +357,9 @@ export function createServerMainCodeBundleOptions(
               ɵgetOrCreateAngularServerApp,
             } from '@angular/ssr';`,
 
+            // Need for HMR
+            `export { ɵresetCompiledComponents } from '@angular/core';`,
+
             // Re-export all symbols including default export from 'main.server.ts'
             `export { default } from '${mainServerEntryPointJsImport}';`,
             `export * from '${mainServerEntryPointJsImport}';`,

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

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