refactor(@angular/build): implement custom middleware for header appending

packages/angular/build/src/tools/vite/angular-memory-plugin.ts

@@ -14,6 +14,7 @@ import type { Connect, Plugin } from 'vite';
 import {
   angularHtmlFallbackMiddleware,
   createAngularAssetsMiddleware,
+  createAngularHeadersMiddleware,
   createAngularIndexHtmlMiddleware,
   createAngularSSRMiddleware,
 } from './middlewares';
@@ -114,6 +115,8 @@ export function createAngularMemoryPlugin(options: AngularMemoryPluginOptions):
         };
       };
 
+      server.middlewares.use(createAngularHeadersMiddleware(server));
+
       // Assets and resources get handled first
       server.middlewares.use(
         createAngularAssetsMiddleware(server, assets, outputFiles, usedComponentStyles),

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

@@ -10,11 +10,7 @@ import { lookup as lookupMimeType } from 'mrmime';
 import { extname } from 'node:path';
 import type { Connect, ViteDevServer } from 'vite';
 import { loadEsmModule } from '../../../utils/load-esm';
-import {
-  AngularMemoryOutputFiles,
-  appendServerConfiguredHeaders,
-  pathnameWithoutBasePath,
-} from '../utils';
+import { AngularMemoryOutputFiles, pathnameWithoutBasePath } from '../utils';
 
 const COMPONENT_REGEX = /%COMP%/g;
 
@@ -24,7 +20,7 @@ export function createAngularAssetsMiddleware(
   outputFiles: AngularMemoryOutputFiles,
   usedComponentStyles: Map<string, string[]>,
 ): Connect.NextHandleFunction {
-  return function (req, res, next) {
+  return function angularAssetsMiddleware(req, res, next) {
     if (req.url === undefined || res.writableEnded) {
       return;
     }
@@ -97,7 +93,6 @@ export function createAngularAssetsMiddleware(
 
                     res.setHeader('Content-Type', 'text/css');
                     res.setHeader('Cache-Control', 'no-cache');
-                    appendServerConfiguredHeaders(server, res);
                     res.end(encapsulatedData);
                   })
                   .catch((e) => next(e));
@@ -116,7 +111,6 @@ export function createAngularAssetsMiddleware(
           res.setHeader('Content-Type', mimeType);
         }
         res.setHeader('Cache-Control', 'no-cache');
-        appendServerConfiguredHeaders(server, res);
         res.end(data);
 
         return;

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

@@ -0,0 +1,41 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.dev/license
+ */
+
+import type { ServerResponse } from 'node:http';
+import type { Connect, ViteDevServer } from 'vite';
+
+/**
+ * Creates a middleware for adding custom headers.
+ *
+ * This middleware is responsible for setting HTTP headers as configured in the Vite server options.
+ * If headers are defined in the server configuration, they are applied to the server response.
+ *
+ * @param server - The instance of `ViteDevServer` containing the configuration, including custom headers.
+ * @returns A middleware function that processes the incoming request, sets headers if available,
+ *          and passes control to the next middleware in the chain.
+ */
+export function createAngularHeadersMiddleware(server: ViteDevServer): Connect.NextHandleFunction {
+  return function angularHeadersMiddleware(
+    _req: Connect.IncomingMessage,
+    res: ServerResponse,
+    next: Connect.NextFunction,
+  ) {
+    const headers = server.config.server.headers;
+    if (!headers) {
+      return next();
+    }
+
+    for (const [name, value] of Object.entries(headers)) {
+      if (value !== undefined) {
+        res.setHeader(name, value);
+      }
+    }
+
+    next();
+  };
+}

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

@@ -12,7 +12,7 @@ import { lookupMimeTypeFromRequest } from '../utils';
 
 export function angularHtmlFallbackMiddleware(
   req: Connect.IncomingMessage,
-  res: ServerResponse,
+  _res: ServerResponse,
   next: Connect.NextFunction,
 ): void {
   // Similar to how it is handled in vite

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

@@ -8,18 +8,14 @@
 
 import { extname } from 'node:path';
 import type { Connect, ViteDevServer } from 'vite';
-import {
-  AngularMemoryOutputFiles,
-  appendServerConfiguredHeaders,
-  pathnameWithoutBasePath,
-} from '../utils';
+import { AngularMemoryOutputFiles, pathnameWithoutBasePath } from '../utils';
 
 export function createAngularIndexHtmlMiddleware(
   server: ViteDevServer,
   outputFiles: AngularMemoryOutputFiles,
   indexHtmlTransformer: ((content: string) => Promise<string>) | undefined,
 ): Connect.NextHandleFunction {
-  return function (req, res, next) {
+  return function angularIndexHtmlMiddleware(req, res, next) {
     if (!req.url) {
       next();
 
@@ -52,7 +48,6 @@ export function createAngularIndexHtmlMiddleware(
 
         res.setHeader('Content-Type', 'text/html');
         res.setHeader('Cache-Control', 'no-cache');
-        appendServerConfiguredHeaders(server, res);
         res.end(processedHtml);
       })
       .catch((error) => next(error));

packages/angular/build/src/tools/vite/middlewares/index.ts

@@ -10,3 +10,4 @@ export { createAngularAssetsMiddleware } from './assets-middleware';
 export { angularHtmlFallbackMiddleware } from './html-fallback-middleware';
 export { createAngularIndexHtmlMiddleware } from './index-html-middleware';
 export { createAngularSSRMiddleware } from './ssr-middleware';
+export { createAngularHeadersMiddleware } from './headers-middleware';

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

@@ -9,15 +9,18 @@
 import type { ɵgetOrCreateAngularServerApp as getOrCreateAngularServerApp } from '@angular/ssr';
 import type { ServerResponse } from 'node:http';
 import type { Connect, ViteDevServer } from 'vite';
-import { appendServerConfiguredHeaders } from '../utils';
 
 export function createAngularSSRMiddleware(
   server: ViteDevServer,
   indexHtmlTransformer?: (content: string) => Promise<string>,
 ): Connect.NextHandleFunction {
   let cachedAngularServerApp: ReturnType<typeof getOrCreateAngularServerApp> | undefined;
 
-  return function (req: Connect.IncomingMessage, res: ServerResponse, next: Connect.NextFunction) {
+  return function angularSSRMiddleware(
+    req: Connect.IncomingMessage,
+    res: ServerResponse,
+    next: Connect.NextFunction,
+  ) {
     if (req.url === undefined) {
       return next();
     }
@@ -55,7 +58,6 @@ export function createAngularSSRMiddleware(
           return next();
         }
 
-        appendServerConfiguredHeaders(server, res);
         res.end(content);
       })
       .catch((error) => next(error));

packages/angular/build/src/tools/vite/utils.ts

@@ -7,9 +7,7 @@
  */
 
 import { lookup as lookupMimeType } from 'mrmime';
-import type { IncomingMessage, ServerResponse } from 'node:http';
 import { extname } from 'node:path';
-import type { ViteDevServer } from 'vite';
 
 export type AngularMemoryOutputFiles = Map<string, { contents: Uint8Array; servable: boolean }>;
 
@@ -32,19 +30,3 @@ export function lookupMimeTypeFromRequest(url: string): string | undefined {
 
   return extension && lookupMimeType(extension);
 }
-
-export function appendServerConfiguredHeaders(
-  server: ViteDevServer,
-  res: ServerResponse<IncomingMessage>,
-): void {
-  const headers = server.config.server.headers;
-  if (!headers) {
-    return;
-  }
-
-  for (const [name, value] of Object.entries(headers)) {
-    if (value !== undefined) {
-      res.setHeader(name, value);
-    }
-  }
-}