fix(@angular/build): allow disabling sourcemaps in the dev server

This change introduces the ability to disable sourcemaps when running the development server.

A new Vite plugin has been added to remove sourcemap comments from generated assets. The dev server's configuration has been updated to conditionally apply this plugin and control CSS sourcemap generation based on the project's sourceMap setting.

Closes #31331

Author: alan-agius4

packages/angular/build/src/builders/dev-server/tests/behavior/build-source-map_spec.ts

@@ -0,0 +1,49 @@
+/**
+ * @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 { executeDevServer } from '../../index';
+import { executeOnceAndFetch } from '../execute-fetch';
+import { describeServeBuilder } from '../jasmine-helpers';
+import { BASE_OPTIONS, DEV_SERVER_BUILDER_INFO } from '../setup';
+
+describeServeBuilder(executeDevServer, DEV_SERVER_BUILDER_INFO, (harness, setupTarget) => {
+  describe('Behavior: "buildTarget sourceMap"', () => {
+    beforeEach(async () => {
+      // Application code is not needed for these tests
+      await harness.writeFile('src/main.ts', 'console.log("foo");');
+    });
+
+    it('should not include sourcemaps when disabled', async () => {
+      setupTarget(harness, {
+        sourceMap: false,
+      });
+
+      harness.useTarget('serve', {
+        ...BASE_OPTIONS,
+      });
+
+      const { result, response } = await executeOnceAndFetch(harness, '/main.js');
+      expect(result?.success).toBeTrue();
+      expect(await response?.text()).not.toContain('//# sourceMappingURL=');
+    });
+
+    it('should include sourcemaps when enabled', async () => {
+      setupTarget(harness, {
+        sourceMap: true,
+      });
+
+      harness.useTarget('serve', {
+        ...BASE_OPTIONS,
+      });
+
+      const { result, response } = await executeOnceAndFetch(harness, '/main.js');
+      expect(result?.success).toBeTrue();
+      expect(await response?.text()).toContain('//# sourceMappingURL=');
+    });
+  });
+});

packages/angular/build/src/builders/dev-server/vite/index.ts

@@ -130,9 +130,11 @@ export async function* serveWithVite(
     browserOptions.forceI18nFlatOutput = true;
   }
 
-  const { vendor: thirdPartySourcemaps, scripts: scriptsSourcemaps } = normalizeSourceMaps(
-    browserOptions.sourceMap ?? false,
-  );
+  const {
+    vendor: thirdPartySourcemaps,
+    scripts: scriptsSourcemaps,
+    styles: stylesSourceMap,
+  } = normalizeSourceMaps(browserOptions.sourceMap ?? false);
 
   if (scriptsSourcemaps && browserOptions.server) {
     // https://nodejs.org/api/process.html#processsetsourcemapsenabledval
@@ -441,6 +443,7 @@ export async function* serveWithVite(
         },
         extensions?.middleware,
         transformers?.indexHtml,
+        scriptsSourcemaps || stylesSourceMap,
         thirdPartySourcemaps,
       );
 

packages/angular/build/src/builders/dev-server/vite/server.ts

@@ -8,14 +8,15 @@
 
 import { readFile } from 'node:fs/promises';
 import { join } from 'node:path';
-import type { Connect, InlineConfig, SSROptions, ServerOptions } from 'vite';
+import type { Connect, InlineConfig, Plugin, SSROptions, ServerOptions } from 'vite';
 import type { ComponentStyleRecord } from '../../../tools/vite/middlewares';
 import {
   ServerSsrMode,
   createAngularMemoryPlugin,
   createAngularSetupMiddlewaresPlugin,
   createAngularSsrTransformPlugin,
   createRemoveIdPrefixPlugin,
+  removeSourceMapsPlugin,
 } from '../../../tools/vite/plugins';
 import { EsbuildLoaderOption, getDepOptimizationConfig } from '../../../tools/vite/utils';
 import { loadProxyConfiguration } from '../../../utils';
@@ -150,6 +151,7 @@ export async function setupServer(
   define: ApplicationBuilderInternalOptions['define'],
   extensionMiddleware?: Connect.NextHandleFunction[],
   indexHtmlTransformer?: (content: string) => Promise<string>,
+  sourceMaps = true,
   thirdPartySourcemaps = false,
 ): Promise<InlineConfig> {
   // dynamically import Vite for ESM compatibility
@@ -171,6 +173,33 @@ export async function setupServer(
     externalMetadata.explicitBrowser.length === 0 && ssrMode === ServerSsrMode.NoSsr;
   const cacheDir = join(serverOptions.cacheOptions.path, serverOptions.buildTarget.project, 'vite');
 
+  const plugins: Plugin[] = [
+    createAngularSetupMiddlewaresPlugin({
+      outputFiles,
+      assets,
+      indexHtmlTransformer,
+      extensionMiddleware,
+      componentStyles,
+      templateUpdates,
+      ssrMode,
+      resetComponentUpdates: () => templateUpdates.clear(),
+      projectRoot: serverOptions.projectRoot,
+    }),
+    createRemoveIdPrefixPlugin(externalMetadata.explicitBrowser),
+    await createAngularSsrTransformPlugin(serverOptions.workspaceRoot),
+    await createAngularMemoryPlugin({
+      virtualProjectRoot,
+      outputFiles,
+      templateUpdates,
+      external: externalMetadata.explicitBrowser,
+      disableViteTransport: !serverOptions.liveReload,
+    }),
+  ];
+
+  if (!sourceMaps) {
+    plugins.push(removeSourceMapsPlugin);
+  }
+
   const configuration: InlineConfig = {
     configFile: false,
     envFile: false,
@@ -182,7 +211,7 @@ export async function setupServer(
     // We use custom as we do not rely on Vite's htmlFallbackMiddleware and indexHtmlMiddleware.
     appType: 'custom',
     css: {
-      devSourcemap: true,
+      devSourcemap: sourceMaps,
     },
     // Ensure custom 'file' loader build option entries are handled by Vite in application code that
     // reference third-party libraries. Relative usage is handled directly by the build and not Vite.
@@ -219,28 +248,7 @@ export async function setupServer(
       thirdPartySourcemaps,
       define,
     ),
-    plugins: [
-      createAngularSetupMiddlewaresPlugin({
-        outputFiles,
-        assets,
-        indexHtmlTransformer,
-        extensionMiddleware,
-        componentStyles,
-        templateUpdates,
-        ssrMode,
-        resetComponentUpdates: () => templateUpdates.clear(),
-        projectRoot: serverOptions.projectRoot,
-      }),
-      createRemoveIdPrefixPlugin(externalMetadata.explicitBrowser),
-      await createAngularSsrTransformPlugin(serverOptions.workspaceRoot),
-      await createAngularMemoryPlugin({
-        virtualProjectRoot,
-        outputFiles,
-        templateUpdates,
-        external: externalMetadata.explicitBrowser,
-        disableViteTransport: !serverOptions.liveReload,
-      }),
-    ],
+    plugins,
     // Browser only optimizeDeps. (This does not run for SSR dependencies).
     optimizeDeps: getDepOptimizationConfig({
       // Only enable with caching since it causes prebundle dependencies to be cached

packages/angular/build/src/tools/vite/plugins/index.ts

@@ -10,3 +10,4 @@ export { createAngularMemoryPlugin } from './angular-memory-plugin';
 export { createRemoveIdPrefixPlugin } from './id-prefix-plugin';
 export { createAngularSetupMiddlewaresPlugin, ServerSsrMode } from './setup-middlewares-plugin';
 export { createAngularSsrTransformPlugin } from './ssr-transform-plugin';
+export { removeSourceMapsPlugin } from './remove-sourcemaps';

packages/angular/build/src/tools/vite/plugins/remove-sourcemaps.ts

@@ -0,0 +1,19 @@
+/**
+ * @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 'vite';
+
+export const removeSourceMapsPlugin: Plugin = {
+  name: 'vite:angular-remove-sourcemaps',
+  transform(code) {
+    return {
+      code,
+      map: { mappings: '' },
+    };
+  },
+};