fix(@angular/build): prepend deploy-url to file loader output paths

When using the `file` loader (either via `loader` config or import attributes),
the `deploy-url` was not prepended to the imported file's URL in the JavaScript
output. This was because esbuild's global `publicPath` option cannot be used as
it also affects code-splitting chunk paths.

This change introduces a targeted esbuild plugin that post-processes the JS
output to prepend the publicPath (deploy-url) only to file loader asset
references, identified from the build metafile. This ensures code-splitting
chunk paths remain unaffected.

Fixes angular#32789

Author: maruthang

packages/angular/build/src/builders/application/tests/options/deploy-url_spec.ts

@@ -58,6 +58,34 @@ describeBuilder(buildApplication, APPLICATION_BUILDER_INFO, (harness) => {
         );
     });
 
+    it('should prepend deployUrl to file loader output paths in JS', async () => {
+      await harness.writeFile('./src/a.svg', '<svg></svg>');
+      await harness.writeFile(
+        './src/types.d.ts',
+        'declare module "*.svg" { const url: string; export default url; }',
+      );
+      await harness.writeFile(
+        'src/main.ts',
+        `import svgUrl from './a.svg';\nconsole.log(svgUrl);`,
+      );
+
+      harness.useTarget('build', {
+        ...BASE_OPTIONS,
+        styles: [],
+        deployUrl: 'https://cdn.example.com/assets/',
+        loader: {
+          '.svg': 'file',
+        },
+      });
+
+      const { result } = await harness.executeOnce();
+      expect(result?.success).toBeTrue();
+      harness
+        .expectFile('dist/browser/main.js')
+        .content.toContain('https://cdn.example.com/assets/media/a.svg');
+      harness.expectFile('dist/browser/media/a.svg').toExist();
+    });
+
     it('should update resources component stylesheets to reference deployURL', async () => {
       await harness.writeFile('src/app/test.svg', '<svg></svg>');
       await harness.writeFile(

packages/angular/build/src/tools/esbuild/application-code-bundle.ts

@@ -26,6 +26,7 @@ import { createAngularLocalizeInitWarningPlugin } from './angular-localize-init-
 import { BundlerOptionsFactory } from './bundler-context';
 import { createCompilerPluginOptions } from './compiler-plugin-options';
 import { createExternalPackagesPlugin } from './external-packages-plugin';
+import { createFileLoaderPublicPathPlugin } from './file-loader-public-path-plugin';
 import { createAngularLocaleDataPlugin } from './i18n-locale-plugin';
 import type { LoadResultCache } from './load-result-cache';
 import { createLoaderImportAttributePlugin } from './loader-import-attribute-plugin';
@@ -550,6 +551,7 @@ function getEsBuildCommonOptions(options: NormalizedApplicationBuildOptions): Bu
     i18nOptions,
     customConditions,
     frameworkVersion,
+    publicPath,
   } = options;
 
   // Ensure unique hashes for i18n translation changes when using post-process inlining.
@@ -595,6 +597,13 @@ function getEsBuildCommonOptions(options: NormalizedApplicationBuildOptions): Bu
     createSourcemapIgnorelistPlugin(),
   ];
 
+  // Prepend publicPath (deploy-url) to file loader output paths in JS bundles.
+  // This is done as a targeted post-process step rather than setting esbuild's global
+  // `publicPath` option which would also incorrectly affect code-splitting chunk paths.
+  if (publicPath) {
+    plugins.push(createFileLoaderPublicPathPlugin(publicPath));
+  }
+
   let packages: BuildOptions['packages'] = 'bundle';
   if (options.externalPackages) {
     // Package files affected by a customized loader should not be implicitly marked as external

packages/angular/build/src/tools/esbuild/file-loader-public-path-plugin.ts

@@ -0,0 +1,73 @@
+/**
+ * @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 { Plugin } from 'esbuild';
+
+/**
+ * Creates an esbuild plugin that prepends the publicPath (deploy-url) to file loader
+ * output paths in JavaScript bundles. This is done as a targeted post-process step
+ * to avoid setting esbuild's global `publicPath` option which would also affect
+ * code-splitting chunk paths.
+ */
+export function createFileLoaderPublicPathPlugin(publicPath: string): Plugin {
+  return {
+    name: 'angular-file-loader-public-path',
+    setup(build) {
+      build.onEnd((result) => {
+        if (!result.metafile || !result.outputFiles) {
+          return;
+        }
+
+        // Collect relative paths of file loader assets from the metafile.
+        // These are output entries that are not JS, CSS, or sourcemap files.
+        const assetPaths: string[] = [];
+        for (const outputPath of Object.keys(result.metafile.outputs)) {
+          if (
+            !outputPath.endsWith('.js') &&
+            !outputPath.endsWith('.css') &&
+            !outputPath.endsWith('.map')
+          ) {
+            assetPaths.push(outputPath);
+          }
+        }
+
+        if (assetPaths.length === 0) {
+          return;
+        }
+
+        // Ensure publicPath ends with a separator for correct URL joining.
+        const normalizedPublicPath = publicPath.endsWith('/') ? publicPath : publicPath + '/';
+
+        // Update JS output files to prepend publicPath to file loader asset references.
+        // esbuild references these assets as "./<assetPath>" in the JS output.
+        for (const outputFile of result.outputFiles) {
+          if (!outputFile.path.endsWith('.js')) {
+            continue;
+          }
+
+          let text = outputFile.text;
+          let modified = false;
+
+          for (const assetPath of assetPaths) {
+            const originalRef = './' + assetPath;
+            const updatedRef = normalizedPublicPath + assetPath;
+
+            if (text.includes(originalRef)) {
+              text = text.replaceAll(originalRef, updatedRef);
+              modified = true;
+            }
+          }
+
+          if (modified) {
+            outputFile.contents = new TextEncoder().encode(text);
+          }
+        }
+      });
+    },
+  };
+}