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

package/src/webpack/configs/styles.js

@@ -30,7 +30,6 @@ exports.getStylesConfig = void 0;
 const fs = __importStar(require("fs"));
 const path = __importStar(require("path"));
 const sass_service_1 = require("../../sass/sass-service");
-const build_browser_features_1 = require("../../utils/build-browser-features");
 const plugins_1 = require("../plugins");
 const css_optimizer_plugin_1 = require("../plugins/css-optimizer-plugin");
 const helpers_1 = require("../utils/helpers");
@@ -92,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
@@ -134,9 +135,8 @@ function getStylesConfig(wco) {
             extraPostcssPlugins.push(require(tailwindPackagePath)({ config: tailwindConfigPath }));
         }
     }
-    const { supportedBrowsers } = new build_browser_features_1.BuildBrowserFeatures(wco.projectRoot);
     const postcssPresetEnvPlugin = postcssPresetEnv({
-        browsers: supportedBrowsers,
+        browsers: buildOptions.supportedBrowsers,
         autoprefixer: true,
         stage: 3,
     });
@@ -342,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/] },
                             },
                         ],
                     },
@@ -361,7 +361,7 @@ function getStylesConfig(wco) {
             minimizer: buildOptions.optimization.styles.minify
                 ? [
                     new css_optimizer_plugin_1.CssOptimizerPlugin({
-                        supportedBrowsers,
+                        supportedBrowsers: buildOptions.supportedBrowsers,
                     }),
                 ]
                 : undefined,
@@ -370,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/hmr/hmr-accept.js

@@ -140,7 +140,6 @@ function restoreFormValues(oldInputs, oldOptions) {
                 case 'date':
                 case 'datetime-local':
                 case 'email':
-                case 'file':
                 case 'hidden':
                 case 'month':
                 case 'number':
@@ -155,6 +154,10 @@ function restoreFormValues(oldInputs, oldOptions) {
                 case 'week':
                     newElement.value = oldElement.value;
                     break;
+                case 'file':
+                    // Ignored due: Uncaught DOMException: Failed to set the 'value' property on 'HTMLInputElement':
+                    // This input element accepts a filename, which may only be programmatically set to the empty string.
+                    break;
                 default:
                     console.warn('[NG HMR] Unknown input type ' + oldElement.type + '.');
                     continue;

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';
@@ -20,7 +21,7 @@ export declare type NormalizedEntryPoint = Required<ExtraEntryPointClass>;
 export declare function normalizeExtraEntryPoints(extraEntryPoints: ExtraEntryPoint[], defaultBundleName: string): NormalizedEntryPoint[];
 export declare function assetNameTemplateFactory(hashFormat: HashFormat): (resourcePath: string) => string;
 export declare function getInstrumentationExcludedPaths(sourceRoot: string, excludedPaths: string[]): Set<string>;
-export declare function getCacheSettings(wco: WebpackConfigOptions, supportedBrowsers: string[], angularVersion: string): WebpackOptionsNormalized['cache'];
+export declare function getCacheSettings(wco: WebpackConfigOptions, angularVersion: string): WebpackOptionsNormalized['cache'];
 export declare function globalScriptsByBundleName(root: string, scripts: ExtraEntryPoint[]): {
     bundleName: string;
     inject: boolean;
@@ -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: '' },
@@ -109,7 +110,7 @@ function getInstrumentationExcludedPaths(sourceRoot, excludedPaths) {
     return excluded;
 }
 exports.getInstrumentationExcludedPaths = getInstrumentationExcludedPaths;
-function getCacheSettings(wco, supportedBrowsers, angularVersion) {
+function getCacheSettings(wco, angularVersion) {
     const { enabled, path: cacheDirectory } = wco.buildOptions.cache;
     if (enabled) {
         const packageVersion = require('../../../package.json').version;
@@ -131,7 +132,6 @@ function getCacheSettings(wco, supportedBrowsers, angularVersion) {
                 // https://github.com/angular/angular-cli/blob/736a5f89deaca85f487b78aec9ff66d4118ceb6a/packages/angular_devkit/build_angular/src/utils/i18n-options.ts#L264-L265
                 outputPath: undefined,
             }))
-                .update(supportedBrowsers.join(''))
                 .digest('hex'),
         };
     }
@@ -266,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;

package/src/webpack/utils/stats.js

@@ -50,35 +50,81 @@ function formatSize(size) {
 exports.formatSize = formatSize;
 function generateBundleStats(info) {
     var _a, _b, _c;
-    const size = typeof info.size === 'number' ? info.size : '-';
+    const rawSize = typeof info.rawSize === 'number' ? info.rawSize : '-';
+    const estimatedTransferSize = typeof info.estimatedTransferSize === 'number' ? info.estimatedTransferSize : '-';
     const files = (_b = (_a = info.files) === null || _a === void 0 ? void 0 : _a.filter((f) => !f.endsWith('.map')).map((f) => path.basename(f)).join(', ')) !== null && _b !== void 0 ? _b : '';
     const names = ((_c = info.names) === null || _c === void 0 ? void 0 : _c.length) ? info.names.join(', ') : '-';
     const initial = !!info.initial;
     return {
         initial,
-        stats: [files, names, size],
+        stats: [files, names, rawSize, estimatedTransferSize],
     };
 }
 exports.generateBundleStats = generateBundleStats;
-function generateBuildStatsTable(data, colors, showTotalSize) {
+function generateBuildStatsTable(data, colors, showTotalSize, showEstimatedTransferSize, budgetFailures) {
     const g = (x) => (colors ? color_1.colors.greenBright(x) : x);
     const c = (x) => (colors ? color_1.colors.cyanBright(x) : x);
+    const r = (x) => (colors ? color_1.colors.redBright(x) : x);
+    const y = (x) => (colors ? color_1.colors.yellowBright(x) : x);
     const bold = (x) => (colors ? color_1.colors.bold(x) : x);
     const dim = (x) => (colors ? color_1.colors.dim(x) : x);
+    const getSizeColor = (name, file, defaultColor = c) => {
+        const severity = budgets.get(name) || (file && budgets.get(file));
+        switch (severity) {
+            case 'warning':
+                return y;
+            case 'error':
+                return r;
+            default:
+                return defaultColor;
+        }
+    };
     const changedEntryChunksStats = [];
     const changedLazyChunksStats = [];
-    let initialTotalSize = 0;
+    let initialTotalRawSize = 0;
+    let initialTotalEstimatedTransferSize;
+    const budgets = new Map();
+    if (budgetFailures) {
+        for (const { label, severity } of budgetFailures) {
+            // In some cases a file can have multiple budget failures.
+            // Favor error.
+            if (label && (!budgets.has(label) || budgets.get(label) === 'warning')) {
+                budgets.set(label, severity);
+            }
+        }
+    }
     for (const { initial, stats } of data) {
-        const [files, names, size] = stats;
-        const data = [
-            g(files),
-            names,
-            c(typeof size === 'number' ? formatSize(size) : size),
-        ];
+        const [files, names, rawSize, estimatedTransferSize] = stats;
+        const getRawSizeColor = getSizeColor(names, files);
+        let data;
+        if (showEstimatedTransferSize) {
+            data = [
+                g(files),
+                names,
+                getRawSizeColor(typeof rawSize === 'number' ? formatSize(rawSize) : rawSize),
+                c(typeof estimatedTransferSize === 'number'
+                    ? formatSize(estimatedTransferSize)
+                    : estimatedTransferSize),
+            ];
+        }
+        else {
+            data = [
+                g(files),
+                names,
+                getRawSizeColor(typeof rawSize === 'number' ? formatSize(rawSize) : rawSize),
+                '',
+            ];
+        }
         if (initial) {
             changedEntryChunksStats.push(data);
-            if (typeof size === 'number') {
-                initialTotalSize += size;
+            if (typeof rawSize === 'number') {
+                initialTotalRawSize += rawSize;
+            }
+            if (showEstimatedTransferSize && typeof estimatedTransferSize === 'number') {
+                if (initialTotalEstimatedTransferSize === undefined) {
+                    initialTotalEstimatedTransferSize = 0;
+                }
+                initialTotalEstimatedTransferSize += estimatedTransferSize;
             }
         }
         else {
@@ -86,12 +132,29 @@ function generateBuildStatsTable(data, colors, showTotalSize) {
         }
     }
     const bundleInfo = [];
+    const baseTitles = ['Names', 'Raw Size'];
+    const tableAlign = ['l', 'l', 'r'];
+    if (showEstimatedTransferSize) {
+        baseTitles.push('Estimated Transfer Size');
+        tableAlign.push('r');
+    }
     // Entry chunks
     if (changedEntryChunksStats.length) {
-        bundleInfo.push(['Initial Chunk Files', 'Names', 'Size'].map(bold), ...changedEntryChunksStats);
+        bundleInfo.push(['Initial Chunk Files', ...baseTitles].map(bold), ...changedEntryChunksStats);
         if (showTotalSize) {
             bundleInfo.push([]);
-            bundleInfo.push([' ', 'Initial Total', formatSize(initialTotalSize)].map(bold));
+            const initialSizeTotalColor = getSizeColor('bundle initial', undefined, (x) => x);
+            const totalSizeElements = [
+                ' ',
+                'Initial Total',
+                initialSizeTotalColor(formatSize(initialTotalRawSize)),
+            ];
+            if (showEstimatedTransferSize) {
+                totalSizeElements.push(typeof initialTotalEstimatedTransferSize === 'number'
+                    ? formatSize(initialTotalEstimatedTransferSize)
+                    : '-');
+            }
+            bundleInfo.push(totalSizeElements.map(bold));
         }
     }
     // Seperator
@@ -100,12 +163,12 @@ function generateBuildStatsTable(data, colors, showTotalSize) {
     }
     // Lazy chunks
     if (changedLazyChunksStats.length) {
-        bundleInfo.push(['Lazy Chunk Files', 'Names', 'Size'].map(bold), ...changedLazyChunksStats);
+        bundleInfo.push(['Lazy Chunk Files', ...baseTitles].map(bold), ...changedLazyChunksStats);
     }
     return (0, text_table_1.default)(bundleInfo, {
         hsep: dim(' | '),
         stringLength: (s) => (0, color_1.removeColor)(s).length,
-        align: ['l', 'l', 'r'],
+        align: tableAlign,
     });
 }
 function generateBuildStats(hash, time, colors) {
@@ -118,30 +181,45 @@ function generateBuildStats(hash, time, colors) {
 const runsCache = new Set();
 function statsToString(json, 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-statsConfig, bundleState) {
+statsConfig, budgetFailures) {
     var _a, _b;
     if (!((_a = json.chunks) === null || _a === void 0 ? void 0 : _a.length)) {
         return '';
     }
     const colors = statsConfig.colors;
     const rs = (x) => (colors ? color_1.colors.reset(x) : x);
-    const changedChunksStats = bundleState !== null && bundleState !== void 0 ? bundleState : [];
+    const changedChunksStats = [];
     let unchangedChunkNumber = 0;
-    if (!(bundleState === null || bundleState === void 0 ? void 0 : bundleState.length)) {
-        const isFirstRun = !runsCache.has(json.outputPath || '');
-        for (const chunk of json.chunks) {
-            // During first build we want to display unchanged chunks
-            // but unchanged cached chunks are always marked as not rendered.
-            if (!isFirstRun && !chunk.rendered) {
-                continue;
+    let hasEstimatedTransferSizes = false;
+    const isFirstRun = !runsCache.has(json.outputPath || '');
+    for (const chunk of json.chunks) {
+        // During first build we want to display unchanged chunks
+        // but unchanged cached chunks are always marked as not rendered.
+        if (!isFirstRun && !chunk.rendered) {
+            continue;
+        }
+        const assets = (_b = json.assets) === null || _b === void 0 ? void 0 : _b.filter((asset) => { var _a; return (_a = chunk.files) === null || _a === void 0 ? void 0 : _a.includes(asset.name); });
+        let rawSize = 0;
+        let estimatedTransferSize;
+        if (assets) {
+            for (const asset of assets) {
+                if (asset.name.endsWith('.map')) {
+                    continue;
+                }
+                rawSize += asset.size;
+                if (typeof asset.info.estimatedTransferSize === 'number') {
+                    if (estimatedTransferSize === undefined) {
+                        estimatedTransferSize = 0;
+                        hasEstimatedTransferSizes = true;
+                    }
+                    estimatedTransferSize += asset.info.estimatedTransferSize;
+                }
             }
-            const assets = (_b = json.assets) === null || _b === void 0 ? void 0 : _b.filter((asset) => { var _a; return (_a = chunk.files) === null || _a === void 0 ? void 0 : _a.includes(asset.name); });
-            const summedSize = assets === null || assets === void 0 ? void 0 : assets.filter((asset) => !asset.name.endsWith('.map')).reduce((total, asset) => total + asset.size, 0);
-            changedChunksStats.push(generateBundleStats({ ...chunk, size: summedSize }));
         }
-        unchangedChunkNumber = json.chunks.length - changedChunksStats.length;
-        runsCache.add(json.outputPath || '');
+        changedChunksStats.push(generateBundleStats({ ...chunk, rawSize, estimatedTransferSize }));
     }
+    unchangedChunkNumber = json.chunks.length - changedChunksStats.length;
+    runsCache.add(json.outputPath || '');
     // Sort chunks by size in descending order
     changedChunksStats.sort((a, b) => {
         if (a.stats[2] > b.stats[2]) {
@@ -152,7 +230,7 @@ statsConfig, bundleState) {
         }
         return 0;
     });
-    const statsTable = generateBuildStatsTable(changedChunksStats, colors, unchangedChunkNumber === 0);
+    const statsTable = generateBuildStatsTable(changedChunksStats, colors, unchangedChunkNumber === 0, hasEstimatedTransferSizes, budgetFailures);
     // In some cases we do things outside of webpack context
     // Such us index generation, service worker augmentation etc...
     // This will correct the time and include these.
@@ -274,8 +352,8 @@ function createWebpackLoggingCallback(options, logger) {
     };
 }
 exports.createWebpackLoggingCallback = createWebpackLoggingCallback;
-function webpackStatsLogger(logger, json, config, bundleStats) {
-    logger.info(statsToString(json, config.stats, bundleStats));
+function webpackStatsLogger(logger, json, config, budgetFailures) {
+    logger.info(statsToString(json, config.stats, budgetFailures));
     if (statsHasWarnings(json)) {
         logger.warn(statsWarningsToString(json, config.stats));
     }

package/src/utils/build-browser-features.d.ts

@@ -1,16 +0,0 @@
-/**
- * @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 class BuildBrowserFeatures {
-    private projectRoot;
-    readonly supportedBrowsers: string[];
-    constructor(projectRoot: string);
-    /**
-     * True, when a browser feature is supported partially or fully.
-     */
-    isFeatureSupported(featureId: string): boolean;
-}

package/src/utils/build-browser-features.js

@@ -1,54 +0,0 @@
-"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
- */
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.BuildBrowserFeatures = void 0;
-const browserslist_1 = __importDefault(require("browserslist"));
-const caniuse_lite_1 = require("caniuse-lite");
-class BuildBrowserFeatures {
-    constructor(projectRoot) {
-        // By default, browserslist defaults are too inclusive
-        // https://github.com/browserslist/browserslist/blob/83764ea81ffaa39111c204b02c371afa44a4ff07/index.js#L516-L522
-        this.projectRoot = projectRoot;
-        // We change the default query to browsers that Angular support.
-        // https://angular.io/guide/browser-support
-        browserslist_1.default.defaults = [
-            'last 1 Chrome version',
-            'last 1 Firefox version',
-            'last 2 Edge major versions',
-            'last 2 Safari major versions',
-            'last 2 iOS major versions',
-            'Firefox ESR',
-        ];
-        this.supportedBrowsers = (0, browserslist_1.default)(undefined, { path: this.projectRoot });
-    }
-    /**
-     * True, when a browser feature is supported partially or fully.
-     */
-    isFeatureSupported(featureId) {
-        // y: feature is fully available
-        // n: feature is unavailable
-        // a: feature is partially supported
-        // x: feature is prefixed
-        const criteria = ['y', 'a'];
-        const data = (0, caniuse_lite_1.feature)(caniuse_lite_1.features[featureId]);
-        return !this.supportedBrowsers.some((browser) => {
-            const [agentId, version] = browser.split(' ');
-            const browserData = data.stats[agentId];
-            const featureStatus = (browserData && browserData[version]);
-            // We are only interested in the first character
-            // Ex: when 'a #4 #5', we only need to check for 'a'
-            // as for such cases we should polyfill these features as needed
-            return !featureStatus || !criteria.includes(featureStatus.charAt(0));
-        });
-    }
-}
-exports.BuildBrowserFeatures = BuildBrowserFeatures;