@angular-devkit/build-angular 13.0.0-next.3 → 13.0.0-next.7

package/src/webpack/configs/common.js

@@ -30,7 +30,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getCommonConfig = void 0;
-const compiler_cli_1 = require("@angular/compiler-cli");
 const copy_webpack_plugin_1 = __importDefault(require("copy-webpack-plugin"));
 const crypto_1 = require("crypto");
 const fs_1 = require("fs");
@@ -40,21 +39,29 @@ const webpack_1 = require("webpack");
 const utils_1 = require("../../utils");
 const cache_path_1 = require("../../utils/cache-path");
 const environment_options_1 = require("../../utils/environment-options");
+const load_esm_1 = require("../../utils/load-esm");
 const spinner_1 = require("../../utils/spinner");
 const webpack_diagnostics_1 = require("../../utils/webpack-diagnostics");
 const plugins_1 = require("../plugins");
 const javascript_optimizer_plugin_1 = require("../plugins/javascript-optimizer-plugin");
 const helpers_1 = require("../utils/helpers");
 // eslint-disable-next-line max-lines-per-function
-function getCommonConfig(wco) {
+async function getCommonConfig(wco) {
     var _a, _b;
     const { root, projectRoot, buildOptions, tsConfig } = wco;
     const { platform = 'browser', sourceMap: { styles: stylesSourceMap, scripts: scriptsSourceMap, vendor: vendorSourceMap }, optimization: { styles: stylesOptimization, scripts: scriptsOptimization }, } = buildOptions;
     const extraPlugins = [];
     const extraRules = [];
     const entryPoints = {};
+    // Load ESM `@angular/compiler-cli` using the TypeScript dynamic import workaround.
+    // Once TypeScript provides support for keeping the dynamic import this workaround can be
+    // changed to a direct dynamic import.
+    const compilerCliModule = await (0, load_esm_1.loadEsmModule)('@angular/compiler-cli');
+    // If it is not ESM then the values needed will be stored in the `default` property.
+    // TODO_ESM: This can be removed once `@angular/compiler-cli` is ESM only.
+    const { GLOBAL_DEFS_FOR_TERSER, GLOBAL_DEFS_FOR_TERSER_WITH_AOT, VERSION: NG_VERSION, } = (compilerCliModule.GLOBAL_DEFS_FOR_TERSER ? compilerCliModule : compilerCliModule.default);
     // determine hashing format
-    const hashFormat = helpers_1.getOutputHashFormat(buildOptions.outputHashing || 'none');
+    const hashFormat = (0, helpers_1.getOutputHashFormat)(buildOptions.outputHashing || 'none');
     const buildBrowserFeatures = new utils_1.BuildBrowserFeatures(projectRoot);
     if (buildOptions.progress) {
         const spinner = new spinner_1.Spinner();
@@ -108,10 +115,10 @@ function getCommonConfig(wco) {
         }));
     }
     // process global scripts
