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 `/`.

Author: alan-agius4

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

@@ -6,19 +6,22 @@
  * 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<string, string>,
 ): Connect.NextHandleFunction {
   return function angularComponentMiddleware(req, res, next) {
     if (req.url === undefined || res.writableEnded) {
       return;
     }
 
-    if (!req.url.startsWith(ANGULAR_COMPONENT_PREFIX)) {
+    const pathname = pathnameWithoutBasePath(req.url, server.config.base);
+    if (!pathname.includes(ANGULAR_COMPONENT_PREFIX)) {
       next();
 
       return;

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);

packages/angular/build/src/tools/vite/plugins/setup-middlewares-plugin.ts

@@ -88,7 +88,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,