refactor(@angular-devkit/build-angular): clean up differential loading config generation

Closes #16098

Author: alan-agius4

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

@@ -7,7 +7,7 @@
  */
 import { BuilderContext, BuilderOutput, createBuilder } from '@angular-devkit/architect';
 import { EmittedFiles, WebpackLoggingCallback, runWebpack } from '@angular-devkit/build-webpack';
-import { join, json, normalize, tags, virtualFs } from '@angular-devkit/core';
+import { getSystemPath, join, json, normalize, resolve, tags, virtualFs } from '@angular-devkit/core';
 import { NodeJsSyncHost } from '@angular-devkit/core/node';
 import * as fs from 'fs';
 import * as ora from 'ora';
@@ -50,7 +50,6 @@ import { augmentAppWithServiceWorker } from '../utils/service-worker';
 import { assertCompatibleAngularVersion } from '../utils/version';
 import {
   BrowserWebpackConfigOptions,
-  generateBrowserWebpackConfigFromContext,
   generateI18nBrowserWebpackConfigFromContext,
   getIndexInputFile,
   getIndexOutputFile,
@@ -97,25 +96,15 @@ interface ConfigFromContextReturn {
   config: webpack.Configuration;
   projectRoot: string;
   projectSourceRoot?: string;
+  i18n: I18nOptions;
 }
 
-export async function buildBrowserWebpackConfigFromContext(
-  options: BrowserBuilderSchema,
-  context: BuilderContext,
-  host: virtualFs.Host<fs.Stats>,
-  i18n: boolean,
-): Promise<ConfigFromContextReturn & { i18n: I18nOptions }>;
-export async function buildBrowserWebpackConfigFromContext(
-  options: BrowserBuilderSchema,
-  context: BuilderContext,
-  host?: virtualFs.Host<fs.Stats>,
-): Promise<ConfigFromContextReturn>;
 export async function buildBrowserWebpackConfigFromContext(
   options: BrowserBuilderSchema,
   context: BuilderContext,
   host: virtualFs.Host<fs.Stats> = new NodeJsSyncHost(),
-  i18n = false,
-): Promise<ConfigFromContextReturn & { i18n?: I18nOptions }> {
+  differentialLoadingMode = false,
+): Promise<ConfigFromContextReturn> {
   const webpackPartialGenerator = (wco: BrowserWebpackConfigOptions) => [
     getCommonConfig(wco),
     getBrowserConfig(wco),
@@ -126,16 +115,13 @@ export async function buildBrowserWebpackConfigFromContext(
     wco.buildOptions.webWorkerTsConfig ? getWorkerConfig(wco) : {},
   ];
 
-  if (i18n) {
-    return generateI18nBrowserWebpackConfigFromContext(
-      options,
-      context,
-      webpackPartialGenerator,
-      host,
-    );
-  }
-
-  return generateBrowserWebpackConfigFromContext(options, context, webpackPartialGenerator, host);
+  return generateI18nBrowserWebpackConfigFromContext(
+    options,
+    context,
+    webpackPartialGenerator,
+    host,
+    differentialLoadingMode,
+  );
 }
 
 function getAnalyticsConfig(
@@ -177,6 +163,7 @@ async function initialize(
   options: BrowserBuilderSchema,
   context: BuilderContext,
   host: virtualFs.Host<fs.Stats>,
+  differentialLoadingMode: boolean,
   webpackConfigurationTransform?: ExecutionTransformer<webpack.Configuration>,
 ): Promise<{
   config: webpack.Configuration;
@@ -194,7 +181,7 @@ async function initialize(
     projectRoot,
     projectSourceRoot,
     i18n,
-  } = await buildBrowserWebpackConfigFromContext(adjustedOptions, context, host, true);
+  } = await buildBrowserWebpackConfigFromContext(adjustedOptions, context, host, differentialLoadingMode);
 
   // Validate asset option values if processed directly
   if (options.assets?.length && !adjustedOptions.assets?.length) {
@@ -235,39 +222,60 @@ export function buildWebpackBrowser(
 ): Observable<BrowserBuilderOutput> {
   const host = new NodeJsSyncHost();
   const root = normalize(context.workspaceRoot);
+
+  const projectName = context.target && context.target.project;
+  if (!projectName) {
+    throw new Error('The builder requires a target.');
+  }
+
   const baseOutputPath = path.resolve(context.workspaceRoot, options.outputPath);
   let outputPaths: undefined | Map<string, string>;
 
   // Check Angular version.
   assertCompatibleAngularVersion(context.workspaceRoot, context.logger);
 
-  return from(initialize(options, context, host, transforms.webpackConfiguration)).pipe(
-    // tslint:disable-next-line: no-big-function
-    switchMap(({ config, projectRoot, projectSourceRoot, i18n }) => {
-      const tsConfig = readTsconfig(options.tsConfig, context.workspaceRoot);
-      const target = tsConfig.options.target || ScriptTarget.ES5;
-      const buildBrowserFeatures = new BuildBrowserFeatures(projectRoot, target);
-      const isDifferentialLoadingNeeded = buildBrowserFeatures.isDifferentialLoadingNeeded();
-
-      if (target > ScriptTarget.ES2015 && isDifferentialLoadingNeeded) {
-        context.logger.warn(tags.stripIndent`
+  return from(context.getProjectMetadata(projectName))
+    .pipe(
+      switchMap(async projectMetadata => {
+        const sysProjectRoot = getSystemPath(
+          resolve(normalize(context.workspaceRoot),
+          normalize((projectMetadata.root as string) ?? '')),
+        );
+
+        const { options: compilerOptions } = readTsconfig(options.tsConfig, context.workspaceRoot);
+        const target = compilerOptions.target || ScriptTarget.ES5;
+        const buildBrowserFeatures = new BuildBrowserFeatures(sysProjectRoot);
+        const isDifferentialLoadingNeeded = buildBrowserFeatures.isDifferentialLoadingNeeded(target);
+        const differentialLoadingMode = !options.watch && isDifferentialLoadingNeeded;
+
+        if (target > ScriptTarget.ES2015 && isDifferentialLoadingNeeded) {
+          context.logger.warn(tags.stripIndent`
           WARNING: Using differential loading with targets ES5 and ES2016 or higher may
           cause problems. Browsers with support for ES2015 will load the ES2016+ scripts
           referenced with script[type="module"] but they may not support ES2016+ syntax.
         `);
-      }
-
-      const useBundleDownleveling = isDifferentialLoadingNeeded && !options.watch;
-      const startTime = Date.now();
-
-      return runWebpack(config, context, {
-        webpackFactory: require('webpack') as typeof webpack,
-        logging:
-          transforms.logging ||
-          (useBundleDownleveling
-            ? () => {}
-            : createWebpackLoggingCallback(!!options.verbose, context.logger)),
-      }).pipe(
+        }
+
+        return {
+          ...(await initialize(options, context, host, differentialLoadingMode, transforms.webpackConfiguration)),
+          buildBrowserFeatures,
+          isDifferentialLoadingNeeded,
+          target,
+        };
+      }),
+      // tslint:disable-next-line: no-big-function
+      switchMap(({ config, projectRoot, projectSourceRoot, i18n, buildBrowserFeatures, isDifferentialLoadingNeeded, target }) => {
+        const useBundleDownleveling = isDifferentialLoadingNeeded && !options.watch;
+        const startTime = Date.now();
+
+        return runWebpack(config, context, {
+          webpackFactory: require('webpack') as typeof webpack,
+          logging:
+            transforms.logging ||
+            (useBundleDownleveling
+              ? () => { }
+              : createWebpackLoggingCallback(!!options.verbose, context.logger)),
+        }).pipe(
         // tslint:disable-next-line: no-big-function
         concatMap(async buildEvent => {
           const { webpackStats: webpackRawStats, success, emittedFiles = [] } = buildEvent;

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

@@ -120,7 +120,6 @@ export function serveWebpackBrowser(
       browserOptions,
       context,
       host,
-      true,
     );
     let webpackConfig = config;
 
@@ -194,10 +193,10 @@ export function serveWebpackBrowser(
         const { scripts = [], styles = [], baseHref, tsConfig } = browserOptions;
         const { options: compilerOptions } = readTsconfig(tsConfig, context.workspaceRoot);
         const target = compilerOptions.target || ts.ScriptTarget.ES5;
-        const buildBrowserFeatures = new BuildBrowserFeatures(projectRoot, target);
+        const buildBrowserFeatures = new BuildBrowserFeatures(projectRoot);
 
         const entrypoints = generateEntryPoints({ scripts, styles });
-        const moduleEntrypoints = buildBrowserFeatures.isDifferentialLoadingNeeded()
+        const moduleEntrypoints = buildBrowserFeatures.isDifferentialLoadingNeeded(target)
           ? generateEntryPoints({ scripts: [], styles })
           : [];
 

packages/angular_devkit/build_angular/src/utils/webpack-browser-config.ts

@@ -27,7 +27,6 @@ import {
 import { WebpackConfigOptions } from '../utils/build-options';
 import { readTsconfig } from '../utils/read-tsconfig';
 import { getEsVersionForFileName } from '../webpack/utils/helpers';
-import { BuildBrowserFeatures } from './build-browser-features';
 import { profilingEnabled } from './environment-options';
 import { I18nOptions, configureI18nBuild } from './i18n-options';
 
@@ -36,13 +35,13 @@ const SpeedMeasurePlugin = require('speed-measure-webpack-plugin');
 export type BrowserWebpackConfigOptions = WebpackConfigOptions<NormalizedBrowserBuilderSchema>;
 
 export async function generateWebpackConfig(
-  context: BuilderContext,
   workspaceRoot: string,
   projectRoot: string,
   sourceRoot: string | undefined,
   options: NormalizedBrowserBuilderSchema,
   webpackPartialGenerator: (wco: BrowserWebpackConfigOptions) => webpack.Configuration[],
   logger: logging.LoggerApi,
+  differentialLoadingMode: boolean,
 ): Promise<webpack.Configuration> {
   // Ensure Build Optimizer is only used with AOT.
   if (options.buildOptimizer && !options.aot) {
@@ -66,27 +65,11 @@ export async function generateWebpackConfig(
 
   // tslint:disable-next-line:no-implicit-dependencies
   const ts = await import('typescript');
-
-  // At the moment, only the browser builder supports differential loading
-  // However this config generation is used by multiple builders such as dev-server
   const scriptTarget = tsConfig.options.target || ts.ScriptTarget.ES5;
-  const buildBrowserFeatures = new BuildBrowserFeatures(projectRoot, scriptTarget);
-  const differentialLoading =
-    context.builder.builderName === 'browser' &&
-    !options.watch &&
-    buildBrowserFeatures.isDifferentialLoadingNeeded();
-
-  let buildOptions: NormalizedBrowserBuilderSchema = { ...options };
-  if (differentialLoading) {
-    buildOptions = {
-      ...options,
-      // Under downlevel differential loading we copy the assets outside of webpack.
-      assets: [],
-      esVersionInFileName: true,
-    };
-  }
 
   const supportES2015 = scriptTarget !== ts.ScriptTarget.JSON && scriptTarget > ts.ScriptTarget.ES5;
+
+  const buildOptions: NormalizedBrowserBuilderSchema = { ...options };
   const wco: BrowserWebpackConfigOptions = {
     root: workspaceRoot,
     logger: logger.createChild('webpackConfigOptions'),
@@ -96,7 +79,7 @@ export async function generateWebpackConfig(
     tsConfig,
     tsConfigPath,
     supportES2015,
-    differentialLoadingMode: differentialLoading,
+    differentialLoadingMode,
   };
 
   wco.buildOptions.progress = defaultProgress(wco.buildOptions.progress);
@@ -123,7 +106,7 @@ export async function generateWebpackConfig(
   if (profilingEnabled) {
     const esVersionInFileName = getEsVersionForFileName(
       tsConfig.options.target,
-      wco.buildOptions.esVersionInFileName,
+      wco.differentialLoadingMode,
     );
 
     const smp = new SpeedMeasurePlugin({
@@ -145,9 +128,16 @@ export async function generateI18nBrowserWebpackConfigFromContext(
   context: BuilderContext,
   webpackPartialGenerator: (wco: BrowserWebpackConfigOptions) => webpack.Configuration[],
   host: virtualFs.Host<fs.Stats> = new NodeJsSyncHost(),
+  differentialLoadingMode = false,
 ): Promise<{ config: webpack.Configuration; projectRoot: string; projectSourceRoot?: string, i18n: I18nOptions }> {
   const { buildOptions, i18n } = await configureI18nBuild(context, options);
-  const result = await generateBrowserWebpackConfigFromContext(buildOptions, context, webpackPartialGenerator, host);
+  const result = await generateBrowserWebpackConfigFromContext(
+    buildOptions,
+    context,
+    webpackPartialGenerator,
+    host,
+    differentialLoadingMode,
+  );
   const config = result.config;
 
   if (i18n.shouldInline) {
@@ -208,6 +198,7 @@ export async function generateBrowserWebpackConfigFromContext(
   context: BuilderContext,
   webpackPartialGenerator: (wco: BrowserWebpackConfigOptions) => webpack.Configuration[],
   host: virtualFs.Host<fs.Stats> = new NodeJsSyncHost(),
+  differentialLoadingMode = false,
 ): Promise<{ config: webpack.Configuration; projectRoot: string; projectSourceRoot?: string }> {
   const projectName = context.target && context.target.project;
   if (!projectName) {
@@ -231,13 +222,13 @@ export async function generateBrowserWebpackConfigFromContext(
   );
 
   const config = await generateWebpackConfig(
-    context,
     getSystemPath(workspaceRoot),
     getSystemPath(projectRoot),
     sourceRoot && getSystemPath(sourceRoot),
     normalizedOptions,
     webpackPartialGenerator,
     context.logger,
+    differentialLoadingMode,
   );
 
   return {