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