feat(@angular/cli): support ES2015 target

Author: filipesilva

docs/documentation/build.md

@@ -366,3 +366,13 @@ Note: service worker support is experimental and subject to change.
     Use file name for lazy loaded chunks.
   </p>
 </details>
+
+<details>
+  <summary>compilation-target</summary>
+  <p>
+    <code>--compilation-target</code> (aliases: <code>-ct, -es5, -es2015</code>) <em>default value: ES5</em>
+  </p>
+  <p>
+    Defines the compilation target (ES5 or ES2015).
+  </p>
+</details>

package-lock.json

@@ -92,6 +92,7 @@
     "stylus": "^0.54.5",
     "stylus-loader": "^3.0.1",
     "typescript": "~2.4.2",
+    "uglifyjs-webpack-plugin": "1.0.0-beta.1",
     "url-loader": "^0.5.7",
     "webpack": "~3.5.5",
     "webpack-concat-plugin": "1.4.0",

package.json

@@ -9,7 +9,7 @@ const Command = require('../ember-cli/lib/models/command');
 const config = CliConfig.fromProject() || CliConfig.fromGlobal();
 const buildConfigDefaults = config.getPaths('defaults.build', [
   'sourcemaps', 'baseHref', 'progress', 'poll', 'deleteOutputPath', 'preserveSymlinks',
-  'showCircularDependencies', 'commonChunk', 'namedChunks'
+  'showCircularDependencies', 'commonChunk', 'namedChunks', 'compilationTarget'
 ]);
 
 // defaults for BuildOptions
@@ -176,6 +176,18 @@ export const baseBuildCommandOptions: any = [
     aliases: ['nc'],
     description: 'Use file name for lazy loaded chunks.',
     default: buildConfigDefaults['namedChunks']
+  },
+  {
+    name: 'compilation-target',
+    type: String,
+    default: buildConfigDefaults['compilationTarget'],
+    aliases: [
+      'ct',
+      { 'ES5': 'ES5' }, { 'ES2015': 'ES2015' },
+      // Support lowercase in the alias.
+      { 'es5': 'ES5' }, { 'es2015': 'ES2015' },
+    ],
+    description: 'Defines the compilation target (ES5 or ES2015).'
   }
 ];
 

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

@@ -496,6 +496,11 @@
             "namedChunks": {
               "description": "Use file name for lazy loaded chunks.",
               "type": "boolean"
+            },
+            "compilationTarget": {
+              "description": "Defines the compilation target (ES5 or ES2015).",
+              "type": "string",
+              "default": "ES5"
             }
           }
         },

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

@@ -25,4 +25,5 @@ export interface BuildOptions {
   showCircularDependencies?: boolean;
   buildOptimizer?: boolean;
   namedChunks?: boolean;
+  compilationTarget?: 'ES5' | 'ES2015';
 }

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

@@ -74,6 +74,13 @@ export class NgCliWebpackConfig {
       throw new Error("Invalid build target. Only 'development' and 'production' are available.");
     }
 
