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.

Author: clydin

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

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;
 }