fix(@angular/build): do not reference sourcemaps in web workers and g…

…lobal stylesheet bundles when hidden setting is enabled This commit addresses an issue where sourcemaps in web workers and global stylesheets were referenced despite the hidden setting being enabled. Closes: #27833
angular · Jun 13, 2024 · 8c37926 · 8c37926
1 parent a4d8175
commit 8c37926
Show file tree

Hide file tree

Showing 4 changed files with 79 additions and 6 deletions.
diff --git a/packages/angular/build/src/builders/application/tests/options/sourcemap_spec.ts b/packages/angular/build/src/builders/application/tests/options/sourcemap_spec.ts
@@ -124,6 +124,74 @@ describeBuilder(buildApplication, APPLICATION_BUILDER_INFO, (harness) => {
       harness.expectFile('dist/browser/main.js.map').content.toContain('/common/index.ts');
     });
 
+    it(`should not include 'sourceMappingURL' sourcemaps when hidden suboption is true`, async () => {
+      await harness.writeFile('src/styles.css', `div { flex: 1 }`);
+
+      harness.useTarget('build', {
+        ...BASE_OPTIONS,
+        styles: ['src/styles.css'],
+        sourceMap: { scripts: true, styles: true, hidden: true },
+      });
+
+      const { result } = await harness.executeOnce();
+
+      expect(result?.success).toBeTrue();
+
+      harness.expectFile('dist/browser/main.js.map').toExist();
+      harness
+        .expectFile('dist/browser/main.js')
+        .content.not.toContain('sourceMappingURL=main.js.map');
+
+      harness.expectFile('dist/browser/styles.css.map').toExist();
+      harness
+        .expectFile('dist/browser/styles.css')
+        .content.not.toContain('sourceMappingURL=styles.css.map');
+    });
+
+    it(`should include 'sourceMappingURL' sourcemaps when hidden suboption is false`, async () => {
+      await harness.writeFile('src/styles.css', `div { flex: 1 }`);
+
+      harness.useTarget('build', {
+        ...BASE_OPTIONS,
+        styles: ['src/styles.css'],
+        sourceMap: { scripts: true, styles: true, hidden: false },
+      });
+
+      const { result } = await harness.executeOnce();
+
+      expect(result?.success).toBeTrue();
+
+      harness.expectFile('dist/browser/main.js.map').toExist();
+      harness.expectFile('dist/browser/main.js').content.toContain('sourceMappingURL=main.js.map');
+
+      harness.expectFile('dist/browser/styles.css.map').toExist();
+      harness
+        .expectFile('dist/browser/styles.css')
+        .content.toContain('sourceMappingURL=styles.css.map');
+    });
+
+    it(`should include 'sourceMappingURL' sourcemaps when hidden suboption is not set`, async () => {
+      await harness.writeFile('src/styles.css', `div { flex: 1 }`);
+
+      harness.useTarget('build', {
+        ...BASE_OPTIONS,
+        styles: ['src/styles.css'],
+        sourceMap: { scripts: true, styles: true },
+      });
+
+      const { result } = await harness.executeOnce();
+
+      expect(result?.success).toBeTrue();
+
+      harness.expectFile('dist/browser/main.js.map').toExist();
+      harness.expectFile('dist/browser/main.js').content.toContain('sourceMappingURL=main.js.map');
+
+      harness.expectFile('dist/browser/styles.css.map').toExist();
+      harness
+        .expectFile('dist/browser/styles.css')
+        .content.toContain('sourceMappingURL=styles.css.map');
+    });
+
     it('should add "x_google_ignoreList" extension to script sourcemap files when true', async () => {
       harness.useTarget('build', {
         ...BASE_OPTIONS,

diff --git a/packages/angular/build/src/tools/esbuild/angular/compiler-plugin.ts b/packages/angular/build/src/tools/esbuild/angular/compiler-plugin.ts
@@ -36,7 +36,7 @@ import { setupJitPluginCallbacks } from './jit-plugin-callbacks';
 import { SourceFileCache } from './source-file-cache';
 
 export interface CompilerPluginOptions {
-  sourcemap: boolean;
+  sourcemap: boolean | 'external';
   tsconfig: string;
   jit?: boolean;
   /** Skip TypeScript compilation setup. This is useful to re-use the TypeScript compilation from another plugin. */
@@ -71,7 +71,12 @@ export function createCompilerPlugin(
         );
       }
       const javascriptTransformer = new JavaScriptTransformer(
-        pluginOptions,
+        {
+          sourcemap: !!pluginOptions.sourcemap,
+          thirdPartySourcemaps: pluginOptions.thirdPartySourcemaps,
+          advancedOptimizations: pluginOptions.advancedOptimizations,
+          jit: pluginOptions.jit,
+        },
         maxWorkers,
         cacheStore?.createCache('jstransformer'),
       );
@@ -541,8 +546,8 @@ function createCompilerOptionsTransformer(
     return {
       ...compilerOptions,
       noEmitOnError: false,
-      inlineSources: pluginOptions.sourcemap,
-      inlineSourceMap: pluginOptions.sourcemap,
+      inlineSources: !!pluginOptions.sourcemap,
+      inlineSourceMap: !!pluginOptions.sourcemap,
       mapRoot: undefined,
       sourceRoot: undefined,
       preserveSymlinks,

diff --git a/packages/angular/build/src/tools/esbuild/compiler-plugin-options.ts b/packages/angular/build/src/tools/esbuild/compiler-plugin-options.ts
@@ -42,7 +42,7 @@ export function createCompilerPluginOptions(
   return {
     // JS/TS options
     pluginOptions: {
-      sourcemap: !!sourcemapOptions.scripts,
+      sourcemap: !!sourcemapOptions.scripts && (sourcemapOptions.hidden ? 'external' : true),
       thirdPartySourcemaps: sourcemapOptions.vendor,
       tsconfig,
       jit,

diff --git a/packages/angular/build/src/tools/esbuild/global-styles.ts b/packages/angular/build/src/tools/esbuild/global-styles.ts
@@ -52,7 +52,7 @@ export function createGlobalStylesBundleOptions(
         workspaceRoot,
         optimization: !!optimizationOptions.styles.minify,
         inlineFonts: !!optimizationOptions.fonts.inline,
-        sourcemap: !!sourcemapOptions.styles,
+        sourcemap: !!sourcemapOptions.styles && (sourcemapOptions.hidden ? 'external' : true),
         preserveSymlinks,
         target,
         externalDependencies,