fix(@angular/build): preserve names in esbuild for improved debugging in dev mode

alan-agius4 · clydin · commit 5d46d6ec1140 · 2025-09-05T11:39:18.000-04:00
This commit introduces the `keepNames` option in esbuild configurations for both application code bundling and Vite utility functions. By setting `keepNames` to `true` (or conditionally based on optimization settings), function and variable names are preserved during the build process. This significantly improves the debugging experience in **development mode** by ensuring that original names are retained in compiled output, leading to more readable stack traces and easier identification of code sections during development. (cherry picked from commit 58da860)
diff --git a/packages/angular/build/src/tools/esbuild/application-code-bundle.ts b/packages/angular/build/src/tools/esbuild/application-code-bundle.ts
@@ -607,6 +607,9 @@ function getEsBuildCommonOptions(options: NormalizedApplicationBuildOptions): Bu
     }
   }
 
+  const minifySyntax = optimizationOptions.scripts;
+  const minifyIdentifiers = minifySyntax && allowMangle;
+
   return {
     absWorkingDir: workspaceRoot,
     format: 'esm',
@@ -618,9 +621,10 @@ function getEsBuildCommonOptions(options: NormalizedApplicationBuildOptions): Bu
     metafile: true,
     legalComments: options.extractLicenses ? 'none' : 'eof',
     logLevel: options.verbose && !jsonLogs ? 'debug' : 'silent',
-    minifyIdentifiers: optimizationOptions.scripts && allowMangle,
-    minifySyntax: optimizationOptions.scripts,
-    minifyWhitespace: optimizationOptions.scripts,
+    keepNames: !minifyIdentifiers,
+    minifyIdentifiers,
+    minifySyntax,
+    minifyWhitespace: minifySyntax,
     pure: ['forwardRef'],
     outdir: workspaceRoot,
     outExtension: outExtension ? { '.js': `.${outExtension}` } : undefined,
@@ -637,7 +641,7 @@ function getEsBuildCommonOptions(options: NormalizedApplicationBuildOptions): Bu
       // Only set to false when script optimizations are enabled. It should not be set to true because
       // Angular turns `ngDevMode` into an object for development debugging purposes when not defined
       // which a constant true value would break.
-      ...(optimizationOptions.scripts ? { 'ngDevMode': 'false' } : undefined),
+      ...(minifySyntax ? { 'ngDevMode': 'false' } : undefined),
       'ngJitMode': jit ? 'true' : 'false',
       'ngServerMode': 'false',
       'ngHmrMode': options.templateUpdates ? 'true' : 'false',
diff --git a/packages/angular/build/src/tools/vite/utils.ts b/packages/angular/build/src/tools/vite/utils.ts
@@ -98,6 +98,7 @@ export function getDepOptimizationConfig({
     esbuildOptions: {
       // Set esbuild supported targets.
       target,
+      keepNames: true,
       supported: getFeatureSupport(target, zoneless),
       plugins,
       loader,
diff --git a/tests/legacy-cli/e2e/tests/build/prerender/error-with-sourcemaps.ts b/tests/legacy-cli/e2e/tests/build/prerender/error-with-sourcemaps.ts
@@ -48,6 +48,6 @@ export default async function () {
     message,
     // When babel is used it will add names to the sourcemap and `constructor` will be used in the stack trace.
     // This will currently only happen if AOT and script optimizations are set which enables advanced optimizations.
-    /window is not defined[.\s\S]*(?:constructor|_App) \(.*app\.ts\:\d+:\d+\)/,
+    /window is not defined[.\s\S]*(?:constructor|App) \(.*app\.ts\:\d+:\d+\)/,
   );
 }

Original file line number	Diff line number	Diff line change
`@@ -48,6 +48,6 @@ export default async function () {`
`48`	`48`	`message,`
`49`	`49`	// When babel is used it will add names to the sourcemap and `constructor` will be used in the stack trace.
`50`	`50`	`// This will currently only happen if AOT and script optimizations are set which enables advanced optimizations.`
`51`		`- /window is not defined[.\s\S](?:constructor\|_App) \(.app\.ts\:\d+:\d+\)/,`
	`51`	`+ /window is not defined[.\s\S](?:constructor\|App) \(.app\.ts\:\d+:\d+\)/,`
`52`	`52`	`);`
`53`	`53`	`}`