fix(@angular-devkit/build-angular): serve assets from the provided serve-path

When the `serve-path` option is used assets are now correctly servered from this location.

Closes #26509

Author: alan-agius4

packages/angular_devkit/build_angular/src/builders/dev-server/tests/options/serve-path_spec.ts

@@ -18,7 +18,9 @@ describeServeBuilder(
   (harness, setupTarget, isViteRun) => {
     describe('option: "servePath"', () => {
       beforeEach(async () => {
-        setupTarget(harness);
+        setupTarget(harness, {
+          assets: ['src/assets'],
+        });
 
         // Application code is not needed for these tests
         await harness.writeFile('src/main.ts', 'console.log("foo");');
@@ -96,6 +98,23 @@ describeServeBuilder(
         expect(result?.success).toBeTrue();
         expect(await response?.text()).toContain('<title>');
       });
+
+      it('serves assets at specified path when option is used', async () => {
+        await harness.writeFile('src/assets/test.txt', 'hello world!');
+
+        harness.useTarget('serve', {
+          ...BASE_OPTIONS,
+          servePath: '/test',
+        });
+
+        const { result, response } = await executeOnceAndFetch(harness, '/test/assets/test.txt', {
+          // fallback processing requires an accept header
+          request: { headers: { accept: 'text/html' } },
+        });
+
+        expect(result?.success).toBeTrue();
+        expect(await response?.text()).toContain('hello world');
+      });
     });
   },
 );

packages/angular_devkit/build_angular/src/builders/dev-server/vite-server.ts

@@ -591,7 +591,12 @@ export async function setupServer(
             if (assetSourcePath !== undefined) {
               // The encoding needs to match what happens in the vite static middleware.
               // ref: https://github.com/vitejs/vite/blob/d4f13bd81468961c8c926438e815ab6b1c82735e/packages/vite/src/node/server/middlewares/static.ts#L163
-              req.url = `/@fs/${encodeURI(assetSourcePath)}`;
+              let { servePath = '' } = serverOptions;
+              if (servePath) {
+                servePath = addLeadingSlash(servePath);
+              }
+
+              req.url = `${serverOptions.servePath}/@fs/${encodeURI(assetSourcePath)}`;
               next();
 
               return;
@@ -801,19 +806,20 @@ async function loadViteClientCode(file: string) {
   return contents;
 }
 
-function pathnameWithoutServePath(url: string, serverOptions: NormalizedDevServerOptions): string {
+function pathnameWithoutServePath(url: string, { servePath }: NormalizedDevServerOptions): string {
   const parsedUrl = new URL(url, 'http://localhost');
   let pathname = decodeURIComponent(parsedUrl.pathname);
-  if (serverOptions.servePath && pathname.startsWith(serverOptions.servePath)) {
-    pathname = pathname.slice(serverOptions.servePath.length);
-    if (pathname[0] !== '/') {
-      pathname = '/' + pathname;
-    }
+  if (servePath && pathname.startsWith(servePath)) {
+    pathname = addLeadingSlash(pathname.slice(servePath.length));
   }
 
   return pathname;
 }
 
+function addLeadingSlash(value: string): string {
+  return value.charAt(0) === '/' ? value : '/' + value;
+}
+
 type ViteEsBuildPlugin = NonNullable<
   NonNullable<DepOptimizationConfig['esbuildOptions']>['plugins']
 >[0];