+    buildOptions.compilationTarget = buildOptions.compilationTarget || 'ES5';
+    buildOptions.compilationTarget =
+      buildOptions.compilationTarget.toUpperCase() as 'ES5' | 'ES2015';
+    if (buildOptions.compilationTarget !== 'ES5' && buildOptions.compilationTarget !== 'ES2015') {
+      throw new Error("Invalid compilation target. Only 'ES5' and 'ES2015' are available.");
+    }
+
     if (buildOptions.buildOptimizer
       && !(buildOptions.aot || buildOptions.target === 'production')) {
       throw new Error('The `--build-optimizer` option cannot be used without `--aot`.');

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

@@ -153,6 +153,10 @@ export function getCommonConfig(wco: WebpackConfigOptions) {
     resolve: {
       extensions: ['.ts', '.js'],
       modules: ['node_modules', nodeModules],
+      mainFields: [
+        ...(buildOptions.compilationTarget === 'ES2015' ? ['es2015'] : []),
+        'browser', 'module', 'main'
+      ],
       symlinks: !buildOptions.preserveSymlinks
     },
     resolveLoader: {

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

@@ -9,12 +9,14 @@ import { StaticAssetPlugin } from '../../plugins/static-asset';
 import { GlobCopyWebpackPlugin } from '../../plugins/glob-copy-webpack-plugin';
 import { WebpackConfigOptions } from '../webpack-config';
 
+const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
+
 
 export const getProdConfig = function (wco: WebpackConfigOptions) {
   const { projectRoot, buildOptions, appConfig } = wco;
 
   let extraPlugins: any[] = [];
-  let entryPoints: {[key: string]: string[]} = {};
+  let entryPoints: { [key: string]: string[] } = {};
 
   if (appConfig.serviceWorker) {
     const nodeModules = path.resolve(projectRoot, 'node_modules');
@@ -66,7 +68,7 @@ export const getProdConfig = function (wco: WebpackConfigOptions) {
     extraPlugins.push(new GlobCopyWebpackPlugin({
       patterns: [
         'ngsw-manifest.json',
-        {glob: 'ngsw-manifest.json', input: path.resolve(projectRoot, appConfig.root), output: ''}
+        { glob: 'ngsw-manifest.json', input: path.resolve(projectRoot, appConfig.root), output: '' }
       ],
       globOptions: {
         cwd: projectRoot,
@@ -99,7 +101,7 @@ export const getProdConfig = function (wco: WebpackConfigOptions) {
     }));
   }
 
-  const uglifyCompressOptions: any = { screw_ie8: true, warnings: buildOptions.verbose };
+  const uglifyCompressOptions: any = {};
 
   if (buildOptions.buildOptimizer) {
     // This plugin must be before webpack.optimize.UglifyJsPlugin.
@@ -110,21 +112,43 @@ export const getProdConfig = function (wco: WebpackConfigOptions) {
     uglifyCompressOptions.passes = 3;
   }
 
+  if (buildOptions.compilationTarget === 'ES2015') {
+    extraPlugins.push(new UglifyJSPlugin({
+      sourceMap: buildOptions.sourcemaps,
+      uglifyOptions: {
+        ecma: 6,
+        warnings: buildOptions.verbose,
+        ie8: false,
+        mangle: true,
+        compress: uglifyCompressOptions,
+        output: {
+          ascii_only: true,
+          comments: false
+        },
+      }
+    }));
+  } else {
+    uglifyCompressOptions.screw_ie8 = true;
+    uglifyCompressOptions.warnings = buildOptions.verbose;
+    extraPlugins.push(new webpack.optimize.UglifyJsPlugin(<any>{
+      mangle: { screw_ie8: true },
+      compress: uglifyCompressOptions,
+      output: { ascii_only: true },
+      sourceMap: buildOptions.sourcemaps,
+      comments: false
+    }));
+
+  }
+
   return {
     entry: entryPoints,
-    plugins: extraPlugins.concat([
+    plugins: [
       new webpack.EnvironmentPlugin({
         'NODE_ENV': 'production'
       }),
       new webpack.HashedModuleIdsPlugin(),
       new webpack.optimize.ModuleConcatenationPlugin(),
-      new webpack.optimize.UglifyJsPlugin(<any>{
-        mangle: { screw_ie8: true },
-        compress: uglifyCompressOptions,
-        output: { ascii_only: true },
-        sourceMap: buildOptions.sourcemaps,
-        comments: false
-      })
-    ])
+      ...extraPlugins
+    ]
   };
 };

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

@@ -63,6 +63,9 @@ function _createAotPlugin(wco: WebpackConfigOptions, options: any) {
     };
   }
 
+  options.compilerOptions = options.compilerOptions || {};
+  options.compilerOptions.target = buildOptions.compilationTarget;
+
   return new AotPlugin(Object.assign({}, {
       mainPath: path.join(projectRoot, appConfig.root, appConfig.main),
       i18nFile: buildOptions.i18nFile,

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

@@ -76,6 +76,7 @@
     "stylus": "^0.54.5",
     "stylus-loader": "^3.0.1",
     "typescript": ">=2.0.0 <2.6.0",
+    "uglifyjs-webpack-plugin": "1.0.0-beta.1",
     "url-loader": "^0.5.7",
     "webpack": "~3.5.5",
     "webpack-concat-plugin": "1.4.0",