fix(@angular/cli): improve rebundling speed

Forcing TypeScript to output commonjs modules instead of es2015 modules drastically improves rebuild speeds, especially for AOT.

This PR forces this option on the following modes:
- `ng build --watch --target=development`
- `ng serve --target=development`
- `ng test --code-coverage=false`

Please note that `--target=development` and `--code-coverage=false` are the defaults.

See webpack/webpack#5863 for the webpack issue.

Author: filipesilva

packages/@angular/cli/commands/build.ts

@@ -220,6 +220,11 @@ const BuildCommand = Command.extend({
       commandOptions.vendorChunk = !commandOptions.buildOptimizer;
     }
 
+    // Force commonjs module format for TS on dev watch builds.
+    if (commandOptions.target === 'development' && commandOptions.watch === true) {
+      commandOptions.forceTsCommonjs = true;
+    }
+
     const BuildTask = require('../tasks/build').default;
 
     const buildTask = new BuildTask({

packages/@angular/cli/commands/serve.ts

@@ -135,6 +135,11 @@ const ServeCommand = Command.extend({
       commandOptions.vendorChunk = !commandOptions.buildOptimizer;
     }
 
+    // Force commonjs module format for TS on dev builds.
+    if (commandOptions.target === 'development') {
+      commandOptions.forceTsCommonjs = true;
+    }
+
     // Default evalSourcemaps to true for serve. This makes rebuilds faster.
     commandOptions.evalSourcemaps = true;
 

packages/@angular/cli/commands/test.ts

@@ -24,6 +24,7 @@ export interface TestOptions {
   environment?: string;
   app?: string;
   preserveSymlinks?: boolean;
+  forceTsCommonjs?: boolean;
 }
 
 
@@ -134,6 +135,13 @@ const TestCommand = Command.extend({
       // if not watching ensure karma is doing a single run
       commandOptions.singleRun = true;
     }
+
+    // Don't force commonjs for code coverage builds, some setups need es2015 for it.
+    // https://github.com/angular/angular-cli/issues/5526
+    if (!commandOptions.codeCoverage) {
+      commandOptions.forceTsCommonjs = true;
+    }
+
     return testTask.run(commandOptions);
   }
 });

packages/@angular/cli/models/build-options.ts

@@ -30,4 +30,5 @@ export interface BuildOptions {
   buildOptimizer?: boolean;
   namedChunks?: boolean;
   subresourceIntegrity?: boolean;
+  forceTsCommonjs?: boolean;
 }

packages/@angular/cli/models/webpack-configs/typescript.ts

@@ -21,10 +21,17 @@ const webpackLoader: string = g['angularCliIsLocal']
 function _createAotPlugin(wco: WebpackConfigOptions, options: any) {
   const { appConfig, projectRoot, buildOptions } = wco;
   options.compilerOptions = options.compilerOptions || {};
+
   if (wco.buildOptions.preserveSymlinks) {
     options.compilerOptions.preserveSymlinks = true;
   }
 
+  // Forcing commonjs seems to drastically improve rebuild speeds on webpack.
+  // Dev builds on watch mode will set this option to true.
+  if (wco.buildOptions.forceTsCommonjs) {
+    options.compilerOptions.module = 'commonjs';
+  }
+
   // Read the environment, and set it in the compiler host.
   let hostReplacementPaths: any = {};
   // process environment file replacement

packages/@angular/cli/tasks/test.ts

@@ -44,6 +44,7 @@ export default Task.extend({
         poll: options.poll,
         environment: options.environment,
         preserveSymlinks: options.preserveSymlinks,
+        forceTsCommonjs: options.forceTsCommonjs,
         app: options.app
       };