From beefed839f782216c9e4ee28673a95b6be8fb26c Mon Sep 17 00:00:00 2001
From: Charles Lyding <19598772+clydin@users.noreply.github.com>
Date: Tue, 4 Feb 2025 13:19:11 -0500
Subject: [PATCH] fix(@angular/build): always provide Vite client helpers with
 development server

In addition to the WebSocket code, the Vite client module contains helper
functions which may be injected into modules at request time. These helpers
are required for certain behavior to function. Previously, when `--no-live-reload`
was used, these helpers may not have been available which led to runtime
errors. These runtime errors will no longer occur. However, the browser console
will now log that the Vite client cannot connect to the development server
WebSocket. This is expected in this case since live reload functionality
was disabled and the server side is intentionally not available.
---
 .../src/builders/dev-server/vite-server.ts    |  2 +-
 .../vite/plugins/angular-memory-plugin.ts     | 20 +++++++++++++++----
 2 files changed, 17 insertions(+), 5 deletions(-)

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 8bd8ab58fe87..fcdf5e42934a 100644
--- a/packages/angular/build/src/builders/dev-server/vite-server.ts
+++ b/packages/angular/build/src/builders/dev-server/vite-server.ts
@@ -898,7 +898,7 @@ export async function setupServer(
         outputFiles,
         templateUpdates,
         external: externalMetadata.explicitBrowser,
-        skipViteClient: serverOptions.liveReload === false && serverOptions.hmr === false,
+        disableViteTransport: !serverOptions.liveReload,
       }),
     ],
     // Browser only optimizeDeps. (This does not run for SSR dependencies).
diff --git a/packages/angular/build/src/tools/vite/plugins/angular-memory-plugin.ts b/packages/angular/build/src/tools/vite/plugins/angular-memory-plugin.ts
index 2d7793dc41b0..036d2c400b2a 100644
--- a/packages/angular/build/src/tools/vite/plugins/angular-memory-plugin.ts
+++ b/packages/angular/build/src/tools/vite/plugins/angular-memory-plugin.ts
@@ -19,7 +19,7 @@ interface AngularMemoryPluginOptions {
   outputFiles: AngularMemoryOutputFiles;
   templateUpdates?: ReadonlyMap<string, string>;
   external?: string[];
-  skipViteClient?: boolean;
+  disableViteTransport?: boolean;
 }
 
 const ANGULAR_PREFIX = '/@ng/';
@@ -91,7 +91,7 @@ export async function createAngularMemoryPlugin(
       const codeContents = outputFiles.get(relativeFile)?.contents;
       if (codeContents === undefined) {
         if (relativeFile.endsWith('/node_modules/vite/dist/client/client.mjs')) {
-          return options.skipViteClient ? '' : loadViteClientCode(file);
+          return loadViteClientCode(file, options.disableViteTransport);
         }
 
         return undefined;
@@ -118,9 +118,9 @@ export async function createAngularMemoryPlugin(
  * @param file The absolute path to the Vite client code.
  * @returns
  */
-async function loadViteClientCode(file: string): Promise<string> {
+async function loadViteClientCode(file: string, disableViteTransport = false): Promise<string> {
   const originalContents = await readFile(file, 'utf-8');
-  const updatedContents = originalContents.replace(
+  let updatedContents = originalContents.replace(
     `"You can also disable this overlay by setting ",
       h("code", { part: "config-option-name" }, "server.hmr.overlay"),
       " to ",
@@ -133,5 +133,17 @@ async function loadViteClientCode(file: string): Promise<string> {
 
   assert(originalContents !== updatedContents, 'Failed to update Vite client error overlay text.');
 
+  if (disableViteTransport) {
+    const previousUpdatedContents = updatedContents;
+
+    updatedContents = updatedContents.replace('transport.connect(handleMessage)', '');
+    assert(
+      previousUpdatedContents !== updatedContents,
+      'Failed to update Vite client WebSocket disable.',
+    );
+
+    updatedContents = updatedContents.replace('console.debug("[vite] connecting...")', '');
+  }
+
   return updatedContents;
 }