diff --git a/packages/angular_devkit/build_angular/src/builders/dev-server/vite-server.ts b/packages/angular_devkit/build_angular/src/builders/dev-server/vite-server.ts
index f7a3c05fff39..d2ff520cf620 100644
--- a/packages/angular_devkit/build_angular/src/builders/dev-server/vite-server.ts
+++ b/packages/angular_devkit/build_angular/src/builders/dev-server/vite-server.ts
@@ -443,6 +443,10 @@ export async function setupServer(
const relativeFile = normalizePath(path.relative(virtualProjectRoot, file));
const codeContents = outputFiles.get(relativeFile)?.contents;
if (codeContents === undefined) {
+ if (relativeFile.endsWith('/node_modules/vite/dist/client/client.mjs')) {
+ return loadViteClientCode(file);
+ }
+
return;
}
@@ -683,6 +687,28 @@ export async function setupServer(
return configuration;
}
+/**
+ * Reads the resolved Vite client code from disk and updates the content to remove
+ * an unactionable suggestion to update the Vite configuration file to disable the
+ * error overlay. The Vite configuration file is not present when used in the Angular
+ * CLI.
+ * @param file The absolute path to the Vite client code.
+ * @returns
+ */
+async function loadViteClientCode(file: string) {
+ const originalContents = await readFile(file, 'utf-8');
+ let contents = originalContents.replace('You can also disable this overlay by setting', '');
+ contents = contents.replace(
+ // eslint-disable-next-line max-len
+ 'server.hmr.overlay
to false
in vite.config.js.
',
+ '',
+ );
+
+ assert(originalContents !== contents, 'Failed to update Vite client error overlay text.');
+
+ return contents;
+}
+
function pathnameWithoutServePath(url: string, serverOptions: NormalizedDevServerOptions): string {
const parsedUrl = new URL(url, 'http://localhost');
let pathname = decodeURIComponent(parsedUrl.pathname);