feat(@angular-devkit/build-angular): emit external sourcemaps for com…

…ponent styles This commits, changes the behaviour in the esbuild based builders by emitting component sourcemaps in external files instead of inlining them. Closes angular#24049 and closes angular#26676
alan-agius4 · Dec 19, 2023 · a8c4ba1 · a8c4ba1
1 parent a708dcc
commit a8c4ba1
Show file tree

Hide file tree

Showing 5 changed files with 60 additions and 14 deletions.
diff --git a/...ges/angular_devkit/build_angular/src/builders/application/tests/options/sourcemap_spec.ts b/...ges/angular_devkit/build_angular/src/builders/application/tests/options/sourcemap_spec.ts
@@ -136,5 +136,41 @@ describeBuilder(buildApplication, APPLICATION_BUILDER_INFO, (harness) => {
 
       harness.expectFile('dist/browser/main.js.map').content.toContain('"x_google_ignoreList"');
     });
+
+    it('should generate component sourcemaps when sourcemaps when true', async () => {
+      await harness.writeFile('src/app/app.component.css', `* { color: red}`);
+
+      harness.useTarget('build', {
+        ...BASE_OPTIONS,
+        sourceMap: true,
+      });
+
+      const { result } = await harness.executeOnce();
+
+      expect(result?.success).toBeTrue();
+
+      harness
+        .expectFile('dist/browser/main.js')
+        .content.toContain('sourceMappingURL=app.component.css.map');
+      harness.expectFile('dist/browser/app.component.css.map').toExist();
+    });
+
+    it('should not generate component sourcemaps when sourcemaps when true', async () => {
+      await harness.writeFile('src/app/app.component.css', `* { color: red}`);
+
+      harness.useTarget('build', {
+        ...BASE_OPTIONS,
+        sourceMap: false,
+      });
+
+      const { result } = await harness.executeOnce();
+
+      expect(result?.success).toBeTrue();
+
+      harness
+        .expectFile('dist/browser/main.js')
+        .content.not.toContain('sourceMappingURL=app.component.css.map');
+      harness.expectFile('dist/browser/app.component.css.map').toNotExist();
+    });
   });
 });
diff --git a/packages/angular_devkit/build_angular/src/tools/esbuild/angular/compiler-plugin.ts b/packages/angular_devkit/build_angular/src/tools/esbuild/angular/compiler-plugin.ts
@@ -164,14 +164,15 @@ export function createCompilerPlugin(
               );
             }
 
-            const { contents, resourceFiles, referencedFiles, errors, warnings } = stylesheetResult;
+            const { contents, outputFiles, metafile, referencedFiles, errors, warnings } =
+              stylesheetResult;
             if (errors) {
               (result.errors ??= []).push(...errors);
             }
             (result.warnings ??= []).push(...warnings);
             additionalResults.set(stylesheetFile ?? containingFile, {
-              outputFiles: resourceFiles,
-              metafile: stylesheetResult.metafile,
+              outputFiles,
+              metafile,
             });
 
             if (referencedFiles) {
@@ -420,7 +421,16 @@ export function createCompilerPlugin(
         for (const { outputFiles, metafile } of additionalResults.values()) {
           // Add any additional output files to the main output files
           if (outputFiles?.length) {
-            result.outputFiles?.push(...outputFiles);
+            const outdir = build.initialOptions.outdir;
+            result.outputFiles?.push(
+              ...outputFiles.map((output) => {
+                if (outdir) {
+                  output.path = path.join(outdir, output.path);
+                }
+
+                return output;
+              }),
+            );
           }
 
           // Combine additional metafiles with main metafile

diff --git a/packages/angular_devkit/build_angular/src/tools/esbuild/angular/component-stylesheets.ts b/packages/angular_devkit/build_angular/src/tools/esbuild/angular/component-stylesheets.ts
@@ -45,7 +45,9 @@ export class ComponentStylesheetBundler {
   constructor(
     private readonly options: BundleStylesheetOptions,
     private readonly incremental: boolean,
-  ) {}
+  ) {
+    this.options.sourcemap = this.options.sourcemap ? 'linked' : false;
+  }
 
   async bundleFile(entry: string) {
     const bundlerContext = this.#fileContexts.getOrCreate(entry, () => {
@@ -132,20 +134,19 @@ export class ComponentStylesheetBundler {
 
 function extractResult(result: BundleContextResult, referencedFiles?: Set<string>) {
   let contents = '';
-  let map;
   let outputPath;
-  const resourceFiles: OutputFile[] = [];
+  const outputFiles: OutputFile[] = [];
   if (!result.errors) {
     for (const outputFile of result.outputFiles) {
       const filename = path.basename(outputFile.path);
       if (outputFile.type === BuildOutputFileType.Media) {
         // The output files could also contain resources (images/fonts/etc.) that were referenced
-        resourceFiles.push(outputFile);
+        outputFiles.push(outputFile);
       } else if (filename.endsWith('.css')) {
         outputPath = outputFile.path;
         contents = outputFile.text;
       } else if (filename.endsWith('.css.map')) {
-        map = outputFile.text;
+        outputFiles.push(outputFile);
       } else {
         throw new Error(
           `Unexpected non CSS/Media file "${filename}" outputted during component stylesheet processing.`,
@@ -170,9 +171,8 @@ function extractResult(result: BundleContextResult, referencedFiles?: Set<string
     errors: result.errors,
     warnings: result.warnings,
     contents,
-    map,
     path: outputPath,
-    resourceFiles,
+    outputFiles,
     metafile,
     referencedFiles,
   };

diff --git a/packages/angular_devkit/build_angular/src/tools/esbuild/angular/jit-plugin-callbacks.ts b/packages/angular_devkit/build_angular/src/tools/esbuild/angular/jit-plugin-callbacks.ts
@@ -121,10 +121,10 @@ export function setupJitPluginCallbacks(
         );
       }
 
-      const { contents, resourceFiles, errors, warnings, metafile, referencedFiles } =
+      const { contents, outputFiles, errors, warnings, metafile, referencedFiles } =
         stylesheetResult;
 
-      additionalResultFiles.set(entry.path, { outputFiles: resourceFiles, metafile });
+      additionalResultFiles.set(entry.path, { outputFiles, metafile });
 
       return {
         errors,

diff --git a/packages/angular_devkit/build_angular/src/tools/esbuild/stylesheets/bundle-options.ts b/packages/angular_devkit/build_angular/src/tools/esbuild/stylesheets/bundle-options.ts
@@ -22,7 +22,7 @@ export interface BundleStylesheetOptions {
   optimization: boolean;
   inlineFonts: boolean;
   preserveSymlinks?: boolean;
-  sourcemap: boolean | 'external' | 'inline';
+  sourcemap: boolean | 'external' | 'inline' | 'linked';
   outputNames: { bundles: string; media: string };
   includePaths?: string[];
   externalDependencies?: string[];