fix(@angular-devkit/build-angular): improve fidelity and performance of babel loader sourcemaps

This change uses the `@ampproject/remapping` package to merge sourcemaps generated from the customized babel loader used to perform the partial compilation linking in applications as well as other optimization and downleveling transformations. This provides more accurate output mapppings as well as improved performance and lower memory usage when source maps are enabled within a build.

Author: clydin

packages/angular_devkit/build_angular/src/babel/babel-loader.d.ts

@@ -7,9 +7,7 @@
  */
 
 declare module 'babel-loader' {
-  type BabelLoaderCustomizer<T> = (
-    babel: typeof import('@babel/core'),
-  ) => {
+  type BabelLoaderCustomizer<T> = (babel: typeof import('@babel/core')) => {
     customOptions?(
       this: import('webpack').loader.LoaderContext,
       loaderOptions: Record<string, unknown>,
@@ -20,6 +18,17 @@ declare module 'babel-loader' {
       configuration: import('@babel/core').PartialConfig,
       loaderArguments: { source: string; map?: unknown; customOptions: T },
     ): import('@babel/core').TransformOptions;
+    result?(
+      this: import('webpack').loader.LoaderContext,
+      result: import('@babel/core').BabelFileResult,
+      context: {
+        source: string;
+        map?: unknown;
+        customOptions: T;
+        configuration: import('@babel/core').PartialConfig;
+        options: import('@babel/core').TransformOptions;
+      },
+    ): import('@babel/core').BabelFileResult;
   };
   function custom<T>(customizer: BabelLoaderCustomizer<T>): import('webpack').loader.Loader;
 }

packages/angular_devkit/build_angular/src/babel/webpack-loader.ts

@@ -6,6 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
+import remapping from '@ampproject/remapping';
 import { custom } from 'babel-loader';
 import { ScriptTarget } from 'typescript';
 import { loadEsmModule } from '../utils/load-esm';
@@ -21,6 +22,9 @@ interface AngularCustomOptions extends Pick<ApplicationPresetOptions, 'angularLi
   };
 }
 
+// Extract Sourcemap input type from the remapping function since it is not currently exported
+type SourceMapInput = Exclude<Parameters<typeof remapping>[0], unknown[]>;
+
 /**
  * Cached instance of the compiler-cli linker's needsLinking function.
  */
@@ -201,10 +205,10 @@ export default custom<AngularCustomOptions>(() => {
 
       return {
         ...configuration.options,
-        // Workaround for https://github.com/babel/babel-loader/pull/896 is available
-        // Delete once the above PR is released
+        // Using `false` disables babel from attempting to locate sourcemaps or process any inline maps.
+        // The babel types do not include the false option even though it is valid
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        inputSourceMap: configuration.options.inputSourceMap || (false as any), // Typings are not correct
+        inputSourceMap: false as any,
         plugins,
         presets: [
           ...(configuration.options.presets || []),
@@ -229,5 +233,20 @@ export default custom<AngularCustomOptions>(() => {
         ],
       };
     },
+    result(result, { map: inputSourceMap }) {
+      if (result.map && inputSourceMap) {
+        // Merge the intermediate sourcemap generated by babel with the input source map.
+        // The casting is required due to slight differences in the types for babel and
+        // `@ampproject/remapping` source map objects but both are compatible with Webpack.
+        // This method for merging is used because it provides more accurate output
+        // and is faster while using less memory.
+        result.map = remapping(
+          [result.map as SourceMapInput, inputSourceMap as SourceMapInput],
+          () => null,
+        ) as typeof result.map;
+      }
+
+      return result;
+    },
   };
 });