refactor(@angular-devkit/build-angular): support ES5 target with ES2015 APF

Author: clydin

package.json

@@ -80,9 +80,11 @@
     "@angular/platform-server": "9.1.4",
     "@angular/router": "9.1.4",
     "@angular/service-worker": "9.1.4",
-    "@babel/core": "7.9.0",
-    "@babel/generator": "7.9.4",
-    "@babel/preset-env": "7.9.0",
+    "@babel/core": "7.9.6",
+    "@babel/generator": "7.9.6",
+    "@babel/plugin-transform-runtime": "7.9.6",
+    "@babel/preset-env": "7.9.6",
+    "@babel/runtime": "7.9.6",
     "@babel/template": "7.8.6",
     "@bazel/bazel": "2.1.0",
     "@bazel/buildifier": "3.0.0",

packages/angular_devkit/build_angular/BUILD.bazel

@@ -97,7 +97,9 @@ ts_library(
         "@npm//@angular/localize",
         "@npm//@angular/service-worker",
         "@npm//@babel/core",
+        "@npm//@babel/plugin-transform-runtime",
         "@npm//@babel/preset-env",
+        "@npm//@babel/runtime",
         "@npm//@babel/template",
         "@npm//@jsdevtools/coverage-istanbul-loader",
         "@npm//@types/babel__core",

packages/angular_devkit/build_angular/package.json

@@ -11,9 +11,11 @@
     "@angular-devkit/build-optimizer": "0.0.0",
     "@angular-devkit/build-webpack": "0.0.0",
     "@angular-devkit/core": "0.0.0",
-    "@babel/core": "7.9.0",
-    "@babel/generator": "7.9.4",
-    "@babel/preset-env": "7.9.0",
+    "@babel/core": "7.9.6",
+    "@babel/generator": "7.9.6",
+    "@babel/plugin-transform-runtime": "7.9.6",  
+    "@babel/preset-env": "7.9.6",
+    "@babel/runtime": "7.9.6",
     "@babel/template": "7.8.6",
     "@jsdevtools/coverage-istanbul-loader": "3.0.3",
     "@ngtools/webpack": "0.0.0",

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

@@ -67,10 +67,7 @@ export function getBrowserConfig(wco: WebpackConfigOptions): webpack.Configurati
   return {
     devtool: false,
     resolve: {
-      mainFields: [
-        ...(wco.supportES2015 ? ['es2015'] : []),
-        'browser', 'module', 'main',
-      ],
+      mainFields: ['es2015', 'browser', 'module', 'main'],
     },
     output: {
       crossOriginLoading,

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

@@ -23,6 +23,7 @@ import {
   HashedModuleIdsPlugin,
   Plugin,
   Rule,
+  RuleSetLoader,
   compilation,
   debug,
 } from 'webpack';
@@ -330,17 +331,15 @@ export function getCommonConfig(wco: WebpackConfigOptions): Configuration {
     };
   }
 
-  let buildOptimizerUseRule;
+  let buildOptimizerUseRule: RuleSetLoader[] = [];
   if (buildOptions.buildOptimizer) {
     extraPlugins.push(new BuildOptimizerWebpackPlugin());
-    buildOptimizerUseRule = {
-      use: [
-        {
-          loader: buildOptimizerLoaderPath,
-          options: { sourceMap: scriptsSourceMap },
-        },
-      ],
-    };
+    buildOptimizerUseRule = [
+      {
+        loader: buildOptimizerLoaderPath,
+        options: { sourceMap: scriptsSourceMap },
+      },
+    ];
   }
 
   // Allow loaders to be in a node_modules nested inside the devkit/build-angular package.
@@ -519,13 +518,55 @@ export function getCommonConfig(wco: WebpackConfigOptions): Configuration {
           parser: { system: true },
         },
         {
-          test: /\.js$/,
-          // Factory files are processed by BO in the rules added in typescript.ts.
-          exclude: /(ngfactory|ngstyle)\.js$/,
-          ...buildOptimizerUseRule,
+          test: /\.m?js$/,
+          exclude: [/[\/\\](?:core-js|\@babel|tslib)[\/\\]/, /(ngfactory|ngstyle)\.js$/],
+          use: [
+            ...(wco.supportES2015
+              ? []
+              : [
+                  {
+                    loader: require.resolve('babel-loader'),
+                    options: {
+                      babelrc: false,
+                      configFile: false,
+                      compact: false,
+                      cacheCompression: false,
+                      cacheDirectory: findCachePath('babel-webpack'),
+                      cacheIdentifier: JSON.stringify({
+                        buildAngular: require('../../../../package.json').version,
+                      }),
+                      presets: [
+                        [
+                          require.resolve('@babel/preset-env'),
+                          {
+                            bugfixes: true,
+                            modules: false,
+                            // Comparable behavior to tsconfig target of ES5
+                            targets: { ie: 9 },
+                            exclude: ['transform-typeof-symbol'],
+                          },
+                        ],
+                      ],
+                      plugins: [
+                        [
+                          require('@babel/plugin-transform-runtime').default,
+                          {
+                            useESModules: true,
+                            version: require('@babel/runtime/package.json').version,
+                            absoluteRuntime: path.dirname(
+                              require.resolve('@babel/runtime/package.json'),
+                            ),
+                          },
+                        ],
+                      ],
+                    },
+                  },
+                ]),
+            ...buildOptimizerUseRule,
+          ],
         },
         {
-          test: /\.js$/,
+          test: /\.m?js$/,
           exclude: /(ngfactory|ngstyle)\.js$/,
           enforce: 'pre',
           ...sourceMapUseRule,
@@ -535,10 +576,7 @@ export function getCommonConfig(wco: WebpackConfigOptions): Configuration {
     },
     optimization: {
       noEmitOnErrors: true,
-      minimizer: [
-        new HashedModuleIdsPlugin(),
-        ...extraMinimizers,
-      ],
+      minimizer: [new HashedModuleIdsPlugin(), ...extraMinimizers],
     },
     plugins: [
       // Always replace the context for the System.import in angular/core to prevent warnings.

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

@@ -31,7 +31,7 @@ export function getServerConfig(wco: WebpackConfigOptions): Configuration {
 
   const config: Configuration = {
     resolve: {
-      mainFields: [...(wco.supportES2015 ? ['es2015'] : []), 'main', 'module'],
+      mainFields: ['es2015', 'main', 'module'],
     },
     target: 'node',
     output: {

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

@@ -62,10 +62,7 @@ export function getTestConfig(
   return {
     mode: 'development',
     resolve: {
-      mainFields: [
-        ...(wco.supportES2015 ? ['es2015'] : []),
-        'browser', 'module', 'main',
-      ],
+      mainFields: ['es2015', 'browser', 'module', 'main'],
     },
     devtool: buildOptions.sourceMap ? false : 'eval',
     entry: {