@angular-devkit/build-angular 13.1.0-rc.0 → 13.1.3

package/package.json

@@ -1,15 +1,15 @@
 {
   "name": "@angular-devkit/build-angular",
-  "version": "13.1.0-rc.0",
+  "version": "13.1.3",
   "description": "Angular Webpack Build Facade",
   "main": "src/index.js",
   "typings": "src/index.d.ts",
   "builders": "builders.json",
   "dependencies": {
     "@ampproject/remapping": "1.0.2",
-    "@angular-devkit/architect": "0.1301.0-rc.0",
-    "@angular-devkit/build-webpack": "0.1301.0-rc.0",
-    "@angular-devkit/core": "13.1.0-rc.0",
+    "@angular-devkit/architect": "0.1301.3",
+    "@angular-devkit/build-webpack": "0.1301.3",
+    "@angular-devkit/core": "13.1.3",
     "@babel/core": "7.16.0",
     "@babel/generator": "7.16.0",
     "@babel/helper-annotate-as-pure": "7.16.0",
@@ -20,7 +20,7 @@
     "@babel/runtime": "7.16.3",
     "@babel/template": "7.16.0",
     "@discoveryjs/json-ext": "0.5.6",
-    "@ngtools/webpack": "13.1.0-rc.0",
+    "@ngtools/webpack": "13.1.3",
     "ansi-colors": "4.1.1",
     "babel-loader": "8.2.3",
     "babel-plugin-istanbul": "6.1.1",
@@ -29,9 +29,9 @@
     "circular-dependency-plugin": "5.2.2",
     "copy-webpack-plugin": "10.0.0",
     "core-js": "3.19.3",
-    "critters": "0.0.15",
+    "critters": "0.0.16",
     "css-loader": "6.5.1",
-    "esbuild-wasm": "0.14.2",
+    "esbuild-wasm": "0.14.11",
     "glob": "7.2.0",
     "https-proxy-agent": "5.0.0",
     "inquirer": "8.2.0",
@@ -72,7 +72,7 @@
     "webpack-subresource-integrity": "5.0.0"
   },
   "optionalDependencies": {
-    "esbuild": "0.14.2"
+    "esbuild": "0.14.11"
   },
   "peerDependencies": {
     "@angular/compiler-cli": "^13.0.0 || ^13.1.0-next",
@@ -81,7 +81,7 @@
     "karma": "^6.3.0",
     "ng-packagr": "^13.0.0 || ^13.1.0-next",
     "protractor": "^7.0.0",
-    "tailwindcss": "^2.0.0",
+    "tailwindcss": "^2.0.0 || ^3.0.0",
     "typescript": ">=4.4.3 <4.6"
   },
   "peerDependenciesMeta": {

package/src/babel/webpack-loader.js

@@ -14,6 +14,7 @@ const remapping_1 = __importDefault(require("@ampproject/remapping"));
 const babel_loader_1 = require("babel-loader");
 const typescript_1 = require("typescript");
 const load_esm_1 = require("../utils/load-esm");
+const package_version_1 = require("../utils/package-version");
 /**
  * Cached instance of the compiler-cli linker's needsLinking function.
  */
@@ -151,7 +152,7 @@ exports.default = (0, babel_loader_1.custom)(() => {
                 ...baseOptions,
                 ...rawOptions,
                 cacheIdentifier: JSON.stringify({
-                    buildAngular: require('../../package.json').version,
+                    buildAngular: package_version_1.VERSION,
                     customOptions,
                     baseOptions,
                     rawOptions,

package/src/builders/browser/index.d.ts

@@ -24,6 +24,11 @@ export declare type BrowserBuilderOutput = json.JsonObject & BuilderOutput & {
      */
     outputPath: string;
 };
+/**
+ * Maximum time in milliseconds for single build/rebuild
+ * This accounts for CI variability.
+ */
+export declare const BUILD_TIMEOUT = 30000;
 /**
  * @experimental Direct usage of this function is considered experimental.
  */

package/src/builders/browser/index.js

@@ -26,7 +26,7 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.buildWebpackBrowser = void 0;
+exports.buildWebpackBrowser = exports.BUILD_TIMEOUT = void 0;
 const architect_1 = require("@angular-devkit/architect");
 const build_webpack_1 = require("@angular-devkit/build-webpack");
 const core_1 = require("@angular-devkit/core");
@@ -44,6 +44,7 @@ const index_html_generator_1 = require("../../utils/index-file/index-html-genera
 const normalize_cache_1 = require("../../utils/normalize-cache");
 const output_paths_1 = require("../../utils/output-paths");
 const package_chunk_sort_1 = require("../../utils/package-chunk-sort");
+const purge_cache_1 = require("../../utils/purge-cache");
 const service_worker_1 = require("../../utils/service-worker");
 const spinner_1 = require("../../utils/spinner");
 const supported_browsers_1 = require("../../utils/supported-browsers");
@@ -53,6 +54,11 @@ const configs_1 = require("../../webpack/configs");
 const async_chunks_1 = require("../../webpack/utils/async-chunks");
 const helpers_1 = require("../../webpack/utils/helpers");
 const stats_1 = require("../../webpack/utils/stats");
+/**
+ * Maximum time in milliseconds for single build/rebuild
+ * This accounts for CI variability.
+ */
+exports.BUILD_TIMEOUT = 30000;
 async function initialize(options, context, webpackConfigurationTransform) {
     var _a, _b;
     const originalOutputPath = options.outputPath;
@@ -98,6 +104,8 @@ function buildWebpackBrowser(options, context, transforms = {}) {
     return (0, rxjs_1.from)(context.getProjectMetadata(projectName)).pipe((0, operators_1.switchMap)(async (projectMetadata) => {
         var _a;
         const sysProjectRoot = (0, core_1.getSystemPath)((0, core_1.resolve)((0, core_1.normalize)(context.workspaceRoot), (0, core_1.normalize)((_a = projectMetadata.root) !== null && _a !== void 0 ? _a : '')));
+        // Purge old build disk cache.
+        await (0, purge_cache_1.purgeStaleBuildCache)(context);
         checkInternetExplorerSupport(sysProjectRoot, context.logger);
         return {
             ...(await initialize(options, context, transforms.webpackConfiguration)),

package/src/builders/dev-server/index.js

@@ -41,6 +41,7 @@ const i18n_options_1 = require("../../utils/i18n-options");
 const load_translations_1 = require("../../utils/load-translations");
 const normalize_cache_1 = require("../../utils/normalize-cache");
 const package_chunk_sort_1 = require("../../utils/package-chunk-sort");
+const purge_cache_1 = require("../../utils/purge-cache");
 const version_1 = require("../../utils/version");
 const webpack_browser_config_1 = require("../../utils/webpack-browser-config");
 const webpack_diagnostics_1 = require("../../utils/webpack-diagnostics");
@@ -69,6 +70,8 @@ function serveWebpackBrowser(options, context, transforms = {}) {
         if (!projectName) {
             throw new Error('The builder requires a target.');
         }
+        // Purge old build disk cache.
+        await (0, purge_cache_1.purgeStaleBuildCache)(context);
         options.port = await (0, check_port_1.checkPort)((_b = options.port) !== null && _b !== void 0 ? _b : 4200, options.host || 'localhost');
         if (options.hmr) {
             logger.warn(core_1.tags.stripIndents `NOTICE: Hot Module Replacement (HMR) is enabled for the dev server.
@@ -286,6 +289,7 @@ async function setupLocalize(locale, i18n, browserOptions, webpackConfig, cacheO
     webpackConfig.plugins.push({
         apply: (compiler) => {
             compiler.hooks.thisCompilation.tap('build-angular', (compilation) => {
+                var _a;
                 if (i18n.shouldInline && i18nLoaderOptions.translation === undefined) {
                     // Reload translations
                     (0, i18n_options_1.loadTranslations)(locale, localeDescription, context.workspaceRoot, loader, {
@@ -296,7 +300,7 @@ async function setupLocalize(locale, i18n, browserOptions, webpackConfig, cacheO
                             (0, webpack_diagnostics_1.addError)(compilation, message);
                         },
                     });
-                    i18nLoaderOptions.translation = localeDescription.translation;
+                    i18nLoaderOptions.translation = (_a = localeDescription.translation) !== null && _a !== void 0 ? _a : {};
                 }
                 compilation.hooks.finishModules.tap('build-angular', () => {
                     // After loaders are finished, clear out the now unneeded translations

package/src/builders/extract-i18n/index.js

@@ -37,6 +37,7 @@ const path = __importStar(require("path"));
 const webpack_1 = __importDefault(require("webpack"));
 const i18n_options_1 = require("../../utils/i18n-options");
 const load_esm_1 = require("../../utils/load-esm");
+const purge_cache_1 = require("../../utils/purge-cache");
 const version_1 = require("../../utils/version");
 const webpack_browser_config_1 = require("../../utils/webpack-browser-config");
 const configs_1 = require("../../webpack/configs");
@@ -119,6 +120,8 @@ async function execute(options, context, transforms) {
     var _a;
     // Check Angular version.
     (0, version_1.assertCompatibleAngularVersion)(context.workspaceRoot);
+    // Purge old build disk cache.
+    await (0, purge_cache_1.purgeStaleBuildCache)(context);
     const browserTarget = (0, architect_1.targetFromTargetString)(options.browserTarget);
     const browserOptions = await context.validateOptions(await context.getTargetOptions(browserTarget), await context.getBuilderNameForTarget(browserTarget));
     const format = normalizeFormatOption(options);

package/src/builders/karma/index.js

@@ -32,6 +32,7 @@ const core_1 = require("@angular-devkit/core");
 const path_1 = require("path");
 const rxjs_1 = require("rxjs");
 const operators_1 = require("rxjs/operators");
+const purge_cache_1 = require("../../utils/purge-cache");
 const version_1 = require("../../utils/version");
 const webpack_browser_config_1 = require("../../utils/webpack-browser-config");
 const configs_1 = require("../../webpack/configs");
@@ -39,6 +40,8 @@ const single_test_transform_1 = require("../../webpack/plugins/single-test-trans
 const schema_1 = require("../browser/schema");
 const find_tests_1 = require("./find-tests");
 async function initialize(options, context, webpackConfigurationTransformer) {
+    // Purge old build disk cache.
+    await (0, purge_cache_1.purgeStaleBuildCache)(context);
     const { config } = await (0, webpack_browser_config_1.generateBrowserWebpackConfigFromContext)(
     // only two properties are missing:
     // * `outputPath` which is fixed for tests

package/src/builders/ng-packagr/index.js

@@ -32,12 +32,15 @@ const path_1 = require("path");
 const rxjs_1 = require("rxjs");
 const operators_1 = require("rxjs/operators");
 const normalize_cache_1 = require("../../utils/normalize-cache");
+const purge_cache_1 = require("../../utils/purge-cache");
 /**
  * @experimental Direct usage of this function is considered experimental.
  */
 function execute(options, context) {
     return (0, rxjs_1.from)((async () => {
         var _a;
+        // Purge old build disk cache.
+        await (0, purge_cache_1.purgeStaleBuildCache)(context);
         const root = context.workspaceRoot;
         const packager = (await Promise.resolve().then(() => __importStar(require('ng-packagr')))).ngPackagr();
         packager.forProject((0, path_1.resolve)(root, options.project));

package/src/builders/server/index.js

@@ -37,6 +37,7 @@ const typescript_1 = require("typescript");
 const utils_1 = require("../../utils");
 const i18n_inlining_1 = require("../../utils/i18n-inlining");
 const output_paths_1 = require("../../utils/output-paths");
+const purge_cache_1 = require("../../utils/purge-cache");
 const version_1 = require("../../utils/version");
 const webpack_browser_config_1 = require("../../utils/webpack-browser-config");
 const configs_1 = require("../../webpack/configs");
@@ -103,6 +104,8 @@ function execute(options, context, transforms = {}) {
 exports.execute = execute;
 exports.default = (0, architect_1.createBuilder)(execute);
 async function initialize(options, context, webpackConfigurationTransform) {
+    // Purge old build disk cache.
+    await (0, purge_cache_1.purgeStaleBuildCache)(context);
     const originalOutputPath = options.outputPath;
     const { config, i18n, target } = await (0, webpack_browser_config_1.generateI18nBrowserWebpackConfigFromContext)({
         ...options,

package/src/utils/i18n-inlining.js

@@ -51,24 +51,10 @@ function emittedFilesToInlineOptions(emittedFiles, scriptsEntryPointName, emitte
             setLocale: emittedFile.name === 'main' || emittedFile.name === 'vendor',
         };
         originalFiles.push(originalPath);
-        // Remove temporary original file as the content has now been read
-        try {
-            fs.unlinkSync(originalPath);
-        }
-        catch (e) {
-            context.logger.debug(`Unable to delete i18n temporary file [${originalPath}]: ${e.toString()}`);
-        }
         try {
             const originalMapPath = originalPath + '.map';
             action.map = fs.readFileSync(originalMapPath, 'utf8');
             originalFiles.push(originalMapPath);
-            // Remove temporary original map file as the content has now been read
-            try {
-                fs.unlinkSync(originalMapPath);
-            }
-            catch (e) {
-                context.logger.debug(`Unable to delete i18n temporary file [${originalMapPath}]: ${e.toString()}`);
-            }
         }
         catch (err) {
             if (err.code !== 'ENOENT') {

package/src/utils/i18n-options.js

@@ -176,12 +176,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 +200,22 @@ function findLocaleDataPath(locale, resolver) {
         return null;
     }
 }
+/** 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) {
+    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 +232,20 @@ 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) {
+                if (translations[id] !== undefined) {
                     logger.warn(`WARNING [${file.path}]: Duplicate translations for message '${id}' when merging`);
                 }
-                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,
         }));

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

@@ -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/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) {
@@ -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;
+    /**
+     * 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

@@ -61,7 +61,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 +70,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 +117,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/utils/helpers.js

@@ -35,18 +35,19 @@ const fs_1 = require("fs");
 const glob_1 = __importDefault(require("glob"));
 const path = __importStar(require("path"));
 const typescript_1 = require("typescript");
+const package_version_1 = require("../../utils/package-version");
 function getOutputHashFormat(option, length = 20) {
     const hashFormats = {
         none: { chunk: '', extract: '', file: '', script: '' },
         media: { chunk: '', extract: '', file: `.[hash:${length}]`, script: '' },
         bundles: {
-            chunk: `.[chunkhash:${length}]`,
+            chunk: `.[contenthash:${length}]`,
             extract: `.[contenthash:${length}]`,
             file: '',
             script: `.[hash:${length}]`,
         },
         all: {
-            chunk: `.[chunkhash:${length}]`,
+            chunk: `.[contenthash:${length}]`,
             extract: `.[contenthash:${length}]`,
             file: `.[hash:${length}]`,
             script: `.[hash:${length}]`,
@@ -113,9 +114,9 @@ exports.getInstrumentationExcludedPaths = getInstrumentationExcludedPaths;
 function getCacheSettings(wco, angularVersion) {
     const { enabled, path: cacheDirectory } = wco.buildOptions.cache;
     if (enabled) {
-        const packageVersion = require('../../../package.json').version;
         return {
             type: 'filesystem',
+            profile: wco.buildOptions.verbose,
             cacheDirectory: path.join(cacheDirectory, 'angular-webpack'),
             maxMemoryGenerations: 1,
             // We use the versions and build options as the cache name. The Webpack configurations are too
@@ -123,7 +124,7 @@ function getCacheSettings(wco, angularVersion) {
             // None of which are "named".
             name: (0, crypto_1.createHash)('sha1')
                 .update(angularVersion)
-                .update(packageVersion)
+                .update(package_version_1.VERSION)
                 .update(wco.projectRoot)
                 .update(JSON.stringify(wco.tsConfig))
                 .update(JSON.stringify({