fix(@angular-devkit/build-angular): update vite to version 5.4.14

package.json

@@ -210,7 +210,7 @@
     "undici": "6.11.1",
     "verdaccio": "5.29.2",
     "verdaccio-auth-memory": "^10.0.0",
-    "vite": "5.1.8",
+    "vite": "5.4.14",
     "watchpack": "2.4.0",
     "webpack": "5.94.0",
     "webpack-dev-middleware": "6.1.2",

packages/angular_devkit/build_angular/package.json

@@ -62,7 +62,7 @@
     "tree-kill": "1.2.2",
     "tslib": "2.6.2",
     "undici": "6.11.1",
-    "vite": "5.1.8",
+    "vite": "5.4.14",
     "watchpack": "2.4.0",
     "webpack": "5.94.0",
     "webpack-dev-middleware": "6.1.2",

packages/angular_devkit/build_angular/src/builders/dev-server/builder.ts

@@ -76,12 +76,6 @@ export function execute(
           );
         }
 
-        if (options.allowedHosts?.length) {
-          context.logger.warn(
-            `The "allowedHosts" option will not be used because it is not supported by the "${builderName}" builder.`,
-          );
-        }
-
         if (options.publicHost) {
           context.logger.warn(
             `The "publicHost" option will not be used because it is not supported by the "${builderName}" builder.`,

packages/angular_devkit/build_angular/src/builders/dev-server/schema.json

@@ -73,7 +73,7 @@
     },
     "allowedHosts": {
       "type": "array",
-      "description": "List of hosts that are allowed to access the dev server. This option has no effect when using the 'application' or other esbuild-based builders.",
+      "description": "List of hosts that are allowed to access the dev server.",
       "default": [],
       "items": {
         "type": "string"

packages/angular_devkit/build_angular/src/builders/dev-server/tests/execute-fetch.ts

@@ -6,8 +6,9 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
+import { IncomingMessage, RequestOptions, get } from 'node:http';
+import { text } from 'node:stream/consumers';
 import { lastValueFrom, mergeMap, take, timeout } from 'rxjs';
-import { URL } from 'url';
 import {
   BuilderHarness,
   BuilderHarnessExecutionOptions,
@@ -41,3 +42,48 @@ export async function executeOnceAndFetch<T>(
     ),
   );
 }
+
+/**
+ * Executes the builder and then immediately performs a GET request
+ * via the Node.js `http` builtin module. This is useful for cases
+ * where the `fetch` API is limited such as testing different `Host`
+ * header values with the development server.
+ * The `fetch` based alternative is preferred otherwise.
+ *
+ * @param harness A builder harness instance.
+ * @param url The URL string to get.
+ * @param options An options object.
+ */
+export async function executeOnceAndGet<T>(
+  harness: BuilderHarness<T>,
+  url: string,
+  options?: Partial<BuilderHarnessExecutionOptions> & { request?: RequestOptions },
+): Promise<BuilderHarnessExecutionResult & { response?: IncomingMessage; content?: string }> {
+  return lastValueFrom(
+    harness.execute().pipe(
+      timeout(30_000),
+      mergeMap(async (executionResult) => {
+        let response = undefined;
+        let content = undefined;
+        if (executionResult.result?.success) {
+          let baseUrl = `${executionResult.result.baseUrl}`;
+          baseUrl = baseUrl[baseUrl.length - 1] === '/' ? baseUrl : `${baseUrl}/`;
+          const resolvedUrl = new URL(url, baseUrl);
+
+          response = await new Promise<IncomingMessage>((resolve) =>
+            get(resolvedUrl, options?.request ?? {}, resolve),
+          );
+
+          if (response.statusCode === 200) {
+            content = await text(response);
+          }
+
+          response.resume();
+        }
+
+        return { ...executionResult, response, content };
+      }),
+      take(1),
+    ),
+  );
+}

packages/angular_devkit/build_angular/src/builders/dev-server/tests/options/allowed-hosts_spec.ts

@@ -7,65 +7,60 @@
  */
 
 import { executeDevServer } from '../../index';
-import { executeOnceAndFetch } from '../execute-fetch';
+import { executeOnceAndGet } from '../execute-fetch';
 import { describeServeBuilder } from '../jasmine-helpers';
 import { BASE_OPTIONS, DEV_SERVER_BUILDER_INFO } from '../setup';
 
 const FETCH_HEADERS = Object.freeze({ host: 'example.com' });
 
-describeServeBuilder(
-  executeDevServer,
-  DEV_SERVER_BUILDER_INFO,
-  (harness, setupTarget, isViteRun) => {
-    // TODO(fix-vite): currently this is broken in vite.
-    (isViteRun ? xdescribe : describe)('option: "allowedHosts"', () => {
-      beforeEach(async () => {
-        setupTarget(harness);
+describeServeBuilder(executeDevServer, DEV_SERVER_BUILDER_INFO, (harness, setupTarget, isVite) => {
+  describe('option: "allowedHosts"', () => {
+    beforeEach(async () => {
+      setupTarget(harness);
 
-        // Application code is not needed for these tests
-        await harness.writeFile('src/main.ts', '');
-      });
-
-      it('does not allow an invalid host when option is not present', async () => {
-        harness.useTarget('serve', {
-          ...BASE_OPTIONS,
-        });
+      // Application code is not needed for these tests
+      await harness.writeFile('src/main.ts', '');
+    });
 
-        const { result, response } = await executeOnceAndFetch(harness, '/', {
-          request: { headers: FETCH_HEADERS },
-        });
+    it('does not allow an invalid host when option is not present', async () => {
+      harness.useTarget('serve', { ...BASE_OPTIONS });
 
-        expect(result?.success).toBeTrue();
-        expect(await response?.text()).toBe('Invalid Host header');
+      const { result, response, content } = await executeOnceAndGet(harness, '/', {
+        request: { headers: FETCH_HEADERS },
       });
 
-      it('does not allow an invalid host when option is an empty array', async () => {
-        harness.useTarget('serve', {
-          ...BASE_OPTIONS,
-          allowedHosts: [],
-        });
+      expect(result?.success).toBeTrue();
+      if (isVite) {
+        expect(response?.statusCode).toBe(403);
+      } else {
+        expect(content).toBe('Invalid Host header');
+      }
+    });
 
-        const { result, response } = await executeOnceAndFetch(harness, '/', {
-          request: { headers: FETCH_HEADERS },
-        });
+    it('does not allow an invalid host when option is an empty array', async () => {
+      harness.useTarget('serve', { ...BASE_OPTIONS, allowedHosts: [] });
 
-        expect(result?.success).toBeTrue();
-        expect(await response?.text()).toBe('Invalid Host header');
+      const { result, response, content } = await executeOnceAndGet(harness, '/', {
+        request: { headers: FETCH_HEADERS },
       });
 
-      it('allows a host when specified in the option', async () => {
-        harness.useTarget('serve', {
-          ...BASE_OPTIONS,
-          allowedHosts: ['example.com'],
-        });
+      expect(result?.success).toBeTrue();
+      if (isVite) {
+        expect(response?.statusCode).toBe(403);
+      } else {
+        expect(content).toBe('Invalid Host header');
+      }
+    });
 
-        const { result, response } = await executeOnceAndFetch(harness, '/', {
-          request: { headers: FETCH_HEADERS },
-        });
+    it('allows a host when specified in the option', async () => {
+      harness.useTarget('serve', { ...BASE_OPTIONS, allowedHosts: ['example.com'] });
 
-        expect(result?.success).toBeTrue();
-        expect(await response?.text()).toContain('<title>');
+      const { result, content } = await executeOnceAndGet(harness, '/', {
+        request: { headers: FETCH_HEADERS },
       });
+
+      expect(result?.success).toBeTrue();
+      expect(content).toContain('<title>');
     });
-  },
-);
+  });
+});

packages/angular_devkit/build_angular/src/builders/dev-server/vite-server.ts

@@ -485,6 +485,7 @@ export async function setupServer(
       strictPort: true,
       host: serverOptions.host,
       open: serverOptions.open,
+      allowedHosts: serverOptions.allowedHosts,
       headers: serverOptions.headers,
       proxy,
       cors: {

packages/angular_devkit/build_angular/src/tools/vite/angular-memory-plugin.ts

@@ -74,10 +74,7 @@ export function createAngularMemoryPlugin(options: AngularMemoryPluginOptions):
       const codeContents = outputFiles.get(relativeFile)?.contents;
       if (codeContents === undefined) {
         if (relativeFile.endsWith('/node_modules/vite/dist/client/client.mjs')) {
-          return {
-            code: await loadViteClientCode(file),
-            map: await readFile(file + '.map', 'utf-8'),
-          };
+          return await loadViteClientCode(file);
         }
 
         return;
@@ -309,19 +306,21 @@ export function createAngularMemoryPlugin(options: AngularMemoryPluginOptions):
  * @param file The absolute path to the Vite client code.
  * @returns
  */
-async function loadViteClientCode(file: string) {
+async function loadViteClientCode(file: string): Promise<string> {
   const originalContents = await readFile(file, 'utf-8');
-  const firstUpdate = originalContents.replace('You can also disable this overlay by setting', '');
-  assert(originalContents !== firstUpdate, 'Failed to update Vite client error overlay text. (1)');
-
-  const secondUpdate = firstUpdate.replace(
-    // eslint-disable-next-line max-len
-    '<code part="config-option-name">server.hmr.overlay</code> to <code part="config-option-value">false</code> in <code part="config-file-name">${hmrConfigName}.</code>',
+  const updatedContents = originalContents.replace(
+    `"You can also disable this overlay by setting ",
+      h("code", { part: "config-option-name" }, "server.hmr.overlay"),
+      " to ",
+      h("code", { part: "config-option-value" }, "false"),
+      " in ",
+      h("code", { part: "config-file-name" }, hmrConfigName),
+      "."`,
     '',
   );
-  assert(firstUpdate !== secondUpdate, 'Failed to update Vite client error overlay text. (2)');
+  assert(originalContents !== updatedContents, 'Failed to update Vite client error overlay text.');
 
-  return secondUpdate;
+  return updatedContents;
 }
 
 function pathnameWithoutBasePath(url: string, basePath: string): string {

packages/angular_devkit/build_angular/test/hello-world-app/protractor.conf.js

@@ -18,7 +18,7 @@ exports.config = {
   capabilities: {
     browserName: 'chrome',
     chromeOptions: {
-      args: ['--headless', '--disable-gpu', '--window-size=800,600'],
+      args: ['--headless', '--no-sandbox', '--disable-gpu', '--disable-dev-shm-usage'],
       binary: require('puppeteer').executablePath(),
     },
   },