fix(@angular-devkit/build-optimizer): improve quality of sourcemaps

Author: clydin

packages/angular_devkit/build_optimizer/BUILD

@@ -27,6 +27,7 @@ ts_library(
     deps = [
         "@npm//@types/node",
         "@npm//@types/webpack",
+        "@npm//@types/webpack-sources",
         "@npm//source-map",
         "@npm//tslib",
         "@npm//typescript",

packages/angular_devkit/build_optimizer/src/build-optimizer/webpack-loader.ts

@@ -5,9 +5,9 @@
  * Use of this source code is governed by an MIT-style license that can be
  * found in the LICENSE file at https://angular.io/license
  */
-import { RawSourceMap, SourceMapConsumer, SourceMapGenerator } from 'source-map';
+import { RawSourceMap } from 'source-map';
 import * as webpack from 'webpack'; // tslint:disable-line:no-implicit-dependencies
-
+import { SourceMapSource } from 'webpack-sources';
 const loaderUtils = require('loader-utils');
 
 import { buildOptimizer } from './build-optimizer';
@@ -53,15 +53,11 @@ export default function buildOptimizerLoader(
 
   const options: BuildOptimizerLoaderOptions = loaderUtils.getOptions(this) || {};
 
-  // Make up names of the intermediate files so we can chain the sourcemaps.
-  const inputFilePath = this.resourcePath + '.pre-build-optimizer.js';
-  const outputFilePath = this.resourcePath + '.post-build-optimizer.js';
-
   const boOutput = buildOptimizer({
     content,
     originalFilePath: this.resourcePath,
-    inputFilePath,
-    outputFilePath,
+    inputFilePath: this.resourcePath,
+    outputFilePath: this.resourcePath,
     emitSourceMap: options.sourceMap,
     isSideEffectFree:
       this._module && this._module.factoryMeta && this._module.factoryMeta.sideEffectFree,
@@ -84,28 +80,18 @@ export default function buildOptimizerLoader(
     newContent = newContent.replace(/^\/\/# sourceMappingURL=[^\r\n]*/gm, '');
 
     if (previousSourceMap) {
-      // If there's a previous sourcemap, we have to chain them.
-      // See https://github.com/mozilla/source-map/issues/216#issuecomment-150839869 for a simple
-      // source map chaining example.
       // Use http://sokra.github.io/source-map-visualization/ to validate sourcemaps make sense.
 
-      // Force the previous sourcemap to use the filename we made up for it.
-      // In order for source maps to be chained, the consumed source map `file` needs to be in the
-      // consumers source map `sources` array.
-      previousSourceMap.file = inputFilePath;
-
-      // Chain the sourcemaps.
-      SourceMapConsumer.with(intermediateSourceMap, null, intermediate => {
-        return SourceMapConsumer.with(previousSourceMap, null, previous => {
-          const generator = SourceMapGenerator.fromSourceMap(intermediate);
-          generator.applySourceMap(previous);
-
-          return generator.toJSON();
-        });
-        // tslint:disable-next-line: no-any
-      }).then(map => callback(null, newContent, map as any), error => callback(error));
-
-      return;
+      // The last argument is not yet in the typings
+      // tslint:disable-next-line: no-any
+      newSourceMap = new (SourceMapSource as any)(
+        newContent,
+        this.resourcePath,
+        intermediateSourceMap,
+        content,
+        previousSourceMap,
+        true,
+      ).map();
     } else {
       // Otherwise just return our generated sourcemap.
       newSourceMap = intermediateSourceMap;