-    const globalScriptsByBundleName = helpers_1.normalizeExtraEntryPoints(buildOptions.scripts, 'scripts').reduce((prev, curr) => {
+    const globalScriptsByBundleName = (0, helpers_1.normalizeExtraEntryPoints)(buildOptions.scripts, 'scripts').reduce((prev, curr) => {
         const { bundleName, inject, input } = curr;
         let resolvedPath = path.resolve(root, input);
-        if (!fs_1.existsSync(resolvedPath)) {
+        if (!(0, fs_1.existsSync)(resolvedPath)) {
             try {
                 resolvedPath = require.resolve(input, { paths: [root] });
             }
@@ -216,12 +223,12 @@ function getCommonConfig(wco) {
                     try {
                         await fs_1.promises.mkdir(path.dirname(statsOutputPath), { recursive: true });
                         await new Promise((resolve, reject) => stringifyStream(data)
-                            .pipe(fs_1.createWriteStream(statsOutputPath))
+                            .pipe((0, fs_1.createWriteStream)(statsOutputPath))
                             .on('close', resolve)
                             .on('error', reject));
                     }
                     catch (error) {
-                        webpack_diagnostics_1.addError(stats.compilation, `Unable to write stats file: ${error.message || 'unknown error'}`);
+                        (0, webpack_diagnostics_1.addError)(stats.compilation, `Unable to write stats file: ${error.message || 'unknown error'}`);
                     }
                 });
             }
@@ -248,7 +255,7 @@ function getCommonConfig(wco) {
     const extraMinimizers = [];
     if (scriptsOptimization) {
         extraMinimizers.push(new javascript_optimizer_plugin_1.JavaScriptOptimizerPlugin({
-            define: buildOptions.aot ? compiler_cli_1.GLOBAL_DEFS_FOR_TERSER_WITH_AOT : compiler_cli_1.GLOBAL_DEFS_FOR_TERSER,
+            define: buildOptions.aot ? GLOBAL_DEFS_FOR_TERSER_WITH_AOT : GLOBAL_DEFS_FOR_TERSER,
             sourcemap: scriptsSourceMap,
             target: wco.scriptTarget,
             keepNames: !environment_options_1.allowMangle || platform === 'server',
@@ -276,6 +283,7 @@ function getCommonConfig(wco) {
         context: root,
         entry: entryPoints,
         output: {
+            hashFunction: 'xxhash64',
             clean: (_a = buildOptions.deleteOutputPath) !== null && _a !== void 0 ? _a : true,
             path: path.resolve(root, buildOptions.outputPath),
             publicPath: (_b = buildOptions.deployUrl) !== null && _b !== void 0 ? _b : '',
@@ -283,7 +291,7 @@ function getCommonConfig(wco) {
             chunkFilename: `[name]${hashFormat.chunk}.js`,
         },
         watch: buildOptions.watch,
-        watchOptions: helpers_1.getWatchOptions(buildOptions.poll),
+        watchOptions: (0, helpers_1.getWatchOptions)(buildOptions.poll),
         performance: {
             hints: false,
         },
@@ -317,12 +325,12 @@ function getCommonConfig(wco) {
                     test: /\.[cm]?js$|\.tsx?$/,
                     // The below is needed due to a bug in `@babel/runtime`. See: https://github.com/babel/babel/issues/12824
                     resolve: { fullySpecified: false },
-                    exclude: [/[/\\](?:core-js|@babel|tslib|web-animations-js)[/\\]/],
+                    exclude: [/[/\\](?:core-js|@babel|tslib|web-animations-js|web-streams-polyfill)[/\\]/],
                     use: [
                         {
                             loader: require.resolve('../../babel/webpack-loader'),
                             options: {
-                                cacheDirectory: cache_path_1.findCachePath('babel-webpack'),
+                                cacheDirectory: (0, cache_path_1.findCachePath)('babel-webpack'),
                                 scriptTarget: wco.scriptTarget,
                                 aot: buildOptions.aot,
                                 optimize: buildOptions.buildOptimizer,
@@ -340,7 +348,7 @@ function getCommonConfig(wco) {
         infrastructureLogging: {
             level: buildOptions.verbose ? 'verbose' : 'error',
         },
-        cache: getCacheSettings(wco, buildBrowserFeatures.supportedBrowsers),
+        cache: getCacheSettings(wco, buildBrowserFeatures.supportedBrowsers, NG_VERSION.full),
         optimization: {
             minimizer: extraMinimizers,
             moduleIds: 'deterministic',
@@ -357,18 +365,18 @@ function getCommonConfig(wco) {
     };
 }
 exports.getCommonConfig = getCommonConfig;
-function getCacheSettings(wco, supportedBrowsers) {
+function getCacheSettings(wco, supportedBrowsers, angularVersion) {
     if (environment_options_1.persistentBuildCacheEnabled) {
         const packageVersion = require('../../../package.json').version;
         return {
             type: 'filesystem',
-            cacheDirectory: cache_path_1.findCachePath('angular-webpack'),
+            cacheDirectory: (0, cache_path_1.findCachePath)('angular-webpack'),
             maxMemoryGenerations: 1,
             // We use the versions and build options as the cache name. The Webpack configurations are too
             // dynamic and shared among different build types: test, build and serve.
             // None of which are "named".
-            name: crypto_1.createHash('sha1')
-                .update(compiler_cli_1.VERSION.full)
+            name: (0, crypto_1.createHash)('sha1')
+                .update(angularVersion)
                 .update(packageVersion)
                 .update(wco.projectRoot)
                 .update(JSON.stringify(wco.tsConfig))

package/src/webpack/configs/dev-server.d.ts

@@ -8,7 +8,7 @@
 import { logging } from '@angular-devkit/core';
 import * as webpack from 'webpack';
 import { WebpackConfigOptions, WebpackDevServerOptions } from '../../utils/build-options';
-export declare function getDevServerConfig(wco: WebpackConfigOptions<WebpackDevServerOptions>): webpack.Configuration;
+export declare function getDevServerConfig(wco: WebpackConfigOptions<WebpackDevServerOptions>): Promise<webpack.Configuration>;
 /**
  * Resolve and build a URL _path_ that will be the root of the server. This resolved base href and
  * deploy URL from the browser options and returns a path from the root.

package/src/webpack/configs/dev-server.js

@@ -31,16 +31,17 @@ const core_1 = require("@angular-devkit/core");
 const fs_1 = require("fs");
 const path_1 = require("path");
 const url = __importStar(require("url"));
+const load_esm_1 = require("../../utils/load-esm");
 const webpack_browser_config_1 = require("../../utils/webpack-browser-config");
 const hmr_loader_1 = require("../plugins/hmr/hmr-loader");
-function getDevServerConfig(wco) {
+async function getDevServerConfig(wco) {
     const { buildOptions: { host, port, index, headers, watch, hmr, main, liveReload, proxyConfig }, logger, root, } = wco;
     const servePath = buildServePath(wco.buildOptions, logger);
     const extraRules = [];
     if (hmr) {
         extraRules.push({
             loader: hmr_loader_1.HmrLoader,
-            include: [main].map((p) => path_1.resolve(wco.root, p)),
+            include: [main].map((p) => (0, path_1.resolve)(wco.root, p)),
         });
     }
     const extraPlugins = [];
@@ -71,7 +72,7 @@ function getDevServerConfig(wco) {
                 ...headers,
             },
             historyApiFallback: !!index && {
-                index: path_1.posix.join(servePath, webpack_browser_config_1.getIndexOutputFile(index)),
+                index: path_1.posix.join(servePath, (0, webpack_browser_config_1.getIndexOutputFile)(index)),
                 disableDotRule: true,
                 htmlAcceptHeaders: ['text/html', 'application/xhtml+xml'],
                 rewrites: [
@@ -96,7 +97,7 @@ function getDevServerConfig(wco) {
             },
             liveReload,
             hot: hmr && !liveReload ? 'only' : hmr,
-            proxy: addProxyConfig(root, proxyConfig),
+            proxy: await addProxyConfig(root, proxyConfig),
             client: {
                 logging: 'info',
                 webSocketURL: getPublicHostOptions(wco.buildOptions, webSocketPath),
@@ -142,8 +143,8 @@ function getSslConfig(root, options) {
     const { ssl, sslCert, sslKey } = options;
     if (ssl && sslCert && sslKey) {
         return {
-            key: fs_1.readFileSync(path_1.resolve(root, sslKey), 'utf-8'),
-            cert: fs_1.readFileSync(path_1.resolve(root, sslCert), 'utf-8'),
+            key: (0, path_1.resolve)(root, sslKey),
+            cert: (0, path_1.resolve)(root, sslCert),
         };
     }
     return ssl;
@@ -152,13 +153,24 @@ function getSslConfig(root, options) {
  * Private method to enhance a webpack config with Proxy configuration.
  * @private
  */
-function addProxyConfig(root, proxyConfig) {
+async function addProxyConfig(root, proxyConfig) {
     if (!proxyConfig) {
         return undefined;
     }
-    const proxyPath = path_1.resolve(root, proxyConfig);
-    if (fs_1.existsSync(proxyPath)) {
-        return require(proxyPath);
+    const proxyPath = (0, path_1.resolve)(root, proxyConfig);
+    if ((0, fs_1.existsSync)(proxyPath)) {
+        try {
+            return require(proxyPath);
+        }
+        catch (e) {
+            if (e.code === 'ERR_REQUIRE_ESM') {
+                // Load the ESM configuration file using the TypeScript dynamic import workaround.
+                // Once TypeScript provides support for keeping the dynamic import this workaround can be
+                // changed to a direct dynamic import.
+                return (await (0, load_esm_1.loadEsmModule)(url.pathToFileURL(proxyPath))).default;
+            }
+            throw e;
+        }
     }
     throw new Error('Proxy config file ' + proxyPath + ' does not exist.');
 }

package/src/webpack/configs/server.js

@@ -20,7 +20,7 @@ function getServerConfig(wco) {
     const extraPlugins = [];
     const { scripts, styles, hidden } = sourceMap;
     if (scripts || styles) {
-        extraPlugins.push(helpers_1.getSourceMapDevTool(scripts, styles, hidden));
+        extraPlugins.push((0, helpers_1.getSourceMapDevTool)(scripts, styles, hidden));
     }
     const externals = [...externalDependencies];
     if (!bundleDependencies) {
@@ -58,7 +58,7 @@ function externalizePackages(context, request, callback) {
         return;
     }
     // Absolute & Relative paths are not externals
-    if (request.startsWith('.') || path_1.isAbsolute(request)) {
+    if (request.startsWith('.') || (0, path_1.isAbsolute)(request)) {
         callback();
         return;
     }

package/src/webpack/configs/styles.js

@@ -41,7 +41,7 @@ function resolveGlobalStyles(styleEntrypoints, root, preserveSymlinks) {
     if (styleEntrypoints.length === 0) {
         return { entryPoints, noInjectNames, paths };
     }
-    for (const style of helpers_1.normalizeExtraEntryPoints(styleEntrypoints, 'styles')) {
+    for (const style of (0, helpers_1.normalizeExtraEntryPoints)(styleEntrypoints, 'styles')) {
         let resolvedPath = path.resolve(root, style.input);
         if (!fs.existsSync(resolvedPath)) {
             try {
@@ -79,7 +79,7 @@ function getStylesConfig(wco) {
     extraPlugins.push(new plugins_1.AnyComponentStyleBudgetChecker(buildOptions.budgets));
     const cssSourceMap = buildOptions.sourceMap.styles;
     // Determine hashing format.
-    const hashFormat = helpers_1.getOutputHashFormat(buildOptions.outputHashing);
+    const hashFormat = (0, helpers_1.getOutputHashFormat)(buildOptions.outputHashing);
     // use includePaths from appConfig
     const includePaths = (_c = (_b = (_a = buildOptions.stylePreprocessorOptions) === null || _a === void 0 ? void 0 : _a.includePaths) === null || _b === void 0 ? void 0 : _b.map((p) => path.resolve(root, p))) !== null && _c !== void 0 ? _c : [];
     // Process global styles.
@@ -100,7 +100,7 @@ function getStylesConfig(wco) {
             });
         },
     });
-    const assetNameTemplate = helpers_1.assetNameTemplateFactory(hashFormat);
+    const assetNameTemplate = (0, helpers_1.assetNameTemplateFactory)(hashFormat);
     const extraPostcssPlugins = [];
     // Attempt to setup Tailwind CSS
     // A configuration file can exist in the project or workspace root
@@ -165,7 +165,7 @@ function getStylesConfig(wco) {
                         });
                     },
                 }),
-                plugins_1.PostcssCliResources({
+                (0, plugins_1.PostcssCliResources)({
                     baseHref: buildOptions.baseHref,
                     deployUrl: buildOptions.deployUrl,
                     resourcesOutputPath: buildOptions.resourcesOutputPath,

package/src/webpack/configs/test.js

@@ -54,7 +54,7 @@ function getTestConfig(wco) {
         });
     }
     if (sourceMap.scripts || sourceMap.styles) {
-        extraPlugins.push(helpers_1.getSourceMapDevTool(sourceMap.scripts, sourceMap.styles, false, true));
+        extraPlugins.push((0, helpers_1.getSourceMapDevTool)(sourceMap.scripts, sourceMap.styles, false, true));
     }
     return {
         mode: 'development',
@@ -80,7 +80,7 @@ function getTestConfig(wco) {
         plugins: extraPlugins,
         optimization: {
             splitChunks: {
-                chunks: (chunk) => !helpers_1.isPolyfillsEntry(chunk.name),
+                chunks: (chunk) => !(0, helpers_1.isPolyfillsEntry)(chunk.name),
                 cacheGroups: {
                     vendors: false,
                     defaultVendors: {

package/src/webpack/configs/typescript.js

@@ -41,7 +41,7 @@ function createIvyPlugin(wco, aot, tsconfig) {
     const fileReplacements = {};
     if (buildOptions.fileReplacements) {
         for (const replacement of buildOptions.fileReplacements) {
-            fileReplacements[core_1.getSystemPath(replacement.replace)] = core_1.getSystemPath(replacement.with);
+            fileReplacements[(0, core_1.getSystemPath)(replacement.replace)] = (0, core_1.getSystemPath)(replacement.with);
         }
     }
     let inlineStyleFileExtension;

package/src/webpack/configs/worker.js

@@ -16,7 +16,7 @@ function getWorkerConfig(wco) {
         return {};
     }
     return {
-        plugins: [typescript_1.getTypescriptWorkerPlugin(wco, path_1.resolve(wco.root, webWorkerTsConfig))],
+        plugins: [(0, typescript_1.getTypescriptWorkerPlugin)(wco, (0, path_1.resolve)(wco.root, webWorkerTsConfig))],
     };
 }
 exports.getWorkerConfig = getWorkerConfig;

package/src/webpack/plugins/any-component-style-budget-checker.js

@@ -58,15 +58,15 @@ class AnyComponentStyleBudgetChecker {
                     size: compilation.assets[name].size(),
                     label: name,
                 }));
-                const thresholds = this.budgets.flatMap((budget) => [...bundle_calculator_1.calculateThresholds(budget)]);
+                const thresholds = this.budgets.flatMap((budget) => [...(0, bundle_calculator_1.calculateThresholds)(budget)]);
                 for (const { size, label } of componentStyles) {
-                    for (const { severity, message } of bundle_calculator_1.checkThresholds(thresholds[Symbol.iterator](), size, label)) {
+                    for (const { severity, message } of (0, bundle_calculator_1.checkThresholds)(thresholds[Symbol.iterator](), size, label)) {
                         switch (severity) {
                             case bundle_calculator_1.ThresholdSeverity.Warning:
-                                webpack_diagnostics_1.addWarning(compilation, message);
+                                (0, webpack_diagnostics_1.addWarning)(compilation, message);
                                 break;
                             case bundle_calculator_1.ThresholdSeverity.Error:
-                                webpack_diagnostics_1.addError(compilation, message);
+                                (0, webpack_diagnostics_1.addError)(compilation, message);
                                 break;
                             default:
                                 assertNever(severity);

package/src/webpack/plugins/common-js-usage-warn-plugin.js

@@ -32,7 +32,7 @@ class CommonJsUsageWarnPlugin {
                     const { dependencies, rawRequest } = module;
                     if (!rawRequest ||
                         rawRequest.startsWith('.') ||
-                        path_1.isAbsolute(rawRequest) ||
+                        (0, path_1.isAbsolute)(rawRequest) ||
                         this.allowedDependencies.has(rawRequest) ||
                         this.allowedDependencies.has(this.rawRequestToPackageName(rawRequest)) ||
                         rawRequest.startsWith('@angular/common/locales/')) {
@@ -70,7 +70,7 @@ class CommonJsUsageWarnPlugin {
                                 'For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies';
                             // Avoid showing the same warning multiple times when in 'watch' mode.
                             if (!this.shownWarnings.has(warning)) {
-                                webpack_diagnostics_1.addWarning(compilation, warning);
+                                (0, webpack_diagnostics_1.addWarning)(compilation, warning);
                                 this.shownWarnings.add(warning);
                             }
                         }

package/src/webpack/plugins/css-optimizer-plugin.d.ts

@@ -17,8 +17,20 @@ export interface CssOptimizerPluginOptions {
  */
 export declare class CssOptimizerPlugin {
     private targets;
+    private esbuild;
     constructor(options?: CssOptimizerPluginOptions);
     apply(compiler: Compiler): void;
+    /**
+     * Optimizes a CSS asset using esbuild.
+     *
+     * @param input The CSS asset source content to optimize.
+     * @param name The name of the CSS asset. Used to generate source maps.
+     * @param inputMap Optionally specifies the CSS asset's original source map that will
+     * be merged with the intermediate optimized source map.
+     * @param target Optionally specifies the target browsers for the output code.
+     * @returns A promise resolving to the optimized CSS, source map, and any warnings.
+     */
+    private optimize;
     private addWarnings;
     private transformSupportedBrowsersToTargets;
 }

package/src/webpack/plugins/css-optimizer-plugin.js

@@ -8,8 +8,8 @@
  */
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CssOptimizerPlugin = void 0;
-const esbuild_1 = require("esbuild");
 const webpack_diagnostics_1 = require("../../utils/webpack-diagnostics");
+const esbuild_executor_1 = require("./esbuild-executor");
 /**
  * The name of the plugin provided to Webpack when tapping Webpack compiler hooks.
  */
@@ -22,6 +22,7 @@ const PLUGIN_NAME = 'angular-css-optimizer';
  */
 class CssOptimizerPlugin {
     constructor(options) {
+        this.esbuild = new esbuild_executor_1.EsbuildExecutor();
         if (options === null || options === void 0 ? void 0 : options.supportedBrowsers) {
             this.targets = this.transformSupportedBrowsersToTargets(options.supportedBrowsers);
         }
@@ -58,20 +59,8 @@ class CssOptimizerPlugin {
                         }
                     }
                     const { source, map: inputMap } = styleAssetSource.sourceAndMap();
-                    let sourceMapLine;
-                    if (inputMap) {
-                        // esbuild will automatically remap the sourcemap if provided
-                        sourceMapLine = `\n/*# sourceMappingURL=data:application/json;charset=utf-8;base64,${Buffer.from(JSON.stringify(inputMap)).toString('base64')} */`;
-                    }
                     const input = typeof source === 'string' ? source : source.toString();
-                    const { code, warnings, map } = await esbuild_1.transform(sourceMapLine ? input + sourceMapLine : input, {
-                        loader: 'css',
-                        legalComments: 'inline',
-                        minify: true,
-                        sourcemap: !!inputMap && 'external',
-                        sourcefile: asset.name,
-                        target: this.targets,
-                    });
+                    const { code, warnings, map } = await this.optimize(input, asset.name, inputMap, this.targets);
                     await this.addWarnings(compilation, warnings);
                     const optimizedAsset = map
                         ? new SourceMapSource(code, name, map)
@@ -85,10 +74,35 @@ class CssOptimizerPlugin {
             });
         });
     }
+    /**
+     * Optimizes a CSS asset using esbuild.
+     *
+     * @param input The CSS asset source content to optimize.
+     * @param name The name of the CSS asset. Used to generate source maps.
+     * @param inputMap Optionally specifies the CSS asset's original source map that will
+     * be merged with the intermediate optimized source map.
+     * @param target Optionally specifies the target browsers for the output code.
+     * @returns A promise resolving to the optimized CSS, source map, and any warnings.
+     */
+    optimize(input, name, inputMap, target) {
+        let sourceMapLine;
+        if (inputMap) {
+            // esbuild will automatically remap the sourcemap if provided
+            sourceMapLine = `\n/*# sourceMappingURL=data:application/json;charset=utf-8;base64,${Buffer.from(JSON.stringify(inputMap)).toString('base64')} */`;
+        }
+        return this.esbuild.transform(sourceMapLine ? input + sourceMapLine : input, {
+            loader: 'css',
+            legalComments: 'inline',
+            minify: true,
+            sourcemap: !!inputMap && 'external',
+            sourcefile: name,
+            target,
+        });
+    }
     async addWarnings(compilation, warnings) {
         if (warnings.length > 0) {
-            for (const warning of await esbuild_1.formatMessages(warnings, { kind: 'warning' })) {
-                webpack_diagnostics_1.addWarning(compilation, warning);
+            for (const warning of await this.esbuild.formatMessages(warnings, { kind: 'warning' })) {
+                (0, webpack_diagnostics_1.addWarning)(compilation, warning);
             }
         }
     }
@@ -97,8 +111,20 @@ class CssOptimizerPlugin {
         // https://esbuild.github.io/api/#target
         const esBuildSupportedBrowsers = new Set(['safari', 'firefox', 'edge', 'chrome', 'ios']);
         for (const browser of supportedBrowsers) {
-            const [browserName, version] = browser.split(' ');
+            let [browserName, version] = browser.split(' ');
+            // browserslist uses the name `ios_saf` for iOS Safari whereas esbuild uses `ios`
+            if (browserName === 'ios_saf') {
+                browserName = 'ios';
+                // browserslist also uses ranges for iOS Safari versions but only the lowest is required
+                // to perform minimum supported feature checks. esbuild also expects a single version.
+                [version] = version.split('-');
+            }
             if (esBuildSupportedBrowsers.has(browserName)) {
+                if (browserName === 'safari' && version === 'TP') {
+                    // esbuild only supports numeric versions so `TP` is converted to a high number (999) since
+                    // a Technology Preview (TP) of Safari is assumed to support all currently known features.
+                    version = '999';
+                }
                 transformed.push(browserName + version);
             }
         }

package/src/webpack/plugins/dedupe-module-resolve-plugin.js

@@ -62,7 +62,7 @@ class DedupeModuleResolvePlugin {
                     return;
                 }
                 if ((_a = this.options) === null || _a === void 0 ? void 0 : _a.verbose) {
-                    webpack_diagnostics_1.addWarning(compilation, `[DedupeModuleResolvePlugin]: ${resource} -> ${prevResource}`);
+                    (0, webpack_diagnostics_1.addWarning)(compilation, `[DedupeModuleResolvePlugin]: ${resource} -> ${prevResource}`);
                 }
                 // Alter current request with previously resolved module.
                 const createData = result.createData;

package/src/webpack/plugins/esbuild-executor.d.ts

@@ -0,0 +1,46 @@
+/**
+ * @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 type { FormatMessagesOptions, PartialMessage, TransformOptions, TransformResult } from 'esbuild';
+/**
+ * Provides the ability to execute esbuild regardless of the current platform's support
+ * for using the native variant of esbuild. The native variant will be preferred (assuming
+ * the `alwaysUseWasm` constructor option is `false) due to its inherent performance advantages.
+ * At first use of esbuild, a supportability test will be automatically performed and the
+ * WASM-variant will be used if needed by the platform.
+ */
+export declare class EsbuildExecutor implements Pick<typeof import('esbuild'), 'transform' | 'formatMessages'> {
+    private alwaysUseWasm;
+    private esbuildTransform;
+    private esbuildFormatMessages;
+    private initialized;
+    /**
+     * Constructs an instance of the `EsbuildExecutor` class.
+     *
+     * @param alwaysUseWasm If true, the WASM-variant will be preferred and no support test will be
+     * performed; if false (default), the native variant will be preferred.
+     */
+    constructor(alwaysUseWasm?: boolean);
+    /**
+     * Determines whether the native variant of esbuild can be used on the current platform.
+     *
+     * @returns True, if the native variant of esbuild is support; False, if the WASM variant is required.
+     */
+    static hasNativeSupport(): boolean;
+    /**
+     * Initializes the esbuild transform and format messages functions.
+     *
+     * @returns A promise that fulfills when esbuild has been loaded and available for use.
+     */
+    private ensureEsbuild;
+    /**
+     * Transitions an executor instance to use the WASM-variant of esbuild.
+     */
+    private useWasm;
+    transform(input: string, options?: TransformOptions): Promise<TransformResult>;
+    formatMessages(messages: PartialMessage[], options: FormatMessagesOptions): Promise<string[]>;
+}