fix(@angular/build): serve build assets and styles in vitest

Adds a Vite middleware to the Vitest runner to serve assets and global stylesheets that are part of the build output.

Previously, when running component tests with Vitest, any referenced assets (such as images in an `<img>` tag) or component stylesheets would result in a 404 error because the Vite server was not configured to serve them.

This change introduces a middleware that intercepts requests for non-script files. It checks against the build's output files and serves the corresponding asset directly from memory or disk. This ensures that the test environment accurately reflects the assets available during a real build, allowing components to render correctly for testing.

Author: clydin

packages/angular/build/src/builders/unit-test/runners/vitest/plugins.ts

@@ -10,6 +10,7 @@ import assert from 'node:assert';
 import { readFile } from 'node:fs/promises';
 import path from 'node:path';
 import type { VitestPlugin } from 'vitest/node';
+import { createBuildAssetsMiddleware } from '../../../../tools/vite/middlewares/assets-middleware';
 import { toPosixPath } from '../../../../utils/path';
 import type { ResultFile } from '../../../application/results';
 import type { NormalizedUnitTestBuilderOptions } from '../../options';
@@ -129,6 +130,11 @@ export function createVitestPlugins(
                   };
                 }
               },
+              configureServer: (server) => {
+                server.middlewares.use(
+                  createBuildAssetsMiddleware(server.config.base, buildResultFiles),
+                );
+              },
             },
             {
               name: 'angular:html-index',

packages/angular/build/src/tools/vite/middlewares/assets-middleware.ts

@@ -12,6 +12,7 @@ import { readFileSync } from 'node:fs';
 import type { ServerResponse } from 'node:http';
 import { extname } from 'node:path';
 import type { Connect, ViteDevServer } from 'vite';
+import { ResultFile } from '../../../builders/application/results';
 import { AngularMemoryOutputFiles, AngularOutputAssets, pathnameWithoutBasePath } from '../utils';
 
 export interface ComponentStyleRecord {
@@ -214,3 +215,45 @@ function checkAndHandleEtag(
 
   return false;
 }
+
+export function createBuildAssetsMiddleware(
+  basePath: string,
+  buildResultFiles: ReadonlyMap<string, ResultFile>,
+  readHandler: (path: string) => Buffer = readFileSync,
+): Connect.NextHandleFunction {
+  return function buildAssetsMiddleware(req, res, next) {
+    if (req.url === undefined || res.writableEnded) {
+      return;
+    }
+
+    // Parse the incoming request.
+    // The base of the URL is unused but required to parse the URL.
+    const pathname = pathnameWithoutBasePath(req.url, basePath);
+    const extension = extname(pathname);
+    if (extension && !/\.[mc]?[jt]s(?:\.map)?$/.test(extension)) {
+      const outputFile = buildResultFiles.get(pathname.slice(1));
+      if (outputFile) {
+        const contents =
+          outputFile.origin === 'memory' ? outputFile.contents : readHandler(outputFile.inputPath);
+
+        const etag = `W/${createHash('sha256').update(contents).digest('hex')}`;
+        if (checkAndHandleEtag(req, res, etag)) {
+          return;
+        }
+
+        const mimeType = lookupMimeType(extension);
+        if (mimeType) {
+          res.setHeader('Content-Type', mimeType);
+        }
+
+        res.setHeader('ETag', etag);
+        res.setHeader('Cache-Control', 'no-cache');
+        res.end(contents);
+
+        return;
+      }
+    }
+
+    next();
+  };
+}