@angular-devkit/build-angular 13.1.0-next.1 → 13.1.0

package/src/utils/index-file/augment-index-html.js

@@ -9,6 +9,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.augmentIndexHtml = void 0;
 const crypto_1 = require("crypto");
+const load_esm_1 = require("../load-esm");
 const html_rewriting_stream_1 = require("./html-rewriting-stream");
 /*
  * Helper function used by the IndexHtmlWebpackPlugin.
@@ -18,6 +19,8 @@ const html_rewriting_stream_1 = require("./html-rewriting-stream");
  */
 async function augmentIndexHtml(params) {
     const { loadOutputFile, files, entrypoints, sri, deployUrl = '', lang, baseHref, html } = params;
+    const warnings = [];
+    const errors = [];
     let { crossOrigin = 'none' } = params;
     if (sri && crossOrigin === 'none') {
         crossOrigin = 'anonymous';
@@ -72,6 +75,7 @@ async function augmentIndexHtml(params) {
         }
         linkTags.push(`<link ${attrs.join(' ')}>`);
     }
+    const dir = lang ? await getLanguageDirection(lang, warnings) : undefined;
     const { rewriter, transformedContent } = await (0, html_rewriting_stream_1.htmlRewritingStream)(html);
     const baseTagExists = html.includes('<base');
     rewriter
@@ -82,6 +86,9 @@ async function augmentIndexHtml(params) {
                 if (isString(lang)) {
                     updateAttribute(tag, 'lang', lang);
                 }
+                if (dir) {
+                    updateAttribute(tag, 'dir', dir);
+                }
                 break;
             case 'head':
                 // Base href should be added before any link, meta tags
@@ -119,11 +126,14 @@ async function augmentIndexHtml(params) {
         rewriter.emitEndTag(tag);
     });
     const content = await transformedContent;
-    if (linkTags.length || scriptTags.length) {
-        // In case no body/head tags are not present (dotnet partial templates)
-        return linkTags.join('') + scriptTags.join('') + content;
-    }
-    return content;
+    return {
+        content: linkTags.length || scriptTags.length
+            ? // In case no body/head tags are not present (dotnet partial templates)
+                linkTags.join('') + scriptTags.join('') + content
+            : content,
+        warnings,
+        errors,
+    };
 }
 exports.augmentIndexHtml = augmentIndexHtml;
 function generateSriAttributes(content) {
@@ -144,3 +154,26 @@ function updateAttribute(tag, name, value) {
 function isString(value) {
     return typeof value === 'string';
 }
+async function getLanguageDirection(locale, warnings) {
+    const dir = await getLanguageDirectionFromLocales(locale);
+    if (!dir) {
+        warnings.push(`Locale data for '${locale}' cannot be found. 'dir' attribute will not be set for this locale.`);
+    }
+    return dir;
+}
+async function getLanguageDirectionFromLocales(locale) {
+    try {
+        const localeData = (await (0, load_esm_1.loadEsmModule)(`@angular/common/locales/${locale}`)).default;
+        const dir = localeData[localeData.length - 2];
+        return isString(dir) ? dir : undefined;
+    }
+    catch {
+        // In some cases certain locales might map to files which are named only with language id.
+        // Example: `en-US` -> `en`.
+        const [languageId] = locale.split('-', 1);
+        if (languageId !== locale) {
+            return getLanguageDirectionFromLocales(languageId);
+        }
+    }
+    return undefined;
+}

package/src/utils/read-tsconfig.js

@@ -41,10 +41,7 @@ async function readTsconfig(tsconfigPath, workspaceRoot) {
     // 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 functions needed will be stored in the `default` property.
-    // TODO_ESM: This can be removed once `@angular/compiler-cli` is ESM only.
-    const { formatDiagnostics, readConfiguration } = (compilerCliModule.readConfiguration ? compilerCliModule : compilerCliModule.default);
+    const { formatDiagnostics, readConfiguration } = await (0, load_esm_1.loadEsmModule)('@angular/compiler-cli');
     const configResult = readConfiguration(tsConfigFullPath);
     if (configResult.errors && configResult.errors.length) {
         throw new Error(formatDiagnostics(configResult.errors));

package/src/webpack/configs/common.js

@@ -39,13 +39,15 @@ const webpack_subresource_integrity_1 = require("webpack-subresource-integrity")
 const environment_options_1 = require("../../utils/environment-options");
 const load_esm_1 = require("../../utils/load-esm");
 const plugins_1 = require("../plugins");
+const named_chunks_plugin_1 = require("../plugins/named-chunks-plugin");
 const progress_plugin_1 = require("../plugins/progress-plugin");
+const transfer_size_plugin_1 = require("../plugins/transfer-size-plugin");
 const typescript_2 = require("../plugins/typescript");
 const helpers_1 = require("../utils/helpers");
 // eslint-disable-next-line max-lines-per-function
 async function getCommonConfig(wco) {
     var _a, _b;
-    const { root, projectRoot, buildOptions, tsConfig, projectName, sourceRoot, tsConfigPath } = wco;
+    const { root, projectRoot, buildOptions, tsConfig, projectName, sourceRoot, tsConfigPath, scriptTarget, } = wco;
     const { cache, codeCoverage, crossOrigin = 'none', platform = 'browser', aot = true, codeCoverageExclude = [], main, polyfills, sourceMap: { styles: stylesSourceMap, scripts: scriptsSourceMap, vendor: vendorSourceMap, hidden: hiddenSourceMap, }, optimization: { styles: stylesOptimization, scripts: scriptsOptimization }, commonChunk, vendorChunk, subresourceIntegrity, verbose, poll, webWorkerTsConfig, externalDependencies = [], allowedCommonJsDependencies, bundleDependencies, } = buildOptions;
     const isPlatformServer = buildOptions.platform === 'server';
     const extraPlugins = [];
@@ -54,10 +56,7 @@ async function getCommonConfig(wco) {
     // 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);
+    const { GLOBAL_DEFS_FOR_TERSER, GLOBAL_DEFS_FOR_TERSER_WITH_AOT, VERSION: NG_VERSION, } = await (0, load_esm_1.loadEsmModule)('@angular/compiler-cli');
     // determine hashing format
     const hashFormat = (0, helpers_1.getOutputHashFormat)(buildOptions.outputHashing || 'none');
     if (buildOptions.progress) {
@@ -91,11 +90,6 @@ async function getCommonConfig(wco) {
             }
         }
     }
-    if (environment_options_1.profilingEnabled) {
-        extraPlugins.push(new webpack_2.debug.ProfilingPlugin({
-            outputPath: path.resolve(root, 'chrome-profiler-events.json'),
-        }));
-    }
     if (allowedCommonJsDependencies) {
         // When this is not defined it means the builder doesn't support showing common js usages.
         // When it does it will be an array.
@@ -188,8 +182,10 @@ async function getCommonConfig(wco) {
     }
     if (main || polyfills) {
         extraRules.push({
-            test: /\.[cm]?[tj]sx?$/,
+            test: tsConfig.options.allowJs ? /\.[cm]?[tj]sx?$/ : /\.[cm]?tsx?$/,
             loader: webpack_1.AngularWebpackLoaderPath,
+            // The below are known paths that are not part of the TypeScript compilation even when allowJs is enabled.
+            exclude: [/[/\\](?:css-loader|mini-css-extract-plugin|webpack-dev-server|webpack)[/\\]/],
         });
         extraPlugins.push((0, typescript_2.createIvyPlugin)(wco, aot, tsConfigPath));
     }
@@ -201,12 +197,15 @@ async function getCommonConfig(wco) {
         extraMinimizers.push(new plugins_1.JavaScriptOptimizerPlugin({
             define: buildOptions.aot ? GLOBAL_DEFS_FOR_TERSER_WITH_AOT : GLOBAL_DEFS_FOR_TERSER,
             sourcemap: scriptsSourceMap,
-            target: wco.scriptTarget,
+            target: scriptTarget,
             keepNames: !environment_options_1.allowMangle || isPlatformServer,
             removeLicenses: buildOptions.extractLicenses,
             advanced: buildOptions.buildOptimizer,
         }));
     }
+    if (platform === 'browser' && (scriptsOptimization || stylesOptimization.minify)) {
+        extraMinimizers.push(new transfer_size_plugin_1.TransferSizePlugin());
+    }
     const externals = [...externalDependencies];
     if (isPlatformServer && !bundleDependencies) {
         externals.push(({ context, request }, callback) => (0, helpers_1.externalizePackages)(context !== null && context !== void 0 ? context : wco.projectRoot, request, callback));
@@ -223,7 +222,7 @@ async function getCommonConfig(wco) {
         devtool: false,
         target: [
             isPlatformServer ? 'node' : 'web',
-            tsConfig.options.target === typescript_1.ScriptTarget.ES5 ? 'es5' : 'es2015',
+            scriptTarget === typescript_1.ScriptTarget.ES5 ? 'es5' : 'es2015',
         ],
         profile: buildOptions.statsJson,
         resolve: {
@@ -231,10 +230,7 @@ async function getCommonConfig(wco) {
             extensions: ['.ts', '.tsx', '.mjs', '.js'],
             symlinks: !buildOptions.preserveSymlinks,
             modules: [tsConfig.options.baseUrl || projectRoot, 'node_modules'],
-            mainFields: isPlatformServer
-                ? ['es2015', 'module', 'main']
-                : ['es2020', 'es2015', 'browser', 'module', 'main'],
-            conditionNames: isPlatformServer ? ['es2015', '...'] : ['es2020', 'es2015', '...'],
+            ...(0, helpers_1.getMainFieldsAndConditionNames)(scriptTarget, isPlatformServer),
         },
         resolveLoader: {
             symlinks: !buildOptions.preserveSymlinks,
@@ -258,7 +254,7 @@ async function getCommonConfig(wco) {
         watch: buildOptions.watch,
         watchOptions: {
             poll,
-            ignored: poll === undefined ? undefined : 'node_modules/**',
+            ignored: poll === undefined ? undefined : '**/node_modules/**',
         },
         performance: {
             hints: false,
@@ -284,6 +280,12 @@ async function getCommonConfig(wco) {
                 }
                 : undefined,
             rules: [
+                {
+                    test: /\.?(svg|html)$/,
+                    // Only process HTML and SVG which are known Angular component resources.
+                    resourceQuery: /\?ngResource/,
+                    type: 'asset/source',
+                },
                 {
                     // Mark files inside `rxjs/add` as containing side effects.
                     // If this is fixed upstream and the fixed version becomes the minimum
@@ -301,7 +303,7 @@ async function getCommonConfig(wco) {
                             loader: require.resolve('../../babel/webpack-loader'),
                             options: {
                                 cacheDirectory: (cache.enabled && path.join(cache.path, 'babel-webpack')) || false,
-                                scriptTarget: wco.scriptTarget,
+                                scriptTarget,
                                 aot: buildOptions.aot,
                                 optimize: buildOptions.buildOptimizer,
                                 instrumentCode: codeCoverage
@@ -318,6 +320,7 @@ async function getCommonConfig(wco) {
             ],
         },
         experiments: {
+            backCompat: false,
             syncWebAssembly: true,
             asyncWebAssembly: true,
         },
@@ -357,7 +360,7 @@ async function getCommonConfig(wco) {
                 },
             },
         },
-        plugins: [new plugins_1.DedupeModuleResolvePlugin({ verbose }), ...extraPlugins],
+        plugins: [new named_chunks_plugin_1.NamedChunksPlugin(), new plugins_1.DedupeModuleResolvePlugin({ verbose }), ...extraPlugins],
         node: false,
     };
 }

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

@@ -30,7 +30,7 @@ exports.buildServePath = exports.getDevServerConfig = void 0;
 const core_1 = require("@angular-devkit/core");
 const fs_1 = require("fs");
 const path_1 = require("path");
-const url = __importStar(require("url"));
+const url_1 = 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");
@@ -78,7 +78,7 @@ async function getDevServerConfig(wco) {
                 rewrites: [
                     {
                         from: new RegExp(`^(?!${servePath})/.*`),
-                        to: (context) => url.format(context.parsedUrl),
+                        to: (context) => context.parsedUrl.href,
                     },
                 ],
             },
@@ -89,7 +89,7 @@ async function getDevServerConfig(wco) {
             },
             compress: false,
             static: false,
-            https: getSslConfig(root, wco.buildOptions),
+            server: getServerConfig(root, wco.buildOptions),
             allowedHosts: getAllowedHostsConfig(wco.buildOptions),
             devMiddleware: {
                 publicPath: servePath,
@@ -139,15 +139,20 @@ exports.buildServePath = buildServePath;
  * Private method to enhance a webpack config with SSL configuration.
  * @private
  */
-function getSslConfig(root, options) {
+function getServerConfig(root, options) {
     const { ssl, sslCert, sslKey } = options;
-    if (ssl && sslCert && sslKey) {
-        return {
-            key: (0, path_1.resolve)(root, sslKey),
-            cert: (0, path_1.resolve)(root, sslCert),
-        };
+    if (!ssl) {
+        return 'http';
     }
-    return ssl;
+    return {
+        type: 'https',
+        options: sslCert && sslKey
+            ? {
+                key: (0, path_1.resolve)(root, sslKey),
+                cert: (0, path_1.resolve)(root, sslCert),
+            }
+            : undefined,
+    };
 }
 /**
  * Private method to enhance a webpack config with Proxy configuration.
@@ -158,21 +163,71 @@ async function addProxyConfig(root, proxyConfig) {
         return undefined;
     }
     const proxyPath = (0, path_1.resolve)(root, proxyConfig);
-    if ((0, fs_1.existsSync)(proxyPath)) {
-        try {
-            return require(proxyPath);
+    if (!(0, fs_1.existsSync)(proxyPath)) {
+        throw new Error(`Proxy configuration file ${proxyPath} does not exist.`);
+    }
+    switch ((0, path_1.extname)(proxyPath)) {
+        case '.json': {
+            const content = await fs_1.promises.readFile(proxyPath, 'utf-8');
+            const { parse, printParseErrorCode } = await Promise.resolve().then(() => __importStar(require('jsonc-parser')));
+            const parseErrors = [];
+            const proxyConfiguration = parse(content, parseErrors, { allowTrailingComma: true });
+            if (parseErrors.length > 0) {
+                let errorMessage = `Proxy configuration file ${proxyPath} contains parse errors:`;
+                for (const parseError of parseErrors) {
+                    const { line, column } = getJsonErrorLineColumn(parseError.offset, content);
+                    errorMessage += `\n[${line}, ${column}] ${printParseErrorCode(parseError.error)}`;
+                }
+                throw new Error(errorMessage);
+            }
+            return proxyConfiguration;
         }
-        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;
+        case '.mjs':
+            // 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)((0, url_1.pathToFileURL)(proxyPath))).default;
+        case '.cjs':
+            return require(proxyPath);
+        default:
+            // The file could be either CommonJS or ESM.
+            // CommonJS is tried first then ESM if loading fails.
+            try {
+                return require(proxyPath);
             }
-            throw e;
+            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)((0, url_1.pathToFileURL)(proxyPath))).default;
+                }
+                throw e;
+            }
+    }
+}
+/**
+ * Calculates the line and column for an error offset in the content of a JSON file.
+ * @param location The offset error location from the beginning of the content.
+ * @param content The full content of the file containing the error.
+ * @returns An object containing the line and column
+ */
+function getJsonErrorLineColumn(offset, content) {
+    if (offset === 0) {
+        return { line: 1, column: 1 };
+    }
+    let line = 0;
+    let position = 0;
+    // eslint-disable-next-line no-constant-condition
+    while (true) {
+        ++line;
+        const nextNewline = content.indexOf('\n', position);
+        if (nextNewline === -1 || nextNewline > offset) {
+            break;
         }
+        position = nextNewline + 1;
     }
-    throw new Error('Proxy config file ' + proxyPath + ' does not exist.');
+    return { line, column: offset - position + 1 };
 }
 /**
  * Find the default server path. We don't want to expose baseHref and deployUrl as arguments, only
@@ -219,10 +274,8 @@ function getAllowedHostsConfig(options) {
 function getPublicHostOptions(options, webSocketPath) {
     let publicHost = options.publicHost;
     if (publicHost) {
-        if (!/^\w+:\/\//.test(publicHost)) {
-            publicHost = `https://${publicHost}`;
-        }
-        publicHost = url.parse(publicHost).host;
+        const hostWithProtocol = !/^\w+:\/\//.test(publicHost) ? `https://${publicHost}` : publicHost;
+        publicHost = new url_1.URL(hostWithProtocol).host;
     }
     return `auto://${publicHost || '0.0.0.0:0'}${webSocketPath}`;
 }

package/src/webpack/configs/styles.js

@@ -91,14 +91,16 @@ function getStylesConfig(wco) {
         wco.logger.warn('Stylus usage is deprecated and will be removed in a future major version. ' +
             'To opt-out of the deprecated behaviour, please migrate to another stylesheet language.');
     }
-    const sassImplementation = new sass_service_1.SassWorkerImplementation();
-    extraPlugins.push({
-        apply(compiler) {
-            compiler.hooks.shutdown.tap('sass-worker', () => {
-                sassImplementation === null || sassImplementation === void 0 ? void 0 : sassImplementation.close();
-            });
-        },
-    });
+    const sassImplementation = getSassImplementation();
+    if (sassImplementation instanceof sass_service_1.SassWorkerImplementation) {
+        extraPlugins.push({
+            apply(compiler) {
+                compiler.hooks.shutdown.tap('sass-worker', () => {
+                    sassImplementation === null || sassImplementation === void 0 ? void 0 : sassImplementation.close();
+                });
+            },
+        });
+    }
     const assetNameTemplate = (0, helpers_1.assetNameTemplateFactory)(hashFormat);
     const extraPostcssPlugins = [];
     // Attempt to setup Tailwind CSS
@@ -340,14 +342,14 @@ function getStylesConfig(wco) {
                         oneOf: [
                             // Component styles are all styles except defined global styles
                             {
-                                exclude: globalStylePaths,
                                 use: componentStyleLoaders,
+                                resourceQuery: /\?ngResource/,
                                 type: 'asset/source',
                             },
                             // Global styles are only defined global styles
                             {
-                                include: globalStylePaths,
                                 use: globalStyleLoaders,
+                                resourceQuery: { not: [/\?ngResource/] },
                             },
                         ],
                     },
@@ -368,3 +370,12 @@ function getStylesConfig(wco) {
     };
 }
 exports.getStylesConfig = getStylesConfig;
+function getSassImplementation() {
+    const { webcontainer } = process.versions;
+    // When `webcontainer` is a truthy it means that we are running in a StackBlitz webcontainer.
+    // `SassWorkerImplementation` uses `receiveMessageOnPort` Node.js `worker_thread` API to ensure sync behavior which is ~2x faster.
+    // However, it is non trivial to support this in a webcontainer and while slower we choose to use `dart-sass`
+    // which in Webpack uses the slower async path.
+    // We should periodically check with StackBlitz folks (Mark Whitfeld / Dominic Elm) to determine if this workaround is still needed.
+    return webcontainer ? require('sass') : new sass_service_1.SassWorkerImplementation();
+}

package/src/webpack/plugins/named-chunks-plugin.d.ts

@@ -0,0 +1,17 @@
+/**
+ * @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 { Compiler } from 'webpack';
+/**
+ * Webpack will not populate the chunk `name` property unless `webpackChunkName` magic comment is used.
+ * This however will also effect the filename which is not desired when using `deterministic` chunkIds.
+ * This plugin will populate the chunk `name` which is mainly used so that users can set bundle budgets on lazy chunks.
+ */
+export declare class NamedChunksPlugin {
+    apply(compiler: Compiler): void;
+    private generateName;
+}

package/src/webpack/plugins/named-chunks-plugin.js

@@ -0,0 +1,49 @@
+"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.NamedChunksPlugin = void 0;
+const webpack_1 = require("webpack");
+// `ImportDependency` is not part of Webpack's depenencies typings.
+const ImportDependency = require('webpack/lib/dependencies/ImportDependency');
+const PLUGIN_NAME = 'named-chunks-plugin';
+/**
+ * Webpack will not populate the chunk `name` property unless `webpackChunkName` magic comment is used.
+ * This however will also effect the filename which is not desired when using `deterministic` chunkIds.
+ * This plugin will populate the chunk `name` which is mainly used so that users can set bundle budgets on lazy chunks.
+ */
+class NamedChunksPlugin {
+    apply(compiler) {
+        compiler.hooks.compilation.tap(PLUGIN_NAME, (compilation) => {
+            compilation.hooks.chunkAsset.tap(PLUGIN_NAME, (chunk) => {
+                if (chunk.name) {
+                    return;
+                }
+                const name = this.generateName(chunk);
+                if (name) {
+                    chunk.name = name;
+                }
+            });
+        });
+    }
+    generateName(chunk) {
+        for (const group of chunk.groupsIterable) {
+            const [block] = group.getBlocks();
+            if (!(block instanceof webpack_1.AsyncDependenciesBlock)) {
+                continue;
+            }
+            for (const dependency of block.dependencies) {
+                if (dependency instanceof ImportDependency) {
+                    return webpack_1.Template.toPath(dependency.request);
+                }
+            }
+        }
+        return undefined;
+    }
+}
+exports.NamedChunksPlugin = NamedChunksPlugin;

package/src/webpack/plugins/transfer-size-plugin.d.ts

@@ -0,0 +1,12 @@
+/**
+ * @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 { Compiler } from 'webpack';
+export declare class TransferSizePlugin {
+    constructor();
+    apply(compiler: Compiler): void;
+}

package/src/webpack/plugins/transfer-size-plugin.js

@@ -0,0 +1,47 @@
+"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.TransferSizePlugin = void 0;
+const util_1 = require("util");
+const zlib_1 = require("zlib");
+const brotliCompressAsync = (0, util_1.promisify)(zlib_1.brotliCompress);
+const PLUGIN_NAME = 'angular-transfer-size-estimator';
+class TransferSizePlugin {
+    constructor() { }
+    apply(compiler) {
+        compiler.hooks.thisCompilation.tap(PLUGIN_NAME, (compilation) => {
+            compilation.hooks.processAssets.tapPromise({
+                name: PLUGIN_NAME,
+                stage: compiler.webpack.Compilation.PROCESS_ASSETS_STAGE_ANALYSE,
+            }, async (compilationAssets) => {
+                const actions = [];
+                for (const assetName of Object.keys(compilationAssets)) {
+                    if (!assetName.endsWith('.js') && !assetName.endsWith('.css')) {
+                        continue;
+                    }
+                    const scriptAsset = compilation.getAsset(assetName);
+                    if (!scriptAsset || scriptAsset.source.size() <= 0) {
+                        continue;
+                    }
+                    actions.push(brotliCompressAsync(scriptAsset.source.source())
+                        .then((result) => {
+                        compilation.updateAsset(assetName, (s) => s, {
+                            estimatedTransferSize: result.length,
+                        });
+                    })
+                        .catch((error) => {
+                        compilation.warnings.push(new compilation.compiler.webpack.WebpackError(`Unable to calculate estimated transfer size for '${assetName}'. Reason: ${error.message}`));
+                    }));
+                }
+                await Promise.all(actions);
+            });
+        });
+    }
+}
+exports.TransferSizePlugin = TransferSizePlugin;

package/src/webpack/utils/helpers.d.ts

@@ -6,6 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 import type { ObjectPattern } from 'copy-webpack-plugin';
+import { ScriptTarget } from 'typescript';
 import type { Configuration, WebpackOptionsNormalized } from 'webpack';
 import { AssetPatternClass, ExtraEntryPoint, ExtraEntryPointClass } from '../../builders/browser/schema';
 import { WebpackConfigOptions } from '../../utils/build-options';
@@ -30,4 +31,5 @@ export declare function assetPatterns(root: string, assets: AssetPatternClass[])
 export declare function externalizePackages(context: string, request: string | undefined, callback: (error?: Error, result?: string) => void): void;
 declare type WebpackStatsOptions = Exclude<Configuration['stats'], string | boolean>;
 export declare function getStatsOptions(verbose?: boolean): WebpackStatsOptions;
+export declare function getMainFieldsAndConditionNames(target: ScriptTarget, platformServer: boolean): Pick<WebpackOptionsNormalized['resolve'], 'mainFields' | 'conditionNames'>;
 export {};

package/src/webpack/utils/helpers.js

@@ -29,11 +29,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getStatsOptions = exports.externalizePackages = exports.assetPatterns = exports.globalScriptsByBundleName = exports.getCacheSettings = exports.getInstrumentationExcludedPaths = exports.assetNameTemplateFactory = exports.normalizeExtraEntryPoints = exports.getOutputHashFormat = void 0;
+exports.getMainFieldsAndConditionNames = exports.getStatsOptions = exports.externalizePackages = exports.assetPatterns = exports.globalScriptsByBundleName = exports.getCacheSettings = exports.getInstrumentationExcludedPaths = exports.assetNameTemplateFactory = exports.normalizeExtraEntryPoints = exports.getOutputHashFormat = void 0;
 const crypto_1 = require("crypto");
 const fs_1 = require("fs");
 const glob_1 = __importDefault(require("glob"));
 const path = __importStar(require("path"));
+const typescript_1 = require("typescript");
 function getOutputHashFormat(option, length = 20) {
     const hashFormats = {
         none: { chunk: '', extract: '', file: '', script: '' },
@@ -265,3 +266,18 @@ function getStatsOptions(verbose = false) {
         : webpackOutputOptions;
 }
 exports.getStatsOptions = getStatsOptions;
+function getMainFieldsAndConditionNames(target, platformServer) {
+    const mainFields = platformServer
+        ? ['es2015', 'module', 'main']
+        : ['es2015', 'browser', 'module', 'main'];
+    const conditionNames = ['es2015', '...'];
+    if (target >= typescript_1.ScriptTarget.ES2020) {
+        mainFields.unshift('es2020');
+        conditionNames.unshift('es2020');
+    }
+    return {
+        mainFields,
+        conditionNames,
+    };
+}
+exports.getMainFieldsAndConditionNames = getMainFieldsAndConditionNames;

package/src/webpack/utils/stats.d.ts

@@ -9,14 +9,21 @@ import { WebpackLoggingCallback } from '@angular-devkit/build-webpack';
 import { logging } from '@angular-devkit/core';
 import { Configuration, StatsCompilation } from 'webpack';
 import { Schema as BrowserBuilderOptions } from '../../builders/browser/schema';
+import { BudgetCalculatorResult } from '../../utils/bundle-calculator';
 export declare function formatSize(size: number): string;
-export declare type BundleStatsData = [files: string, names: string, size: number | string];
+export declare type BundleStatsData = [
+    files: string,
+    names: string,
+    rawSize: number | string,
+    estimatedTransferSize: number | string
+];
 export interface BundleStats {
     initial: boolean;
     stats: BundleStatsData;
 }
 export declare function generateBundleStats(info: {
-    size?: number;
+    rawSize?: number;
+    estimatedTransferSize?: number;
     files?: string[];
     names?: string[];
     initial?: boolean;
@@ -27,4 +34,4 @@ export declare function statsErrorsToString(json: StatsCompilation, statsConfig:
 export declare function statsHasErrors(json: StatsCompilation): boolean;
 export declare function statsHasWarnings(json: StatsCompilation): boolean;
 export declare function createWebpackLoggingCallback(options: BrowserBuilderOptions, logger: logging.LoggerApi): WebpackLoggingCallback;
-export declare function webpackStatsLogger(logger: logging.LoggerApi, json: StatsCompilation, config: Configuration, bundleStats?: BundleStats[]): void;
+export declare function webpackStatsLogger(logger: logging.LoggerApi, json: StatsCompilation, config: Configuration, budgetFailures?: BudgetCalculatorResult[]): void;