feat(build): add sourcemap option (angular#3113)

Add `--no-sourcemap` option to `ng build/serve/test`.

Disabling sourcemaps can help with build speeds. My tests on a medium project shoul a 11.5% improvement on initial builds, and a 37% improvement on rebuilds.

Disabling sourcemaps will make debugging harder, since it makes line information very innacurate.

Partially address angular#1980

packages/angular-cli/commands/build.ts

@@ -11,6 +11,7 @@ export interface BuildOptions {
   supressSizes: boolean;
   baseHref?: string;
   aot?: boolean;
+  sourcemap?: boolean;
 }
 
 const BuildCommand = Command.extend({
@@ -31,7 +32,8 @@ const BuildCommand = Command.extend({
     { name: 'watcher',        type: String },
     { name: 'suppress-sizes', type: Boolean, default: false },
     { name: 'base-href',      type: String,  default: null, aliases: ['bh'] },
-    { name: 'aot',            type: Boolean, default: false }
+    { name: 'aot',            type: Boolean, default: false },
+    { name: 'sourcemap',      type: Boolean, default: true, aliases: ['sm'] }
   ],
 
   run: function (commandOptions: BuildOptions) {

packages/angular-cli/commands/serve.ts

@@ -26,6 +26,7 @@ export interface ServeTaskOptions {
   sslKey?: string;
   sslCert?: string;
   aot?: boolean;
+  sourcemap?: boolean;
   open?: boolean;
 }
 
@@ -81,6 +82,7 @@ const ServeCommand = Command.extend({
     { name: 'ssl-key',              type: String,  default: 'ssl/server.key' },
     { name: 'ssl-cert',             type: String,  default: 'ssl/server.crt' },
     { name: 'aot',                  type: Boolean, default: false },
+    { name: 'sourcemap',            type: Boolean, default: true, aliases: ['sm'] },
     {
       name: 'open',
       type: Boolean,

packages/angular-cli/commands/test.ts

@@ -2,6 +2,21 @@ const TestCommand = require('../ember-cli/lib/commands/test');
 import TestTask from '../tasks/test';
 import {CliConfig} from '../models/config';
 
+export interface TestOptions {
+  watch?: boolean;
+  codeCoverage?: boolean;
+  lint?: boolean;
+  singleRun?: boolean;
+  browsers?: string;
+  colors?: boolean;
+  log?: string;
+  port?: number;
+  reporters?: string;
+  build?: boolean;
+  sourcemap?: boolean;
+}
+
+
 const NgCliTestCommand = TestCommand.extend({
   availableOptions: [
     { name: 'watch', type: Boolean, default: true, aliases: ['w'] },
@@ -13,10 +28,11 @@ const NgCliTestCommand = TestCommand.extend({
     { name: 'log-level', type: String },
     { name: 'port', type: Number },
     { name: 'reporters', type: String },
-    { name: 'build', type: Boolean, default: true }
+    { name: 'build', type: Boolean, default: true },
+    { name: 'sourcemap', type: Boolean, default: true, aliases: ['sm'] }
   ],
 
-  run: function(commandOptions: any) {
+  run: function(commandOptions: TestOptions) {
     this.project.ngConfig = this.project.ngConfig || CliConfig.fromProject();
 
     const testTask = new TestTask({

packages/angular-cli/models/webpack-build-common.ts

@@ -11,7 +11,8 @@ export function getWebpackCommonConfig(
   projectRoot: string,
   environment: string,
   appConfig: any,
-  baseHref: string
+  baseHref: string,
+  sourcemap: boolean
 ) {
 
   const appRoot = path.resolve(projectRoot, appConfig.root);
@@ -32,7 +33,7 @@ export function getWebpackCommonConfig(
   if (appConfig.scripts.length > 0) { entry['scripts'] = scripts; }
 
   return {
-    devtool: 'source-map',
+    devtool: sourcemap ? 'source-map' : 'eval',
     resolve: {
       extensions: ['.ts', '.js'],
       modules: [path.resolve(projectRoot, 'node_modules')]
@@ -41,7 +42,9 @@ export function getWebpackCommonConfig(
     entry: entry,
     output: {
       path: path.resolve(projectRoot, appConfig.outDir),
-      filename: '[name].bundle.js'
+      filename: '[name].bundle.js',
+      sourceMapFilename: '[name].bundle.map',
+      chunkFilename: '[id].chunk.js'
     },
     module: {
       rules: [

packages/angular-cli/models/webpack-build-development.ts

@@ -7,11 +7,10 @@ export const getWebpackDevConfigPartial = function(projectRoot: string, appConfi
                : [];
   const cssLoaders = ['style-loader', 'css-loader?sourcemap', 'postcss-loader'];
   return {
-    devtool: 'source-map',
     output: {
       path: path.resolve(projectRoot, appConfig.outDir),
       filename: '[name].bundle.js',
-      sourceMapFilename: '[name].map',
+      sourceMapFilename: '[name].bundle.map',
       chunkFilename: '[id].chunk.js'
     },
     module: {

packages/angular-cli/models/webpack-build-production.ts

@@ -21,7 +21,6 @@ export const getWebpackProdConfigPartial = function(projectRoot: string, appConf
                : [];
   const cssLoaders = ['css-loader?sourcemap&minimize', 'postcss-loader'];
   return {
-    devtool: 'source-map',
     output: {
       path: path.resolve(projectRoot, appConfig.outDir),
       publicPath: '/static/dist/',

packages/angular-cli/models/webpack-build-test.js

@@ -43,7 +43,7 @@ const getWebpackTestConfig = function (projectRoot, environment, appConfig, test
   }
 
   return {
-    devtool: 'inline-source-map',
+    devtool: testConfig.sourcemap ? 'inline-source-map' : 'eval',
     context: path.resolve(__dirname, './'),
     resolve: {
       extensions: ['.ts', '.js'],

packages/angular-cli/models/webpack-config.ts

@@ -23,7 +23,8 @@ export class NgCliWebpackConfig {
     public environment: string,
     outputDir?: string,
     baseHref?: string,
-    isAoT = false
+    isAoT = false,
+    sourcemap = true,
   ) {
     const config: CliConfig = CliConfig.fromProject();
     const appConfig = config.config.apps[0];
@@ -34,7 +35,8 @@ export class NgCliWebpackConfig {
       this.ngCliProject.root,
       environment,
       appConfig,
-      baseHref
+      baseHref,
+      sourcemap
     );
     let targetConfigPartial = this.getTargetConfig(this.ngCliProject.root, appConfig);
     const typescriptConfigPartial = isAoT

packages/angular-cli/plugins/karma.js

@@ -12,7 +12,8 @@ const init = (config) => {
   const environment = config.angularCli.environment || 'dev';
   const testConfig = {
     codeCoverage: config.angularCli.codeCoverage || false,
-    lint: config.angularCli.lint || false
+    lint: config.angularCli.lint || false,
+    sourcemap: config.angularCli.sourcemap
   }
 
   // add webpack config

packages/angular-cli/tasks/build-webpack-watch.ts

@@ -24,7 +24,8 @@ export default Task.extend({
       runTaskOptions.environment,
       outputDir,
       runTaskOptions.baseHref,
-      runTaskOptions.aot
+      runTaskOptions.aot,
+      runTaskOptions.sourcemap
     ).config;
     const webpackCompiler: any = webpack(config);
 

packages/angular-cli/tasks/build-webpack.ts

@@ -23,7 +23,8 @@ export default <any>Task.extend({
       runTaskOptions.environment,
       outputDir,
       runTaskOptions.baseHref,
-      runTaskOptions.aot
+      runTaskOptions.aot,
+      runTaskOptions.sourcemap
     ).config;
 
     const webpackCompiler: any = webpack(config);

packages/angular-cli/tasks/serve-webpack.ts

@@ -26,7 +26,8 @@ export default Task.extend({
       commandOptions.environment,
       undefined,
       undefined,
-      commandOptions.aot
+      commandOptions.aot,
+      commandOptions.sourcemap
     ).config;
 
     // This allows for live reload of page when changes are made to repo.

packages/angular-cli/tasks/test.ts

@@ -1,4 +1,5 @@
 const Task = require('../ember-cli/lib/models/task');
+import { TestOptions } from '../commands/test';
 import * as path from 'path';
 
 // require dependencies within the target project
@@ -9,27 +10,30 @@ function requireDependency(root: string, moduleName: string) {
 }
 
 export default Task.extend({
-  run: function (options: any) {
+  run: function (options: TestOptions) {
     const projectRoot = this.project.root;
     return new Promise((resolve) => {
       const karma = requireDependency(projectRoot, 'karma');
       const karmaConfig = path.join(projectRoot, this.project.ngConfig.config.test.karma.config);
 
+      let karmaOptions: any = Object.assign({}, options);
+
       // Convert browsers from a string to an array
       if (options.browsers) {
-        options.browsers = options.browsers.split(',');
+        karmaOptions.browsers = options.browsers.split(',');
       }
 
-      options.angularCli = {
+      karmaOptions.angularCli = {
         codeCoverage: options.codeCoverage,
         lint: options.lint,
+        sourcemap: options.sourcemap
       };
 
       // Assign additional karmaConfig options to the local ngapp config
-      options.configFile = karmaConfig;
+      karmaOptions.configFile = karmaConfig;
 
       // :shipit:
-      const karmaServer = new karma.Server(options, resolve);
+      const karmaServer = new karma.Server(karmaOptions, resolve);
       karmaServer.start();
     });
   }

tests/e2e/tests/build/sourcemap.ts

@@ -0,0 +1,11 @@
+import {ng} from '../../utils/process';
+import {expectFileToExist} from '../../utils/fs';
+import {expectToFail} from '../../utils/utils';
+
+
+export default function() {
+  return ng('build')
+    .then(() => expectFileToExist('dist/main.bundle.map'))
+    .then(() => ng('build', '--no-sourcemap'))
+    .then(() => expectToFail(() => expectFileToExist('dist/main.bundle.map')));
+}