fix(@angular-devkit/build-angular): only include vendor sourcemaps when using the dev-server when the option is enabled

alan-agius4 · alan-agius4 · commit 451903e01f36 · 2023-11-20T10:23:03.000Z
Prior to this change the vendor sourcemaps option was not being considered when in the vite JavaScript transformation pipeline.
diff --git a/packages/angular_devkit/build_angular/src/builders/dev-server/vite-server.ts b/packages/angular_devkit/build_angular/src/builders/dev-server/vite-server.ts
@@ -22,6 +22,7 @@ import { JavaScriptTransformer } from '../../tools/esbuild/javascript-transforme
 import { createRxjsEsmResolutionPlugin } from '../../tools/esbuild/rxjs-esm-resolution-plugin';
 import { getFeatureSupport, transformSupportedBrowsersToTargets } from '../../tools/esbuild/utils';
 import { createAngularLocaleDataPlugin } from '../../tools/vite/i18n-locale-plugin';
+import { normalizeSourceMaps } from '../../utils';
 import { loadEsmModule } from '../../utils/load-esm';
 import { renderPage } from '../../utils/server-rendering/render-page';
 import { getSupportedBrowsers } from '../../utils/supported-browsers';
@@ -104,12 +105,14 @@ export async function* serveWithVite(
     browserOptions.forceI18nFlatOutput = true;
   }
 
+  const { vendor: thirdPartySourcemaps } = normalizeSourceMaps(browserOptions.sourceMap ?? false);
+
   // Setup the prebundling transformer that will be shared across Vite prebundling requests
   const prebundleTransformer = new JavaScriptTransformer(
     // Always enable JIT linking to support applications built with and without AOT.
     // In a development environment the additional scope information does not
     // have a negative effect unlike production where final output size is relevant.
-    { sourcemap: true, jit: true, thirdPartySourcemaps: true },
+    { sourcemap: true, jit: true, thirdPartySourcemaps },
     1,
     true,
   );
@@ -237,6 +240,7 @@ export async function* serveWithVite(
         browserOptions.loader as EsbuildLoaderOption | undefined,
         extensions?.middleware,
         transformers?.indexHtml,
+        thirdPartySourcemaps,
       );
 
       server = await createServer(serverConfiguration);
@@ -405,6 +409,7 @@ export async function setupServer(
   prebundleLoaderExtensions: EsbuildLoaderOption | undefined,
   extensionMiddleware?: Connect.NextHandleFunction[],
   indexHtmlTransformer?: (content: string) => Promise<string>,
+  thirdPartySourcemaps = false,
 ): Promise<InlineConfig> {
   const proxy = await loadProxyConfiguration(
     serverOptions.workspaceRoot,
@@ -484,6 +489,7 @@ export async function setupServer(
         prebundleTransformer,
         target,
         loader: prebundleLoaderExtensions,
+        thirdPartySourcemaps,
       }),
     },
     plugins: [
@@ -740,6 +746,7 @@ export async function setupServer(
       prebundleTransformer,
       target,
       loader: prebundleLoaderExtensions,
+      thirdPartySourcemaps,
     }),
   };
 
@@ -810,6 +817,7 @@ function getDepOptimizationConfig({
   prebundleTransformer,
   ssr,
   loader,
+  thirdPartySourcemaps,
 }: {
   disabled: boolean;
   exclude: string[];
@@ -818,10 +826,13 @@ function getDepOptimizationConfig({
   prebundleTransformer: JavaScriptTransformer;
   ssr: boolean;
   loader?: EsbuildLoaderOption;
+  thirdPartySourcemaps: boolean;
 }): DepOptimizationConfig {
   const plugins: ViteEsBuildPlugin[] = [
     {
-      name: `angular-vite-optimize-deps${ssr ? '-ssr' : ''}`,
+      name: `angular-vite-optimize-deps${ssr ? '-ssr' : ''}${
+        thirdPartySourcemaps ? '-vendor-sourcemap' : ''
+      }`,
       setup(build) {
         build.onLoad({ filter: /\.[cm]?js$/ }, async (args) => {
           return {
