feat(@angular-devkit/build-angular): add sourcemaps for external libraries

Added a new flag `vendorSourceMap` to enable consumers to have sourcemaps for vendor packages.

Author: alan-agius4

package-lock.json

@@ -135,6 +135,7 @@
     "semver-intersect": "^1.1.2",
     "source-map": "^0.5.6",
     "source-map-support": "^0.5.0",
+    "source-map-loader": "^0.2.3",
     "stats-webpack-plugin": "^0.6.2",
     "style-loader": "^0.21.0",
     "stylus": "^0.54.5",

package.json

@@ -41,6 +41,7 @@
     "rxjs": "^6.0.0",
     "sass-loader": "^7.0.1",
     "source-map-support": "^0.5.0",
+    "source-map-loader": "^0.2.3",
     "stats-webpack-plugin": "^0.6.2",
     "style-loader": "^0.21.0",
     "stylus": "^0.54.5",

packages/angular_devkit/build_angular/package.json

@@ -18,6 +18,7 @@ export interface BuildOptions {
   outputPath: string;
   aot?: boolean;
   sourceMap?: boolean;
+  vendorSourceMap?: boolean;
   evalSourceMap?: boolean;
   vendorChunk?: boolean;
   commonChunk?: boolean;

packages/angular_devkit/build_angular/src/angular-cli-files/models/build-options.ts

@@ -158,6 +158,17 @@ export function getCommonConfig(wco: WebpackConfigOptions) {
     extraPlugins.push(new StatsPlugin('stats.json', 'verbose'));
   }
 
+  let sourceMapUseRule;
+  if (buildOptions.sourceMap && buildOptions.vendorSourceMap) {
+    sourceMapUseRule = {
+      use: [
+        {
+          loader: 'source-map-loader'
+        }
+      ]
+    }
+  }
+
   let buildOptimizerUseRule;
   if (buildOptions.buildOptimizer) {
     buildOptimizerUseRule = {
@@ -274,6 +285,12 @@ export function getCommonConfig(wco: WebpackConfigOptions) {
           test: /\.js$/,
           ...buildOptimizerUseRule,
         },
+        {
+          test: /\.js$/,
+          exclude: /(ngfactory|ngstyle).js$/,
+          enforce: 'pre',
+          ...sourceMapUseRule,
+        },
       ]
     },
     optimization: {

packages/angular_devkit/build_angular/src/angular-cli-files/models/webpack-configs/common.ts

@@ -66,6 +66,11 @@ export interface BrowserBuilderSchema {
    */
   sourceMap: boolean;
 
+  /**
+   * Resolve vendor packages sourcemaps.
+   */
+  vendorSourceMap?: boolean;
+
   /**
    * Output in-file eval sourcemaps.
    */

packages/angular_devkit/build_angular/src/browser/schema.d.ts

@@ -80,6 +80,11 @@
       "description": "Output sourcemaps.",
       "default": true
     },
+    "vendorSourceMap": {
+      "type": "boolean",
+      "description": "Resolve vendor packages sourcemaps.",
+      "default": false
+    },
     "evalSourceMap": {
       "type": "boolean",
       "description": "Output in-file eval sourcemaps.",

packages/angular_devkit/build_angular/src/browser/schema.json

@@ -90,6 +90,11 @@
       "type": "boolean",
       "description": "Output sourcemaps."
     },
+    "vendorSourceMap": {
+      "type": "boolean",
+      "description": "Resolve vendor packages sourcemaps.",
+      "default": false
+    },
     "evalSourceMap": {
       "type": "boolean",
       "description": "Output in-file eval sourcemaps."

packages/angular_devkit/build_angular/src/dev-server/schema.json

@@ -64,8 +64,16 @@
     },
     "sourceMap": {
       "type": "boolean",
-      "description": "Output sourcemaps.",
-      "default": true
+      "description": "Output sourcemaps."
+    },
+    "vendorSourceMap": {
+      "type": "boolean",
+      "description": "Resolve vendor packages sourcemaps.",
+      "default": false
+    },
+    "evalSourceMap": {
+      "type": "boolean",
+      "description": "Output in-file eval sourcemaps."
     },
     "progress": {
       "type": "boolean",

packages/angular_devkit/build_angular/src/karma/schema.json

@@ -30,6 +30,10 @@ export interface BuildWebpackServerSchema {
    * Use a separate bundle containing only vendor libraries.
    */
   vendorChunk?: boolean;
+  /**
+   * Resolve vendor packages sourcemaps.
+   */
+  vendorSourceMap?: boolean;
   /**
    * Output in-file eval sourcemaps.
    */

packages/angular_devkit/build_angular/src/server/schema.d.ts

@@ -49,6 +49,11 @@
       "description": "Output sourcemaps.",
       "default": true
     },
+    "vendorSourceMap": {
+      "type": "boolean",
+      "description": "Resolve vendor packages sourcemaps.",
+      "default": false
+    },
     "evalSourceMap": {
       "type": "boolean",
       "description": "Output in-file eval sourcemaps.",

packages/angular_devkit/build_angular/src/server/schema.json

@@ -0,0 +1,52 @@
+/**
+ * @license
+ * Copyright Google Inc. All Rights Reserved.
+ *
+ * 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 { join, normalize, virtualFs } from '@angular-devkit/core';
+import * as path from 'path';
+import { tap } from 'rxjs/operators';
+import { Timeout, browserTargetSpec, host, runTargetSpec } from '../utils';
+
+describe('Browser Builder external source map', () => {
+  const outputPath = normalize('dist');
+
+  beforeEach(done => host.initialize().toPromise().then(done, done.fail));
+  afterEach(done => host.restore().toPromise().then(done, done.fail));
+
+  it('works', (done) => {
+    const overrides = { sourceMap: true, vendorSourceMap: true };
+
+    runTargetSpec(host, browserTargetSpec, overrides).pipe(
+      tap((buildEvent) => expect(buildEvent.success).toBe(true)),
+      tap(() => {
+        const fileName = join(outputPath, 'vendor.js.map');
+        expect(host.scopedSync().exists(fileName)).toBe(true);
+        const content = virtualFs.fileBufferToString(host.scopedSync().read(normalize(fileName)));
+        // this is due the fact that some vendors like `tslib` sourcemaps to js files
+        const sourcePath = JSON.parse(content).sources[0];
+        expect(path.extname(sourcePath)).toBe('.ts', `${sourcePath} extention should be '.ts'`);
+      }),
+    ).toPromise().then(done, done.fail);
+  }, Timeout.Basic);
+
+  it('does not map sourcemaps from external library when disabled', (done) => {
+    const overrides = { sourceMap: true, vendorSourceMap: false };
+
+    runTargetSpec(host, browserTargetSpec, overrides).pipe(
+      tap((buildEvent) => expect(buildEvent.success).toBe(true)),
+      tap(() => {
+        const fileName = join(outputPath, 'vendor.js.map');
+        expect(host.scopedSync().exists(fileName)).toBe(true);
+        const content = virtualFs.fileBufferToString(host.scopedSync().read(normalize(fileName)));
+        // this is due the fact that some vendors like `tslib` sourcemaps to js files
+        const sourcePath = JSON.parse(content).sources[0];
+        expect(path.extname(sourcePath)).toBe('.js', `${sourcePath} extention should be '.js'`);
+      }),
+    ).toPromise().then(done, done.fail);
+  }, Timeout.Basic);
+
+});