refactor(@angular-devkit/build-angular): extract webpack configurations from browser builder

Author: alan-agius4

packages/angular_devkit/build_angular/src/browser/index.ts

@@ -25,7 +25,6 @@ import {
   urlJoin,
 } from '../utils';
 import { BundleActionExecutor } from '../utils/action-executor';
-import { WebpackConfigOptions } from '../utils/build-options';
 import { ThresholdSeverity, checkBudgets } from '../utils/bundle-calculator';
 import { findCachePath } from '../utils/cache-path';
 import { colors } from '../utils/color';
@@ -53,14 +52,14 @@ import {
   getIndexOutputFile,
 } from '../utils/webpack-browser-config';
 import {
+  getAnalyticsConfig,
   getBrowserConfig,
   getCommonConfig,
   getStatsConfig,
   getStylesConfig,
   getTypeScriptConfig,
   getWorkerConfig,
 } from '../webpack/configs';
-import { NgBuildAnalyticsPlugin } from '../webpack/plugins/analytics';
 import { markAsyncChunksNonInitial } from '../webpack/utils/async-chunks';
 import { normalizeExtraEntryPoints } from '../webpack/utils/helpers';
 import {
@@ -90,43 +89,6 @@ export type BrowserBuilderOutput = json.JsonObject &
     outputPath: string;
   };
 
-export function getAnalyticsConfig(
-  wco: WebpackConfigOptions,
-  context: BuilderContext,
-): webpack.Configuration {
-  if (context.analytics) {
-    // If there's analytics, add our plugin. Otherwise no need to slow down the build.
-    let category = 'build';
-    if (context.builder) {
-      // We already vetted that this is a "safe" package, otherwise the analytics would be noop.
-      category =
-        context.builder.builderName.split(':')[1] || context.builder.builderName || 'build';
-    }
-
-    // The category is the builder name if it's an angular builder.
-    return {
-      plugins: [
-        new NgBuildAnalyticsPlugin(
-          wco.projectRoot,
-          context.analytics,
-          category,
-          !!wco.tsConfig.options.enableIvy,
-        ),
-      ],
-    };
-  }
-
-  return {};
-}
-
-export function getCompilerConfig(wco: WebpackConfigOptions): webpack.Configuration {
-  if (wco.buildOptions.main || wco.buildOptions.polyfills) {
-    return getTypeScriptConfig(wco);
-  }
-
-  return {};
-}
-
 async function initialize(
   options: BrowserBuilderSchema,
   context: BuilderContext,
@@ -153,7 +115,7 @@ async function initialize(
         getStylesConfig(wco),
         getStatsConfig(wco),
         getAnalyticsConfig(wco, context),
-        getCompilerConfig(wco),
+        getTypeScriptConfig(wco),
         wco.buildOptions.webWorkerTsConfig ? getWorkerConfig(wco) : {},
       ],
       { differentialLoadingNeeded },

packages/angular_devkit/build_angular/src/dev-server/index.ts

@@ -20,7 +20,6 @@ import * as ts from 'typescript';
 import * as url from 'url';
 import * as webpack from 'webpack';
 import * as webpackDevServer from 'webpack-dev-server';
-import { getAnalyticsConfig, getCompilerConfig } from '../browser';
 import { Schema as BrowserBuilderSchema, OutputHashing } from '../browser/schema';
 import { ExecutionTransformer } from '../transforms';
 import { BuildBrowserFeatures, normalizeOptimization } from '../utils';
@@ -38,11 +37,13 @@ import {
   getIndexOutputFile,
 } from '../utils/webpack-browser-config';
 import {
+  getAnalyticsConfig,
   getBrowserConfig,
   getCommonConfig,
   getDevServerConfig,
   getStatsConfig,
   getStylesConfig,
+  getTypeScriptConfig,
   getWorkerConfig,
 } from '../webpack/configs';
 import { IndexHtmlWebpackPlugin } from '../webpack/plugins/index-html-webpack-plugin';
@@ -219,7 +220,7 @@ export function serveWebpackBrowser(
         getStylesConfig(wco),
         getStatsConfig(wco),
         getAnalyticsConfig(wco, context),
-        getCompilerConfig(wco),
+        getTypeScriptConfig(wco),
         browserOptions.webWorkerTsConfig ? getWorkerConfig(wco) : {},
       ],
       devServerOptions,

packages/angular_devkit/build_angular/src/webpack/configs/analytics.ts

@@ -0,0 +1,40 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import { BuilderContext } from '@angular-devkit/architect';
+import { Configuration } from 'webpack';
+import { WebpackConfigOptions } from '../../utils/build-options';
+import { NgBuildAnalyticsPlugin } from '../plugins/analytics';
+
+export function getAnalyticsConfig(
+  wco: WebpackConfigOptions,
+  context: BuilderContext,
+): Configuration {
+  if (!context.analytics) {
+    return {};
+  }
+
+  // If there's analytics, add our plugin. Otherwise no need to slow down the build.
+  let category = 'build';
+  if (context.builder) {
+    // We already vetted that this is a "safe" package, otherwise the analytics would be noop.
+    category = context.builder.builderName.split(':')[1] || context.builder.builderName || 'build';
+  }
+
+  // The category is the builder name if it's an angular builder.
+  return {
+    plugins: [
+      new NgBuildAnalyticsPlugin(
+        wco.projectRoot,
+        context.analytics,
+        category,
+        !!wco.tsConfig.options.enableIvy,
+      ),
+    ],
+  };
+}

packages/angular_devkit/build_angular/src/webpack/configs/index.ts

@@ -6,6 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
+export * from './analytics';
 export * from './browser';
 export * from './common';
 export * from './dev-server';

packages/angular_devkit/build_angular/src/webpack/configs/typescript.ts

@@ -9,6 +9,7 @@
 import { getSystemPath } from '@angular-devkit/core';
 import { CompilerOptions } from '@angular/compiler-cli';
 import { AngularWebpackLoaderPath, AngularWebpackPlugin } from '@ngtools/webpack';
+import { Configuration } from 'webpack';
 import { WebpackConfigOptions } from '../../utils/build-options';
 
 function ensureIvy(wco: WebpackConfigOptions): void {
@@ -78,23 +79,29 @@ function createIvyPlugin(
   });
 }
 
-export function getTypeScriptConfig(wco: WebpackConfigOptions) {
-  const { buildOptions, tsConfigPath } = wco;
-  const aot = !!buildOptions.aot;
+export function getTypeScriptConfig(wco: WebpackConfigOptions): Configuration {
+  const {
+    buildOptions: { aot = false, main, polyfills },
+    tsConfigPath,
+  } = wco;
 
-  ensureIvy(wco);
+  if (main || polyfills) {
+    ensureIvy(wco);
 
-  return {
-    module: {
-      rules: [
-        {
-          test: /\.[jt]sx?$/,
-          loader: AngularWebpackLoaderPath,
-        },
-      ],
-    },
-    plugins: [createIvyPlugin(wco, aot, tsConfigPath)],
-  };
+    return {
+      module: {
+        rules: [
+          {
+            test: /\.[jt]sx?$/,
+            loader: AngularWebpackLoaderPath,
+          },
+        ],
+      },
+      plugins: [createIvyPlugin(wco, aot, tsConfigPath)],
+    };
+  }
+
+  return {};
 }
 
 export function getTypescriptWorkerPlugin(wco: WebpackConfigOptions, workerTsConfigPath: string) {