feat(@angular-devkit/build-angular): fine grain settings for sourceMaps (angular#13062)

* feat(@angular/cli): update schema to match new `sourceMap`

* feat(@angular-devkit/build-angular): fine grain settings for sourceMaps

This PR add more control over which sourceMaps you want, Now you can enable sourceMaps for scripts only, styles only or both. Also we added another functionality which are hidden sourcemaps. These are normaly used for error reporting tools.

Fixes angular#7527

Author: alan-agius4

packages/angular/cli/lib/config/schema.json

@@ -633,9 +633,39 @@
               "default": false
             },
             "sourceMap": {
-              "type": "boolean",
               "description": "Output sourcemaps.",
-              "default": true
+              "default": true,
+              "oneOf": [
+                {
+                  "type": "object",
+                  "properties": {
+                    "scripts": {
+                      "type": "boolean",
+                      "description": "Output sourcemaps for all scripts.",
+                      "default": true
+                    },
+                    "styles": {
+                      "type": "boolean",
+                      "description": "Output sourcemaps for all styles.",
+                      "default": true
+                    },
+                    "hidden": {
+                      "type": "boolean",
+                      "description": "Output sourcemaps used for error reporting tools.",
+                      "default": false
+                    },
+                    "vendor": {
+                      "type": "boolean",
+                      "description": "Resolve vendor packages sourcemaps.",
+                      "default": false
+                    }
+                  },
+                  "additionalProperties": false
+                },
+                {
+                  "type": "boolean"
+                }
+              ]
             },
             "vendorSourceMap": {
               "type": "boolean",
@@ -1045,8 +1075,34 @@
               "description": "Build using Ahead of Time compilation."
             },
             "sourceMap": {
-              "type": "boolean",
-              "description": "Output sourcemaps."
+              "description": "Output sourcemaps.",
+              "default": true,
+              "oneOf": [
+                {
+                  "type": "object",
+                  "properties": {
+                    "scripts": {
+                      "type": "boolean",
+                      "description": "Output sourcemaps for all scripts.",
+                      "default": true
+                    },
+                    "styles": {
+                      "type": "boolean",
+                      "description": "Output sourcemaps for all styles.",
+                      "default": true
+                    },
+                    "vendor": {
+                      "type": "boolean",
+                      "description": "Resolve vendor packages sourcemaps.",
+                      "default": false
+                    }
+                  },
+                  "additionalProperties": false
+                },
+                {
+                  "type": "boolean"
+                }
+              ]
             },
             "vendorSourceMap": {
               "type": "boolean",
@@ -1189,9 +1245,34 @@
               "description": "Defines the build environment."
             },
             "sourceMap": {
-              "type": "boolean",
               "description": "Output sourcemaps.",
-              "default": true
+              "default": true,
+              "oneOf": [
+                {
+                  "type": "object",
+                  "properties": {
+                    "scripts": {
+                      "type": "boolean",
+                      "description": "Output sourcemaps for all scripts.",
+                      "default": true
+                    },
+                    "styles": {
+                      "type": "boolean",
+                      "description": "Output sourcemaps for all styles.",
+                      "default": true
+                    },
+                    "vendor": {
+                      "type": "boolean",
+                      "description": "Resolve vendor packages sourcemaps.",
+                      "default": false
+                    }
+                  },
+                  "additionalProperties": false
+                },
+                {
+                  "type": "boolean"
+                }
+              ]
             },
             "progress": {
               "type": "boolean",
@@ -1455,9 +1536,39 @@
               "description": "The path where style resources will be placed, relative to outputPath."
             },
             "sourceMap": {
-              "type": "boolean",
               "description": "Output sourcemaps.",
-              "default": true
+              "default": true,
+              "oneOf": [
+                {
+                  "type": "object",
+                  "properties": {
+                    "scripts": {
+                      "type": "boolean",
+                      "description": "Output sourcemaps for all scripts.",
+                      "default": true
+                    },
+                    "styles": {
+                      "type": "boolean",
+                      "description": "Output sourcemaps for all styles.",
+                      "default": true
+                    },
+                    "hidden": {
+                      "type": "boolean",
+                      "description": "Output sourcemaps used for error reporting tools.",
+                      "default": false
+                    },
+                    "vendor": {
+                      "type": "boolean",
+                      "description": "Resolve vendor packages sourcemaps.",
+                      "default": false
+                    }
+                  },
+                  "additionalProperties": false
+                },
+                {
+                  "type": "boolean"
+                }
+              ]
             },
             "vendorSourceMap": {
               "type": "boolean",

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

@@ -24,6 +24,9 @@ export interface BuildOptions {
   resourcesOutputPath?: string;
   aot?: boolean;
   sourceMap?: boolean;
+  scriptsSourceMap?: boolean;
+  stylesSourceMap?: boolean;
+  hiddenSourceMap?: boolean;
   vendorSourceMap?: boolean;
   evalSourceMap?: boolean;
   vendorChunk?: boolean;

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

@@ -10,7 +10,7 @@ import * as path from 'path';
 import { IndexHtmlWebpackPlugin } from '../../plugins/index-html-webpack-plugin';
 import { generateEntryPoints } from '../../utilities/package-chunk-sort';
 import { WebpackConfigOptions } from '../build-options';
-import { normalizeExtraEntryPoints } from './utils';
+import { getSourceMapDevTool, normalizeExtraEntryPoints } from './utils';
 
 const SubresourceIntegrityPlugin = require('webpack-subresource-integrity');
 
@@ -19,16 +19,11 @@ export function getBrowserConfig(wco: WebpackConfigOptions) {
   const { root, buildOptions } = wco;
   const extraPlugins = [];
 
-  let sourcemaps: string | false = false;
-  if (buildOptions.sourceMap) {
-    // See https://webpack.js.org/configuration/devtool/ for sourcemap types.
-    if (buildOptions.evalSourceMap && !buildOptions.optimization) {
-      // Produce eval sourcemaps for development with serve, which are faster.
-      sourcemaps = 'eval';
-    } else {
-      // Produce full separate sourcemaps for production.
-      sourcemaps = 'source-map';
-    }
+  let isEval = false;
+  // See https://webpack.js.org/configuration/devtool/ for sourcemap types.
+  if (buildOptions.sourceMap && buildOptions.evalSourceMap && !buildOptions.optimization) {
+    // Produce eval sourcemaps for development with serve, which are faster.
+    isEval = true;
   }
 
   if (buildOptions.index) {
@@ -59,11 +54,25 @@ export function getBrowserConfig(wco: WebpackConfigOptions) {
     }));
   }
 
+  if (!isEval && buildOptions.sourceMap) {
+    const {
+      scriptsSourceMap = false,
+      stylesSourceMap = false,
+      hiddenSourceMap = false,
+    } = buildOptions;
+
+    extraPlugins.push(getSourceMapDevTool(
+      scriptsSourceMap,
+      stylesSourceMap,
+      hiddenSourceMap,
+    ));
+  }
+
   const globalStylesBundleNames = normalizeExtraEntryPoints(buildOptions.styles, 'styles')
     .map(style => style.bundleName);
 
   return {
-    devtool: sourcemaps,
+    devtool: isEval ? 'eval' : false,
     resolve: {
       mainFields: [
         ...(wco.supportES2015 ? ['es2015'] : []),

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

@@ -15,7 +15,7 @@ import { ScriptsWebpackPlugin } from '../../plugins/scripts-webpack-plugin';
 import { findUp } from '../../utilities/find-up';
 import { isDirectory } from '../../utilities/is-directory';
 import { requireProjectModule } from '../../utilities/require-project-module';
-import { WebpackConfigOptions } from '../build-options';
+import { BuildOptions, WebpackConfigOptions } from '../build-options';
 import { getOutputHashFormat, normalizeExtraEntryPoints } from './utils';
 
 const ProgressPlugin = require('webpack/lib/ProgressPlugin');
@@ -102,7 +102,7 @@ export function getCommonConfig(wco: WebpackConfigOptions) {
 
       extraPlugins.push(new ScriptsWebpackPlugin({
         name: bundleName,
-        sourceMap: buildOptions.sourceMap,
+        sourceMap: buildOptions.scriptsSourceMap,
         filename: `${path.basename(bundleName)}${hash}.js`,
         scripts: script.paths,
         basePath: projectRoot,
@@ -174,7 +174,7 @@ export function getCommonConfig(wco: WebpackConfigOptions) {
       use: [
         {
           loader: buildOptimizerLoader,
-          options: { sourceMap: buildOptions.sourceMap },
+          options: { sourceMap: buildOptions.scriptsSourceMap },
         },
       ],
     };
@@ -297,12 +297,12 @@ export function getCommonConfig(wco: WebpackConfigOptions) {
         // TODO: check with Mike what this feature needs.
         new BundleBudgetPlugin({ budgets: buildOptions.budgets }),
         new CleanCssWebpackPlugin({
-          sourceMap: buildOptions.sourceMap,
+          sourceMap: buildOptions.stylesSourceMap,
           // component styles retain their original file name
           test: (file) => /\.(?:css|scss|sass|less|styl)$/.test(file),
         }),
         new TerserPlugin({
-          sourceMap: buildOptions.sourceMap,
+          sourceMap: buildOptions.scriptsSourceMap,
           parallel: true,
           cache: true,
           terserOptions,

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

@@ -7,6 +7,7 @@
  */
 import { Configuration } from 'webpack';
 import { WebpackConfigOptions } from '../build-options';
+import { getSourceMapDevTool } from './utils';
 
 
 /**
@@ -15,8 +16,22 @@ import { WebpackConfigOptions } from '../build-options';
  */
 export function getServerConfig(wco: WebpackConfigOptions) {
 
+  const extraPlugins = [];
+  if (wco.buildOptions.sourceMap) {
+    const {
+      scriptsSourceMap = false,
+      stylesSourceMap = false,
+      hiddenSourceMap = false,
+    } = wco.buildOptions;
+
+    extraPlugins.push(getSourceMapDevTool(
+      scriptsSourceMap,
+      stylesSourceMap,
+      hiddenSourceMap,
+    ));
+  }
+
   const config: Configuration = {
-    devtool: wco.buildOptions.sourceMap ? 'source-map' : false,
     resolve: {
       mainFields: [
         ...(wco.supportES2015 ? ['es2015'] : []),
@@ -27,6 +42,7 @@ export function getServerConfig(wco: WebpackConfigOptions) {
     output: {
       libraryTarget: 'commonjs',
     },
+    plugins: extraPlugins,
     node: false,
   };
 

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

@@ -40,7 +40,8 @@ export function getStylesConfig(wco: WebpackConfigOptions) {
   const entryPoints: { [key: string]: string[] } = {};
   const globalStylePaths: string[] = [];
   const extraPlugins = [];
-  const cssSourceMap = buildOptions.sourceMap;
+
+  const cssSourceMap = buildOptions.stylesSourceMap;
 
   // Determine hashing format.
   const hashFormat = getOutputHashFormat(buildOptions.outputHashing as string);
@@ -187,7 +188,7 @@ export function getStylesConfig(wco: WebpackConfigOptions) {
         options: {
           ident: 'embedded',
           plugins: postcssPluginCreator,
-          sourceMap: cssSourceMap ? 'inline' : false,
+          sourceMap: cssSourceMap && !buildOptions.hiddenSourceMap ? 'inline' : false,
         },
       },
       ...(use as webpack.Loader[]),
@@ -208,7 +209,10 @@ export function getStylesConfig(wco: WebpackConfigOptions) {
             options: {
               ident: buildOptions.extractCss ? 'extracted' : 'embedded',
               plugins: postcssPluginCreator,
-              sourceMap: cssSourceMap && !buildOptions.extractCss ? 'inline' : cssSourceMap,
+              sourceMap: cssSourceMap
+                && !buildOptions.extractCss
+                && !buildOptions.hiddenSourceMap
+                ? 'inline' : cssSourceMap,
             },
           },
           ...(use as webpack.Loader[]),

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

@@ -10,6 +10,7 @@ import * as glob from 'glob';
 import * as path from 'path';
 import * as webpack from 'webpack';
 import { WebpackConfigOptions, WebpackTestOptions } from '../build-options';
+import { getSourceMapDevTool } from './utils';
 
 
 /**
@@ -55,6 +56,20 @@ export function getTestConfig(
     });
   }
 
+  if (wco.buildOptions.sourceMap) {
+    const {
+      scriptsSourceMap = false,
+      stylesSourceMap = false,
+    } = wco.buildOptions;
+
+    extraPlugins.push(getSourceMapDevTool(
+      scriptsSourceMap,
+      stylesSourceMap,
+      false,
+      true,
+    ));
+  }
+
   return {
     mode: 'development',
     resolve: {
@@ -63,7 +78,7 @@ export function getTestConfig(
         'browser', 'module', 'main',
       ],
     },
-    devtool: buildOptions.sourceMap ? 'inline-source-map' : 'eval',
+    devtool: buildOptions.sourceMap ? false : 'eval',
     entry: {
       main: path.resolve(root, buildOptions.main),
     },

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

@@ -75,7 +75,7 @@ function _createAotPlugin(
     locale: buildOptions.i18nLocale,
     platform: buildOptions.platform === 'server' ? PLATFORM.Server : PLATFORM.Browser,
     missingTranslation: buildOptions.i18nMissingTranslation,
-    sourceMap: buildOptions.sourceMap,
+    sourceMap: buildOptions.scriptsSourceMap,
     additionalLazyModules,
     hostReplacementPaths,
     nameLazyFiles: buildOptions.namedChunks,
@@ -108,7 +108,7 @@ export function getAotConfig(
   if (buildOptions.buildOptimizer) {
     loaders.unshift({
       loader: buildOptimizerLoader,
-      options: { sourceMap: buildOptions.sourceMap }
+      options: { sourceMap: buildOptions.scriptsSourceMap }
     });
   }