From e54d33420c6330d3ae39f2c3048e86694c2a5b95 Mon Sep 17 00:00:00 2001 From: Alan Agius Date: Mon, 20 Jan 2025 07:26:45 +0000 Subject: [PATCH] fix(@angular/build): handle relative `@ng/components` This update serves as a preparatory step to address #29248. The change involves modifying the line 'urlPartial' in [r3_hmr_compiler.ts](https://github.com/angular/angular/blob/4e6017a9f5cda389c5fbf4f2c1519ce1bba23e11/packages/compiler/src/render3/r3_hmr_compiler.ts#L57) to start with `./` instead of `/`. --- .../src/tools/vite/middlewares/component-middleware.ts | 7 +++++-- .../build/src/tools/vite/plugins/angular-memory-plugin.ts | 7 +++++-- .../src/tools/vite/plugins/setup-middlewares-plugin.ts | 2 +- 3 files changed, 11 insertions(+), 5 deletions(-) diff --git a/packages/angular/build/src/tools/vite/middlewares/component-middleware.ts b/packages/angular/build/src/tools/vite/middlewares/component-middleware.ts index 6110316773b3..0e02616cb384 100644 --- a/packages/angular/build/src/tools/vite/middlewares/component-middleware.ts +++ b/packages/angular/build/src/tools/vite/middlewares/component-middleware.ts @@ -6,11 +6,13 @@ * found in the LICENSE file at https://angular.dev/license */ -import type { Connect } from 'vite'; +import type { Connect, ViteDevServer } from 'vite'; +import { pathnameWithoutBasePath } from '../utils'; const ANGULAR_COMPONENT_PREFIX = '/@ng/component'; export function createAngularComponentMiddleware( + server: ViteDevServer, templateUpdates: ReadonlyMap, ): Connect.NextHandleFunction { return function angularComponentMiddleware(req, res, next) { @@ -18,7 +20,8 @@ export function createAngularComponentMiddleware( return; } - if (!req.url.startsWith(ANGULAR_COMPONENT_PREFIX)) { + const pathname = pathnameWithoutBasePath(req.url, server.config.base); + if (!pathname.includes(ANGULAR_COMPONENT_PREFIX)) { next(); return; diff --git a/packages/angular/build/src/tools/vite/plugins/angular-memory-plugin.ts b/packages/angular/build/src/tools/vite/plugins/angular-memory-plugin.ts index 899c903658f1..c11c8cc7756d 100644 --- a/packages/angular/build/src/tools/vite/plugins/angular-memory-plugin.ts +++ b/packages/angular/build/src/tools/vite/plugins/angular-memory-plugin.ts @@ -46,8 +46,11 @@ export async function createAngularMemoryPlugin( // Vite will resolve these these files example: // `file:///@ng/component?c=src%2Fapp%2Fapp.component.ts%40AppComponent&t=1737017253850` const sourcePath = fileURLToPath(source); - const { root } = parse(sourcePath); - const sourceWithoutRoot = normalizePath('/' + sourcePath.slice(root.length)); + const sourceWithoutRoot = sourcePath.startsWith(virtualProjectRoot) + ? normalizePath('/' + relative(virtualProjectRoot, sourcePath)) + : // TODO: remove once https://github.com/angular/angular/blob/4e6017a9f5cda389c5fbf4f2c1519ce1bba23e11/packages/compiler/src/render3/r3_hmr_compiler.ts#L57 + // is changed from `/@ng` to `./@ng/` + normalizePath('/' + sourcePath.slice(parse(sourcePath).root.length)); if (sourceWithoutRoot.startsWith(ANGULAR_PREFIX)) { const [, query] = source.split('?', 2); 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 63407c56d3e5..9c0f2ca12be0 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 @@ -86,7 +86,7 @@ export function createAngularSetupMiddlewaresPlugin( // Headers, assets and resources get handled first server.middlewares.use(createAngularHeadersMiddleware(server)); - server.middlewares.use(createAngularComponentMiddleware(templateUpdates)); + server.middlewares.use(createAngularComponentMiddleware(server, templateUpdates)); server.middlewares.use( createAngularAssetsMiddleware( server,