@angular-devkit/build-angular 13.2.0-next.0 → 13.2.0-rc.1

package/src/utils/i18n-options.js

@@ -16,6 +16,7 @@ const fs_1 = __importDefault(require("fs"));
 const module_1 = __importDefault(require("module"));
 const os_1 = __importDefault(require("os"));
 const path_1 = __importDefault(require("path"));
+const schema_1 = require("../builders/browser/schema");
 const read_tsconfig_1 = require("../utils/read-tsconfig");
 const load_translations_1 = require("./load-translations");
 /**
@@ -166,7 +167,7 @@ async function configureI18nBuild(context, options) {
             error(message) {
                 throw new Error(message);
             },
-        }, usedFormats);
+        }, usedFormats, buildOptions.i18nDuplicateTranslation);
         if (usedFormats.size > 1 && tsConfig.options.enableI18nLegacyMessageIdFormat !== false) {
             // This limitation is only for legacy message id support (defaults to true as of 9.0)
             throw new Error('Localization currently only supports using one type of translation file format for the entire application.');
@@ -176,12 +177,11 @@ async function configureI18nBuild(context, options) {
     if (i18n.shouldInline) {
         const tempPath = fs_1.default.mkdtempSync(path_1.default.join(fs_1.default.realpathSync(os_1.default.tmpdir()), 'angular-cli-i18n-'));
         buildOptions.outputPath = tempPath;
-        // Remove temporary directory used for i18n processing
-        process.on('exit', () => {
-            try {
-                fs_1.default.rmdirSync(tempPath, { recursive: true, maxRetries: 3 });
-            }
-            catch { }
+        process.on('exit', () => deleteTempDirectory(tempPath));
+        process.once('SIGINT', () => {
+            deleteTempDirectory(tempPath);
+            // Needed due to `ora` as otherwise process will not terminate.
+            process.kill(process.pid, 'SIGINT');
         });
     }
     return { buildOptions, i18n };
@@ -201,7 +201,22 @@ function findLocaleDataPath(locale, resolver) {
         return null;
     }
 }
-function loadTranslations(locale, desc, workspaceRoot, loader, logger, usedFormats) {
+/** Remove temporary directory used for i18n processing. */
+function deleteTempDirectory(tempPath) {
+    // The below should be removed and replaced with just `rmSync` when support for Node.Js 12 is removed.
+    const { rmSync, rmdirSync } = fs_1.default;
+    try {
+        if (rmSync) {
+            rmSync(tempPath, { force: true, recursive: true, maxRetries: 3 });
+        }
+        else {
+            rmdirSync(tempPath, { recursive: true, maxRetries: 3 });
+        }
+    }
+    catch { }
+}
+function loadTranslations(locale, desc, workspaceRoot, loader, logger, usedFormats, duplicateTranslation) {
+    let translations = undefined;
     for (const file of desc.files) {
         const loadResult = loader(path_1.default.join(workspaceRoot, file.path));
         for (const diagnostics of loadResult.diagnostics.messages) {
@@ -218,19 +233,31 @@ function loadTranslations(locale, desc, workspaceRoot, loader, logger, usedForma
         usedFormats === null || usedFormats === void 0 ? void 0 : usedFormats.add(loadResult.format);
         file.format = loadResult.format;
         file.integrity = loadResult.integrity;
-        if (desc.translation) {
+        if (translations) {
             // Merge translations
             for (const [id, message] of Object.entries(loadResult.translations)) {
-                if (desc.translation[id] !== undefined) {
-                    logger.warn(`WARNING [${file.path}]: Duplicate translations for message '${id}' when merging`);
+                if (translations[id] !== undefined) {
+                    const duplicateTranslationMessage = `[${file.path}]: Duplicate translations for message '${id}' when merging.`;
+                    switch (duplicateTranslation) {
+                        case schema_1.I18NTranslation.Ignore:
+                            break;
+                        case schema_1.I18NTranslation.Error:
+                            logger.error(`ERROR ${duplicateTranslationMessage}`);
+                            break;
+                        case schema_1.I18NTranslation.Warning:
+                        default:
+                            logger.warn(`WARNING ${duplicateTranslationMessage}`);
+                            break;
+                    }
                 }
-                desc.translation[id] = message;
+                translations[id] = message;
             }
         }
         else {
             // First or only translation file
-            desc.translation = loadResult.translations;
+            translations = loadResult.translations;
         }
     }
+    desc.translation = translations;
 }
 exports.loadTranslations = loadTranslations;

package/src/utils/index-file/inline-fonts.js

@@ -36,8 +36,8 @@ const https = __importStar(require("https"));
 const https_proxy_agent_1 = __importDefault(require("https-proxy-agent"));
 const path_1 = require("path");
 const url_1 = require("url");
+const package_version_1 = require("../package-version");
 const html_rewriting_stream_1 = require("./html-rewriting-stream");
-const packageVersion = require('../../../package.json').version;
 const SUPPORTED_PROVIDERS = {
     'fonts.googleapis.com': {
         preconnectUrl: 'https://fonts.gstatic.com',
@@ -146,7 +146,7 @@ class InlineFontsProcessor {
     }
     async getResponse(url) {
         var _a;
-        const key = `${packageVersion}|${url}`;
+        const key = `${package_version_1.VERSION}|${url}`;
         if (this.cachePath) {
             const entry = await cacache.get.info(this.cachePath, key);
             if (entry) {

package/src/utils/normalize-cache.d.ts

@@ -7,7 +7,11 @@
  */
 import { json } from '@angular-devkit/core';
 export interface NormalizedCachedOptions {
+    /** Whether disk cache is enabled. */
     enabled: boolean;
+    /** Disk cache path. Example: `/.angular/cache/v12.0.0`. */
     path: string;
+    /** Disk cache base path. Example: `/.angular/cache`. */
+    basePath: string;
 }
 export declare function normalizeCacheOptions(metadata: json.JsonObject, worspaceRoot: string): NormalizedCachedOptions;

package/src/utils/normalize-cache.js

@@ -11,6 +11,7 @@ exports.normalizeCacheOptions = void 0;
 const core_1 = require("@angular-devkit/core");
 const path_1 = require("path");
 const environment_options_1 = require("./environment-options");
+const package_version_1 = require("./package-version");
 function normalizeCacheOptions(metadata, worspaceRoot) {
     var _a;
     const cacheMetadata = core_1.json.isJsonObject(metadata.cli) && core_1.json.isJsonObject(metadata.cli.cache)
@@ -32,9 +33,11 @@ function normalizeCacheOptions(metadata, worspaceRoot) {
                 break;
         }
     }
+    const cacheBasePath = (0, path_1.resolve)(worspaceRoot, path);
     return {
         enabled: cacheEnabled,
-        path: (0, path_1.resolve)(worspaceRoot, path),
+        basePath: cacheBasePath,
+        path: (0, path_1.join)(cacheBasePath, package_version_1.VERSION),
     };
 }
 exports.normalizeCacheOptions = normalizeCacheOptions;

package/src/utils/package-version.d.ts

@@ -0,0 +1,8 @@
+/**
+ * @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
+ */
+export declare const VERSION: string;

package/src/utils/package-version.js

@@ -0,0 +1,11 @@
+"use strict";
+/**
+ * @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
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.VERSION = void 0;
+exports.VERSION = require('../../package.json').version;

package/src/utils/purge-cache.d.ts

@@ -0,0 +1,10 @@
+/**
+ * @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';
+/** Delete stale cache directories used by previous versions of build-angular. */
+export declare function purgeStaleBuildCache(context: BuilderContext): Promise<void>;

package/src/utils/purge-cache.js

@@ -0,0 +1,41 @@
+"use strict";
+/**
+ * @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
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.purgeStaleBuildCache = void 0;
+const fs_1 = require("fs");
+const path_1 = require("path");
+const normalize_cache_1 = require("./normalize-cache");
+/** Delete stale cache directories used by previous versions of build-angular. */
+async function purgeStaleBuildCache(context) {
+    var _a;
+    const projectName = (_a = context.target) === null || _a === void 0 ? void 0 : _a.project;
+    if (!projectName) {
+        return;
+    }
+    const metadata = await context.getProjectMetadata(projectName);
+    const { basePath, path, enabled } = (0, normalize_cache_1.normalizeCacheOptions)(metadata, context.workspaceRoot);
+    if (!enabled || !(0, fs_1.existsSync)(basePath)) {
+        return;
+    }
+    // The below should be removed and replaced with just `rm` when support for Node.Js 12 is removed.
+    const { rm, rmdir } = fs_1.promises;
+    const entriesToDelete = (await fs_1.promises.readdir(basePath, { withFileTypes: true }))
+        .filter((d) => (0, path_1.join)(basePath, d.name) !== path && d.isDirectory())
+        .map((d) => {
+        const subPath = (0, path_1.join)(basePath, d.name);
+        try {
+            return rm
+                ? rm(subPath, { force: true, recursive: true, maxRetries: 3 })
+                : rmdir(subPath, { recursive: true, maxRetries: 3 });
+        }
+        catch { }
+    });
+    await Promise.all(entriesToDelete);
+}
+exports.purgeStaleBuildCache = purgeStaleBuildCache;

package/src/webpack/configs/common.js

@@ -81,7 +81,7 @@ async function getCommonConfig(wco) {
             }
         }
         if (!buildOptions.aot) {
-            const jitPolyfills = 'core-js/proposals/reflect-metadata';
+            const jitPolyfills = require.resolve('core-js/proposals/reflect-metadata');
             if (entryPoints['polyfills']) {
                 entryPoints['polyfills'].push(jitPolyfills);
             }
@@ -198,7 +198,8 @@ async function getCommonConfig(wco) {
             define: buildOptions.aot ? GLOBAL_DEFS_FOR_TERSER_WITH_AOT : GLOBAL_DEFS_FOR_TERSER,
             sourcemap: scriptsSourceMap,
             target: scriptTarget,
-            keepNames: !environment_options_1.allowMangle || isPlatformServer,
+            keepIdentifierNames: !environment_options_1.allowMangle || isPlatformServer,
+            keepNames: isPlatformServer,
             removeLicenses: buildOptions.extractLicenses,
             advanced: buildOptions.buildOptimizer,
         }));
@@ -271,14 +272,14 @@ async function getCommonConfig(wco) {
         module: {
             // Show an error for missing exports instead of a warning.
             strictExportPresence: true,
-            parser: webWorkerTsConfig === undefined
-                ? {
-                    javascript: {
-                        worker: false,
-                        url: false,
-                    },
-                }
-                : undefined,
+            parser: {
+                javascript: {
+                    // Disable auto URL asset module creation. This doesn't effect `new Worker(new URL(...))`
+                    // https://webpack.js.org/guides/asset-modules/#url-assets
+                    url: false,
+                    worker: !!webWorkerTsConfig,
+                },
+            },
             rules: [
                 {
                     test: /\.?(svg|html)$/,

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

@@ -58,7 +58,6 @@ async function getDevServerConfig(wco) {
             },
         });
     }
-    const webSocketPath = path_1.posix.join(servePath, 'ws');
     return {
         plugins: extraPlugins,
         module: {
@@ -82,11 +81,6 @@ async function getDevServerConfig(wco) {
                     },
                 ],
             },
-            webSocketServer: {
-                options: {
-                    path: webSocketPath,
-                },
-            },
             compress: false,
             static: false,
             server: getServerConfig(root, wco.buildOptions),
@@ -98,14 +92,7 @@ async function getDevServerConfig(wco) {
             liveReload,
             hot: hmr && !liveReload ? 'only' : hmr,
             proxy: await addProxyConfig(root, proxyConfig),
-            client: {
-                logging: 'info',
-                webSocketURL: getPublicHostOptions(wco.buildOptions, webSocketPath),
-                overlay: {
-                    errors: true,
-                    warnings: false,
-                },
-            },
+            ...getWebSocketSettings(wco.buildOptions, servePath),
         },
     };
 }
@@ -271,6 +258,31 @@ function getAllowedHostsConfig(options) {
     }
     return undefined;
 }
+function getWebSocketSettings(options, servePath) {
+    const { hmr, liveReload } = options;
+    if (!hmr && !liveReload) {
+        return {
+            webSocketServer: false,
+            client: undefined,
+        };
+    }
+    const webSocketPath = path_1.posix.join(servePath, 'ws');
+    return {
+        webSocketServer: {
+            options: {
+                path: webSocketPath,
+            },
+        },
+        client: {
+            logging: 'info',
+            webSocketURL: getPublicHostOptions(options, webSocketPath),
+            overlay: {
+                errors: true,
+                warnings: false,
+            },
+        },
+    };
+}
 function getPublicHostOptions(options, webSocketPath) {
     let publicHost = options.publicHost;
     if (publicHost) {

package/src/webpack/configs/styles.js

@@ -25,9 +25,13 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getStylesConfig = void 0;
 const fs = __importStar(require("fs"));
+const mini_css_extract_plugin_1 = __importDefault(require("mini-css-extract-plugin"));
 const path = __importStar(require("path"));
 const sass_service_1 = require("../../sass/sass-service");
 const plugins_1 = require("../plugins");
@@ -70,7 +74,6 @@ function resolveGlobalStyles(styleEntrypoints, root, preserveSymlinks) {
 // eslint-disable-next-line max-lines-per-function
 function getStylesConfig(wco) {
     var _a, _b, _c;
-    const MiniCssExtractPlugin = require('mini-css-extract-plugin');
     const postcssImports = require('postcss-import');
     const postcssPresetEnv = require('postcss-preset-env');
     const { root, buildOptions } = wco;
@@ -129,9 +132,6 @@ function getStylesConfig(wco) {
                 ` To enable Tailwind CSS, please install the 'tailwindcss' package.`);
         }
         if (tailwindPackagePath) {
-            if (process.env['TAILWIND_MODE'] === undefined) {
-                process.env['TAILWIND_MODE'] = buildOptions.watch ? 'watch' : 'build';
-            }
             extraPostcssPlugins.push(require(tailwindPackagePath)({ config: tailwindConfigPath }));
         }
     }
@@ -191,7 +191,7 @@ function getStylesConfig(wco) {
         // for component css.
         !buildOptions.sourceMap.hidden);
     // extract global css from js files into own css file.
-    extraPlugins.push(new MiniCssExtractPlugin({ filename: `[name]${hashFormat.extract}.css` }));
+    extraPlugins.push(new mini_css_extract_plugin_1.default({ filename: `[name]${hashFormat.extract}.css` }));
     if (!buildOptions.hmr) {
         // don't remove `.js` files for `.css` when we are using HMR these contain HMR accept codes.
         // suppress empty .js files in css only entry points.
@@ -210,7 +210,7 @@ function getStylesConfig(wco) {
     ];
     const globalStyleLoaders = [
         {
-            loader: MiniCssExtractPlugin.loader,
+            loader: mini_css_extract_plugin_1.default.loader,
         },
         {
             loader: require.resolve('css-loader'),
@@ -340,17 +340,17 @@ function getStylesConfig(wco) {
                     // Setup processing rules for global and component styles
                     {
                         oneOf: [
-                            // Component styles are all styles except defined global styles
-                            {
-                                use: componentStyleLoaders,
-                                resourceQuery: /\?ngResource/,
-                                type: 'asset/source',
-                            },
                             // Global styles are only defined global styles
                             {
                                 use: globalStyleLoaders,
+                                include: globalStylePaths,
                                 resourceQuery: { not: [/\?ngResource/] },
                             },
+                            // Component styles are all styles except defined global styles
+                            {
+                                use: componentStyleLoaders,
+                                type: 'asset/source',
+                            },
                         ],
                     },
                     { use },

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

@@ -47,6 +47,10 @@ class AnyComponentStyleBudgetChecker {
                 name: PLUGIN_NAME,
                 stage: webpack_1.Compilation.PROCESS_ASSETS_STAGE_ANALYSE,
             }, () => {
+                // No budgets.
+                if (this.budgets.length === 0) {
+                    return;
+                }
                 // In AOT compilations component styles get processed in child compilations.
                 if (!compilation.compiler.parentCompilation) {
                     return;

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

@@ -13,10 +13,10 @@ import type { Compiler } from 'webpack';
 export interface JavaScriptOptimizerOptions {
     /**
      * Enables advanced optimizations in the underlying JavaScript optimizers.
-     * This currently increases the `terser` passes to 3 and enables the `pure_getters`
+     * This currently increases the `terser` passes to 2 and enables the `pure_getters`
      * option for `terser`.
      */
-    advanced: boolean;
+    advanced?: boolean;
     /**
      * An object record of string keys that will be replaced with their respective values when found
      * within the code during optimization.
@@ -27,7 +27,7 @@ export interface JavaScriptOptimizerOptions {
      * The output sourcemap will be a full sourcemap containing the merge of the input sourcemap and
      * all intermediate sourcemaps.
      */
-    sourcemap: boolean;
+    sourcemap?: boolean;
     /**
      * The ECMAScript version that should be used when generating output code.
      * The optimizer will not adjust the output code with features present in newer
@@ -37,12 +37,20 @@ export interface JavaScriptOptimizerOptions {
     /**
      * Enables the retention of identifier names and ensures that function and class names are
      * present in the output code.
+     *
+     * **Note**: in some cases symbols are still renamed to avoid collisions.
+     */
+    keepIdentifierNames: boolean;
+    /**
+     * Enables the retention of original name of classes and functions.
+     *
+     * **Note**: this causes increase of bundle size as it causes dead-code elimination to not work fully.
      */
     keepNames: boolean;
     /**
      * Enables the removal of all license comments from the output code.
      */
-    removeLicenses: boolean;
+    removeLicenses?: boolean;
 }
 /**
  * A Webpack plugin that provides JavaScript optimization capabilities.
@@ -53,7 +61,7 @@ export interface JavaScriptOptimizerOptions {
  * optimizations not yet implemented by `esbuild`.
  */
 export declare class JavaScriptOptimizerPlugin {
-    options: Partial<JavaScriptOptimizerOptions>;
-    constructor(options?: Partial<JavaScriptOptimizerOptions>);
+    options: JavaScriptOptimizerOptions;
+    constructor(options: JavaScriptOptimizerOptions);
     apply(compiler: Compiler): void;
 }

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

@@ -32,7 +32,7 @@ const PLUGIN_NAME = 'angular-javascript-optimizer';
  * optimizations not yet implemented by `esbuild`.
  */
 class JavaScriptOptimizerPlugin {
-    constructor(options = {}) {
+    constructor(options) {
         this.options = options;
     }
     apply(compiler) {
@@ -91,11 +91,11 @@ class JavaScriptOptimizerPlugin {
                     if (this.options.target <= typescript_1.ScriptTarget.ES5) {
                         target = 5;
                     }
-                    else if (this.options.target < typescript_1.ScriptTarget.ESNext) {
-                        target = Number(typescript_1.ScriptTarget[this.options.target].slice(2));
+                    else if (this.options.target === typescript_1.ScriptTarget.ESNext) {
+                        target = 'next';
                     }
                     else {
-                        target = 2020;
+                        target = Number(typescript_1.ScriptTarget[this.options.target].slice(2));
                     }
                 }
                 // Setup the options used by all worker tasks
@@ -103,6 +103,7 @@ class JavaScriptOptimizerPlugin {
                     sourcemap: this.options.sourcemap,
                     define,
                     keepNames: this.options.keepNames,
+                    keepIdentifierNames: this.options.keepIdentifierNames,
                     target,
                     removeLicenses: this.options.removeLicenses,
                     advanced: this.options.advanced,

package/src/webpack/plugins/javascript-optimizer-worker.d.ts

@@ -5,6 +5,50 @@
  * 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
  */
+/**
+ * The options to use when optimizing.
+ */
+export interface OptimizeRequestOptions {
+    /**
+     * Controls advanced optimizations.
+     * Currently these are only terser related:
+     * * terser compress passes are set to 2
+     * * terser pure_getters option is enabled
+     */
+    advanced?: boolean;
+    /**
+     * Specifies the string tokens that should be replaced with a defined value.
+     */
+    define?: Record<string, string>;
+    /**
+     * Controls whether class, function, and variable names should be left intact
+     * throughout the output code.
+     */
+    keepIdentifierNames: boolean;
+    /**
+     * Controls whether to retain the original name of classes and functions.
+     */
+    keepNames: boolean;
+    /**
+     * Controls whether license text is removed from the output code.
+     * Within the CLI, this option is linked to the license extraction functionality.
+     */
+    removeLicenses?: boolean;
+    /**
+     * Controls whether source maps should be generated.
+     */
+    sourcemap?: boolean;
+    /**
+     * Specifies the target ECMAScript version for the output code.
+     */
+    target: 5 | 2015 | 2016 | 2017 | 2018 | 2019 | 2020 | 'next';
+    /**
+     * Controls whether esbuild should only use the WASM-variant instead of trying to
+     * use the native variant. Some platforms may not support the native-variant and
+     * this option allows one support test to be conducted prior to all the workers starting.
+     */
+    alwaysUseWasm: boolean;
+}
 /**
  * A request to optimize JavaScript using the supplied options.
  */
@@ -12,43 +56,7 @@ interface OptimizeRequest {
     /**
      * The options to use when optimizing.
      */
-    options: {
-        /**
-         * Controls advanced optimizations.
-         * Currently these are only terser related:
-         * * terser compress passes are set to 2
-         * * terser pure_getters option is enabled
-         */
-        advanced: boolean;
-        /**
-         * Specifies the string tokens that should be replaced with a defined value.
-         */
-        define?: Record<string, string>;
-        /**
-         * Controls whether class, function, and variable names should be left intact
-         * throughout the output code.
-         */
-        keepNames: boolean;
-        /**
-         * Controls whether license text is removed from the output code.
-         * Within the CLI, this option is linked to the license extraction functionality.
-         */
-        removeLicenses: boolean;
-        /**
-         * Controls whether source maps should be generated.
-         */
-        sourcemap: boolean;
-        /**
-         * Specifies the target ECMAScript version for the output code.
-         */
-        target: 5 | 2015 | 2016 | 2017 | 2018 | 2019 | 2020;
-        /**
-         * Controls whether esbuild should only use the WASM-variant instead of trying to
-         * use the native variant. Some platforms may not support the native-variant and
-         * this option allows one support test to be conducted prior to all the workers starting.
-         */
-        alwaysUseWasm: boolean;
-    };
+    options: OptimizeRequestOptions;
     /**
      * The JavaScript asset to optimize.
      */

package/src/webpack/plugins/javascript-optimizer-worker.js

@@ -26,7 +26,9 @@ async function default_1({ asset, options }) {
     // esbuild is used as a first pass
     const esbuildResult = await optimizeWithEsbuild(asset.code, asset.name, options);
     // terser is used as a second pass
-    const terserResult = await optimizeWithTerser(asset.name, esbuildResult.code, options.sourcemap, options.target, options.advanced);
+    const terserResult = await optimizeWithTerser(asset.name, esbuildResult.code, options.sourcemap, 
+    // Terser only supports up to ES2020.
+    options.target === 'next' ? 2020 : options.target, options.advanced);
     // Merge intermediate sourcemaps with input sourcemap if enabled
     let fullSourcemap;
     if (options.sourcemap) {
@@ -61,7 +63,7 @@ async function optimizeWithEsbuild(content, name, options) {
     let result;
     try {
         result = await esbuild.transform(content, {
-            minifyIdentifiers: !options.keepNames,
+            minifyIdentifiers: !options.keepIdentifierNames,
             minifySyntax: true,
             // NOTE: Disabling whitespace ensures unused pure annotations are kept
             minifyWhitespace: false,
@@ -70,6 +72,10 @@ async function optimizeWithEsbuild(content, name, options) {
             sourcefile: name,
             sourcemap: options.sourcemap && 'external',
             define: options.define,
+            // This option should always be disabled for browser builds as we don't rely on `.name`
+            // and causes deadcode to be retained which makes `NG_BUILD_MANGLE` unusable to investigate tree-shaking issues.
+            // We enable `keepNames` only for server builds as Domino relies on `.name`.
+            // Once we no longer rely on Domino for SSR we should be able to remove this.
             keepNames: options.keepNames,
             target: `es${options.target}`,
         });
@@ -113,6 +119,8 @@ async function optimizeWithTerser(name, code, sourcemaps, target, advanced) {
         ecma: target,
         // esbuild in the first pass is used to minify identifiers instead of mangle here
         mangle: false,
+        // esbuild in the first pass is used to minify function names
+        keep_fnames: true,
         format: {
             // ASCII output is enabled here as well to prevent terser from converting back to UTF-8
             ascii_only: true,

package/src/webpack/plugins/karma/karma.js

@@ -32,7 +32,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const path = __importStar(require("path"));
 const glob = __importStar(require("glob"));
 const webpack_1 = __importDefault(require("webpack"));
-const webpackDevMiddleware = require('webpack-dev-middleware');
+const webpack_dev_middleware_1 = __importDefault(require("webpack-dev-middleware"));
 const stats_1 = require("../../utils/stats");
 const node_1 = require("@angular-devkit/core/node");
 const index_1 = require("../../../utils/index");
@@ -172,7 +172,7 @@ const init = (config, emitter) => {
         }
         unblock();
     });
-    webpackMiddleware = webpackDevMiddleware(compiler, webpackMiddlewareConfig);
+    webpackMiddleware = (0, webpack_dev_middleware_1.default)(compiler, webpackMiddlewareConfig);
     emitter.on('exit', (done) => {
         webpackMiddleware.close();
         done();