From 0042cd793467ce11119e8b5f17437c5751aa0177 Mon Sep 17 00:00:00 2001 From: Alan Agius Date: Thu, 12 Sep 2024 11:30:20 +0000 Subject: [PATCH 1/2] refactor(@angular/build): implement custom middleware for header appending Replaced multiple `appendServerConfiguredHeaders` calls with a single custom middleware to append headers to all responses, simplifying the code and ensuring consistency. --- .../src/tools/vite/angular-memory-plugin.ts | 3 ++ .../vite/middlewares/assets-middleware.ts | 8 +--- .../vite/middlewares/headers-middleware.ts | 37 +++++++++++++++++++ .../vite/middlewares/index-html-middleware.ts | 7 +--- .../build/src/tools/vite/middlewares/index.ts | 1 + .../tools/vite/middlewares/ssr-middleware.ts | 2 - .../angular/build/src/tools/vite/utils.ts | 18 --------- 7 files changed, 43 insertions(+), 33 deletions(-) create mode 100644 packages/angular/build/src/tools/vite/middlewares/headers-middleware.ts diff --git a/packages/angular/build/src/tools/vite/angular-memory-plugin.ts b/packages/angular/build/src/tools/vite/angular-memory-plugin.ts index 4a39ba50417d..3ceafc7fbd2d 100644 --- a/packages/angular/build/src/tools/vite/angular-memory-plugin.ts +++ b/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), diff --git a/packages/angular/build/src/tools/vite/middlewares/assets-middleware.ts b/packages/angular/build/src/tools/vite/middlewares/assets-middleware.ts index 8c2647949165..c77a1f83aa3d 100644 --- a/packages/angular/build/src/tools/vite/middlewares/assets-middleware.ts +++ b/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; @@ -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; diff --git a/packages/angular/build/src/tools/vite/middlewares/headers-middleware.ts b/packages/angular/build/src/tools/vite/middlewares/headers-middleware.ts new file mode 100644 index 000000000000..acc631aee0ed --- /dev/null +++ b/packages/angular/build/src/tools/vite/middlewares/headers-middleware.ts @@ -0,0 +1,37 @@ +/** + * @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 (_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(); + }; +} diff --git a/packages/angular/build/src/tools/vite/middlewares/index-html-middleware.ts b/packages/angular/build/src/tools/vite/middlewares/index-html-middleware.ts index 0dab0136c798..c43ae90d3663 100644 --- a/packages/angular/build/src/tools/vite/middlewares/index-html-middleware.ts +++ b/packages/angular/build/src/tools/vite/middlewares/index-html-middleware.ts @@ -8,11 +8,7 @@ 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, @@ -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)); diff --git a/packages/angular/build/src/tools/vite/middlewares/index.ts b/packages/angular/build/src/tools/vite/middlewares/index.ts index 1965fd22d0ee..924a18cd84ea 100644 --- a/packages/angular/build/src/tools/vite/middlewares/index.ts +++ b/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'; diff --git a/packages/angular/build/src/tools/vite/middlewares/ssr-middleware.ts b/packages/angular/build/src/tools/vite/middlewares/ssr-middleware.ts index 496e021b5038..e5542cce61ae 100644 --- a/packages/angular/build/src/tools/vite/middlewares/ssr-middleware.ts +++ b/packages/angular/build/src/tools/vite/middlewares/ssr-middleware.ts @@ -9,7 +9,6 @@ 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, @@ -55,7 +54,6 @@ export function createAngularSSRMiddleware( return next(); } - appendServerConfiguredHeaders(server, res); res.end(content); }) .catch((error) => next(error)); diff --git a/packages/angular/build/src/tools/vite/utils.ts b/packages/angular/build/src/tools/vite/utils.ts index 2e14055ebce0..4e922ee1d458 100644 --- a/packages/angular/build/src/tools/vite/utils.ts +++ b/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; @@ -32,19 +30,3 @@ export function lookupMimeTypeFromRequest(url: string): string | undefined { return extension && lookupMimeType(extension); } - -export function appendServerConfiguredHeaders( - server: ViteDevServer, - res: ServerResponse, -): 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); - } - } -} From 400ca2e60e9b21e6fb0dcaad8c506ddd5197e6ef Mon Sep 17 00:00:00 2001 From: Alan Agius Date: Thu, 12 Sep 2024 11:45:38 +0000 Subject: [PATCH 2/2] refactor(@angular/build): assign name to custom Vite middleware for better debugging Naming the custom middleware improves the ability to identify middleware order during debugging. --- .../build/src/tools/vite/middlewares/assets-middleware.ts | 2 +- .../build/src/tools/vite/middlewares/headers-middleware.ts | 6 +++++- .../src/tools/vite/middlewares/html-fallback-middleware.ts | 2 +- .../src/tools/vite/middlewares/index-html-middleware.ts | 2 +- .../build/src/tools/vite/middlewares/ssr-middleware.ts | 6 +++++- 5 files changed, 13 insertions(+), 5 deletions(-) diff --git a/packages/angular/build/src/tools/vite/middlewares/assets-middleware.ts b/packages/angular/build/src/tools/vite/middlewares/assets-middleware.ts index c77a1f83aa3d..b282831210f9 100644 --- a/packages/angular/build/src/tools/vite/middlewares/assets-middleware.ts +++ b/packages/angular/build/src/tools/vite/middlewares/assets-middleware.ts @@ -20,7 +20,7 @@ export function createAngularAssetsMiddleware( outputFiles: AngularMemoryOutputFiles, usedComponentStyles: Map, ): Connect.NextHandleFunction { - return function (req, res, next) { + return function angularAssetsMiddleware(req, res, next) { if (req.url === undefined || res.writableEnded) { return; } diff --git a/packages/angular/build/src/tools/vite/middlewares/headers-middleware.ts b/packages/angular/build/src/tools/vite/middlewares/headers-middleware.ts index acc631aee0ed..46d4a88f0543 100644 --- a/packages/angular/build/src/tools/vite/middlewares/headers-middleware.ts +++ b/packages/angular/build/src/tools/vite/middlewares/headers-middleware.ts @@ -20,7 +20,11 @@ import type { Connect, ViteDevServer } from 'vite'; * and passes control to the next middleware in the chain. */ export function createAngularHeadersMiddleware(server: ViteDevServer): Connect.NextHandleFunction { - return function (_req: Connect.IncomingMessage, res: ServerResponse, next: Connect.NextFunction) { + return function angularHeadersMiddleware( + _req: Connect.IncomingMessage, + res: ServerResponse, + next: Connect.NextFunction, + ) { const headers = server.config.server.headers; if (!headers) { return next(); diff --git a/packages/angular/build/src/tools/vite/middlewares/html-fallback-middleware.ts b/packages/angular/build/src/tools/vite/middlewares/html-fallback-middleware.ts index 3378404f76d9..2dda2da36a0d 100644 --- a/packages/angular/build/src/tools/vite/middlewares/html-fallback-middleware.ts +++ b/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 diff --git a/packages/angular/build/src/tools/vite/middlewares/index-html-middleware.ts b/packages/angular/build/src/tools/vite/middlewares/index-html-middleware.ts index c43ae90d3663..67331ac46250 100644 --- a/packages/angular/build/src/tools/vite/middlewares/index-html-middleware.ts +++ b/packages/angular/build/src/tools/vite/middlewares/index-html-middleware.ts @@ -15,7 +15,7 @@ export function createAngularIndexHtmlMiddleware( outputFiles: AngularMemoryOutputFiles, indexHtmlTransformer: ((content: string) => Promise) | undefined, ): Connect.NextHandleFunction { - return function (req, res, next) { + return function angularIndexHtmlMiddleware(req, res, next) { if (!req.url) { next(); diff --git a/packages/angular/build/src/tools/vite/middlewares/ssr-middleware.ts b/packages/angular/build/src/tools/vite/middlewares/ssr-middleware.ts index e5542cce61ae..98ce95f61a5a 100644 --- a/packages/angular/build/src/tools/vite/middlewares/ssr-middleware.ts +++ b/packages/angular/build/src/tools/vite/middlewares/ssr-middleware.ts @@ -16,7 +16,11 @@ export function createAngularSSRMiddleware( ): Connect.NextHandleFunction { let cachedAngularServerApp: ReturnType | 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(); }