From 87a3297821b63c9f692fd3c15a0ddb4e6213b964 Mon Sep 17 00:00:00 2001 From: Alan Agius <17563226+alan-agius4@users.noreply.github.com> Date: Tue, 16 Dec 2025 10:43:13 +0000 Subject: [PATCH] fix(@angular/build): allow non-prefixed requests when using SSR and base href When using SSR with a configured baseHref, the Vite dev server's default base middleware would intercept and reject requests that did not start with the base path. This created a mismatch with production behavior, where such requests (e.g., health check endpoints or custom routes defined in server.ts) could be handled correctly without the base prefix. This change patches the Vite base middleware to allow requests that do not match the base path to proceed, enabling them to be handled by subsequent middlewares like the Angular SSR middleware. Fixes #31896 --- .../tools/vite/middlewares/base-middleware.ts | 56 +++++++++++++++++++ .../build/src/tools/vite/middlewares/index.ts | 1 + .../vite/plugins/setup-middlewares-plugin.ts | 26 ++++----- .../e2e/tests/vite/ssr-base-href.ts | 48 ++++++++++++++++ 4 files changed, 118 insertions(+), 13 deletions(-) create mode 100644 packages/angular/build/src/tools/vite/middlewares/base-middleware.ts create mode 100644 tests/legacy-cli/e2e/tests/vite/ssr-base-href.ts diff --git a/packages/angular/build/src/tools/vite/middlewares/base-middleware.ts b/packages/angular/build/src/tools/vite/middlewares/base-middleware.ts new file mode 100644 index 000000000000..00198e03061a --- /dev/null +++ b/packages/angular/build/src/tools/vite/middlewares/base-middleware.ts @@ -0,0 +1,56 @@ +/** + * @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 { IncomingMessage, ServerResponse } from 'node:http'; +import type { Connect } from 'vite'; +import { addLeadingSlash } from '../../../utils/url'; + +/** + * Patches the Vite base middleware to correctly handle the Angular application's base href. + * This is necessary because Vite's default base middleware might not align with Angular's + * expected path handling when using SSR, especially when a base href is configured. + * + * @param middlewares The Connect server instance containing the middleware stack. + * @param base The base URL path to be handled by the middleware. + */ +export function patchBaseMiddleware(middlewares: Connect.Server, base: string): void { + const entry = middlewares.stack.find( + ({ handle }) => typeof handle === 'function' && handle.name.startsWith('viteBaseMiddleware'), + ); + + if (typeof entry?.handle !== 'function') { + return; + } + + entry.handle = function angularBaseMiddleware( + req: IncomingMessage, + res: ServerResponse, + next: (err?: unknown) => void, + ) { + const url = req.url || '/'; + if (url.startsWith(base)) { + // Rewrite the URL to remove the base prefix before passing it to the next middleware. + // If the URL is exactly the base, it becomes '/'. + // Otherwise, we slice off the base and ensure there's a leading slash. + // See: https://github.com/vitejs/vite/blob/e81c183f8c8ccaf7774ef0d0ee125bf63dbf30b4/packages/vite/src/node/server/middlewares/base.ts#L12 + req.url = url === base ? '/' : addLeadingSlash(url.slice(base.length - 1)); + + return next(); + } + + const { pathname, hash, search } = new URL(url, 'http://localhost'); + if (pathname === '/' || pathname === '/index.html') { + res.writeHead(302, { Location: `${base}${search}${hash}` }); + res.end(); + + return; + } + + next(); + }; +} diff --git a/packages/angular/build/src/tools/vite/middlewares/index.ts b/packages/angular/build/src/tools/vite/middlewares/index.ts index 1816fe26265c..807e739eed59 100644 --- a/packages/angular/build/src/tools/vite/middlewares/index.ts +++ b/packages/angular/build/src/tools/vite/middlewares/index.ts @@ -17,3 +17,4 @@ export { createAngularHeadersMiddleware } from './headers-middleware'; export { createAngularComponentMiddleware } from './component-middleware'; export { createChromeDevtoolsMiddleware } from './chrome-devtools-middleware'; export { patchHostValidationMiddleware } from './host-check-middleware'; +export { patchBaseMiddleware } from './base-middleware'; diff --git a/packages/angular/build/src/tools/vite/plugins/setup-middlewares-plugin.ts b/packages/angular/build/src/tools/vite/plugins/setup-middlewares-plugin.ts index b14c2b409012..5d20d5c705ac 100644 --- a/packages/angular/build/src/tools/vite/plugins/setup-middlewares-plugin.ts +++ b/packages/angular/build/src/tools/vite/plugins/setup-middlewares-plugin.ts @@ -17,6 +17,7 @@ import { createAngularSsrExternalMiddleware, createAngularSsrInternalMiddleware, createChromeDevtoolsMiddleware, + patchBaseMiddleware, patchHostValidationMiddleware, } from '../middlewares'; import { AngularMemoryOutputFiles, AngularOutputAssets } from '../utils'; @@ -87,10 +88,12 @@ export function createAngularSetupMiddlewaresPlugin( resetComponentUpdates, } = options; + const middlewares = server.middlewares; + // Headers, assets and resources get handled first - server.middlewares.use(createAngularHeadersMiddleware(server)); - server.middlewares.use(createAngularComponentMiddleware(server, templateUpdates)); - server.middlewares.use( + middlewares.use(createAngularHeadersMiddleware(server)); + middlewares.use(createAngularComponentMiddleware(server, templateUpdates)); + middlewares.use( createAngularAssetsMiddleware( server, assets, @@ -100,11 +103,9 @@ export function createAngularSetupMiddlewaresPlugin( ), ); - server.middlewares.use( - createChromeDevtoolsMiddleware(server.config.cacheDir, options.projectRoot), - ); + middlewares.use(createChromeDevtoolsMiddleware(server.config.cacheDir, options.projectRoot)); - extensionMiddleware?.forEach((middleware) => server.middlewares.use(middleware)); + extensionMiddleware?.forEach((middleware) => middlewares.use(middleware)); // Returning a function, installs middleware after the main transform middleware but // before the built-in HTML middleware @@ -113,19 +114,18 @@ export function createAngularSetupMiddlewaresPlugin( patchHostValidationMiddleware(server.middlewares); if (ssrMode === ServerSsrMode.ExternalSsrMiddleware) { - server.middlewares.use( - await createAngularSsrExternalMiddleware(server, indexHtmlTransformer), - ); + patchBaseMiddleware(server.middlewares, server.config.base); + middlewares.use(await createAngularSsrExternalMiddleware(server, indexHtmlTransformer)); return; } if (ssrMode === ServerSsrMode.InternalSsrMiddleware) { - server.middlewares.use(createAngularSsrInternalMiddleware(server, indexHtmlTransformer)); + middlewares.use(createAngularSsrInternalMiddleware(server, indexHtmlTransformer)); } - server.middlewares.use(angularHtmlFallbackMiddleware); - server.middlewares.use( + middlewares.use(angularHtmlFallbackMiddleware); + middlewares.use( createAngularIndexHtmlMiddleware( server, outputFiles, diff --git a/tests/legacy-cli/e2e/tests/vite/ssr-base-href.ts b/tests/legacy-cli/e2e/tests/vite/ssr-base-href.ts new file mode 100644 index 000000000000..140f2582689a --- /dev/null +++ b/tests/legacy-cli/e2e/tests/vite/ssr-base-href.ts @@ -0,0 +1,48 @@ +import assert from 'node:assert'; +import { ng } from '../../utils/process'; +import { replaceInFile } from '../../utils/fs'; +import { installWorkspacePackages, uninstallPackage } from '../../utils/packages'; +import { ngServe, updateJsonFile, useSha } from '../../utils/project'; +import { getGlobalVariable } from '../../utils/env'; + +export default async function () { + assert( + getGlobalVariable('argv')['esbuild'], + 'This test should not be called in the Webpack suite.', + ); + + await uninstallPackage('@angular/ssr'); + await ng('add', '@angular/ssr', '--skip-confirmation', '--skip-install'); + await useSha(); + await installWorkspacePackages(); + + await updateJsonFile('angular.json', (json) => { + json.projects['test-project'].architect.build.options['baseHref'] = '/base'; + }); + + await replaceInFile( + 'src/server.ts', + /express\(\);/, + `express(); + + app.use('/ping', (req, res) => { + return res.json({ pong: true }); + });`, + ); + + const port = await ngServe(); + + // Angular application and bundled should be affected by baseHref + await matchResponse(`http://localhost:${port}/base`, /ng-server-context/); + await matchResponse(`http://localhost:${port}/base/main.js`, /App/); + + // Server endpoint should not be affected by baseHref + await matchResponse(`http://localhost:${port}/ping`, /pong/); +} + +async function matchResponse(url: string, match: RegExp): Promise { + const response = await fetch(url); + const text = await response.text(); + + assert.match(text, match); +}