refactor(@angular-devkit/build-angular): support async partial Webpack configuration generators

Partial Webpack configuration generators are used to create the various aspects of the final Webpack configuration for build, testing, and serving. They previously could only be synchronous but may need to perform asynchronous actions to setup the Webpack configuration in the future. This is particularly relevant as the CLI transitions from CommonJS to ESM wherein synchronous require calls need to be replaced with asynchronous dynamic imports. For dynamic imports to be successfully used the configuration generators need to support asynchronous operations.

Author: clydin

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

@@ -21,12 +21,16 @@ import { I18nOptions, configureI18nBuild } from './i18n-options';
 
 export type BrowserWebpackConfigOptions = WebpackConfigOptions<NormalizedBrowserBuilderSchema>;
 
+export type WebpackPartialGenerator = (
+  configurationOptions: BrowserWebpackConfigOptions,
+) => (Promise<Configuration> | Configuration)[];
+
 export async function generateWebpackConfig(
   workspaceRoot: string,
   projectRoot: string,
   sourceRoot: string | undefined,
   options: NormalizedBrowserBuilderSchema,
-  webpackPartialGenerator: (wco: BrowserWebpackConfigOptions) => Configuration[],
+  webpackPartialGenerator: WebpackPartialGenerator,
   logger: logging.LoggerApi,
   extraBuildOptions: Partial<NormalizedBrowserBuilderSchema>,
 ): Promise<Configuration> {
@@ -55,15 +59,16 @@ export async function generateWebpackConfig(
 
   wco.buildOptions.progress = defaultProgress(wco.buildOptions.progress);
 
-  const webpackConfig = webpackMerge(webpackPartialGenerator(wco));
+  const partials = await Promise.all(webpackPartialGenerator(wco));
+  const webpackConfig = webpackMerge(partials);
 
   return webpackConfig;
 }
 
 export async function generateI18nBrowserWebpackConfigFromContext(
   options: BrowserBuilderSchema,
   context: BuilderContext,
-  webpackPartialGenerator: (wco: BrowserWebpackConfigOptions) => Configuration[],
+  webpackPartialGenerator: WebpackPartialGenerator,
   extraBuildOptions: Partial<NormalizedBrowserBuilderSchema> = {},
 ): Promise<{
   config: Configuration;
@@ -131,7 +136,7 @@ export async function generateI18nBrowserWebpackConfigFromContext(
 export async function generateBrowserWebpackConfigFromContext(
   options: BrowserBuilderSchema,
   context: BuilderContext,
-  webpackPartialGenerator: (wco: BrowserWebpackConfigOptions) => Configuration[],
+  webpackPartialGenerator: WebpackPartialGenerator,
   extraBuildOptions: Partial<NormalizedBrowserBuilderSchema> = {},
 ): Promise<{ config: Configuration; projectRoot: string; projectSourceRoot?: string }> {
   const projectName = context.target && context.target.project;