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

package/package.json

@@ -1,45 +1,46 @@
 {
   "name": "@angular-devkit/build-angular",
-  "version": "13.1.0-next.1",
+  "version": "13.1.0-next.2",
   "description": "Angular Webpack Build Facade",
   "main": "src/index.js",
   "typings": "src/index.d.ts",
   "builders": "builders.json",
   "dependencies": {
     "@ampproject/remapping": "1.0.1",
-    "@angular-devkit/architect": "0.1301.0-next.1",
-    "@angular-devkit/build-webpack": "0.1301.0-next.1",
-    "@angular-devkit/core": "13.1.0-next.1",
+    "@angular-devkit/architect": "0.1301.0-next.2",
+    "@angular-devkit/build-webpack": "0.1301.0-next.2",
+    "@angular-devkit/core": "13.1.0-next.2",
     "@babel/core": "7.16.0",
     "@babel/generator": "7.16.0",
     "@babel/helper-annotate-as-pure": "7.16.0",
-    "@babel/plugin-proposal-async-generator-functions": "7.16.0",
+    "@babel/plugin-proposal-async-generator-functions": "7.16.4",
     "@babel/plugin-transform-async-to-generator": "7.16.0",
-    "@babel/plugin-transform-runtime": "7.16.0",
-    "@babel/preset-env": "7.16.0",
+    "@babel/plugin-transform-runtime": "7.16.4",
+    "@babel/preset-env": "7.16.4",
     "@babel/runtime": "7.16.3",
     "@babel/template": "7.16.0",
     "@discoveryjs/json-ext": "0.5.5",
-    "@ngtools/webpack": "13.1.0-next.1",
+    "@ngtools/webpack": "13.1.0-next.2",
     "ansi-colors": "4.1.1",
     "babel-loader": "8.2.3",
     "babel-plugin-istanbul": "6.1.1",
     "browserslist": "^4.9.1",
     "cacache": "15.3.0",
     "circular-dependency-plugin": "5.2.2",
-    "copy-webpack-plugin": "9.0.1",
+    "copy-webpack-plugin": "9.1.0",
     "core-js": "3.19.1",
     "critters": "0.0.14",
     "css-loader": "6.5.1",
-    "esbuild-wasm": "0.13.13",
+    "esbuild-wasm": "0.13.14",
     "glob": "7.2.0",
     "https-proxy-agent": "5.0.0",
     "inquirer": "8.2.0",
+    "jsonc-parser": "3.0.0",
     "karma-source-map-support": "1.4.0",
     "less": "4.1.2",
     "less-loader": "10.2.0",
-    "license-webpack-plugin": "3.0.0",
-    "loader-utils": "3.1.3",
+    "license-webpack-plugin": "4.0.0",
+    "loader-utils": "3.2.0",
     "mini-css-extract-plugin": "2.4.4",
     "minimatch": "3.0.4",
     "open": "8.4.0",
@@ -60,18 +61,18 @@
     "source-map-support": "0.5.20",
     "stylus": "0.55.0",
     "stylus-loader": "6.2.0",
-    "terser": "5.9.0",
+    "terser": "5.10.0",
     "text-table": "0.2.0",
     "tree-kill": "1.2.2",
     "tslib": "2.3.1",
-    "webpack": "5.63.0",
+    "webpack": "5.64.1",
     "webpack-dev-middleware": "5.2.1",
-    "webpack-dev-server": "4.4.0",
+    "webpack-dev-server": "4.5.0",
     "webpack-merge": "5.8.0",
     "webpack-subresource-integrity": "5.0.0"
   },
   "optionalDependencies": {
-    "esbuild": "0.13.13"
+    "esbuild": "0.13.14"
   },
   "peerDependencies": {
     "@angular/compiler-cli": "^13.0.0 || ^13.1.0-next",

package/src/webpack/configs/common.js

@@ -40,6 +40,7 @@ const environment_options_1 = require("../../utils/environment-options");
 const load_esm_1 = require("../../utils/load-esm");
 const plugins_1 = require("../plugins");
 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
@@ -207,6 +208,9 @@ async function getCommonConfig(wco) {
             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));
@@ -318,6 +322,7 @@ async function getCommonConfig(wco) {
             ],
         },
         experiments: {
+            backCompat: false,
             syncWebAssembly: true,
             asyncWebAssembly: true,
         },

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

@@ -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)(url.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)(url.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

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/stats.d.ts

@@ -10,13 +10,19 @@ import { logging } from '@angular-devkit/core';
 import { Configuration, StatsCompilation } from 'webpack';
 import { Schema as BrowserBuilderOptions } from '../../builders/browser/schema';
 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;

package/src/webpack/utils/stats.js

@@ -50,35 +50,52 @@ 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) {
     const g = (x) => (colors ? color_1.colors.greenBright(x) : x);
     const c = (x) => (colors ? color_1.colors.cyanBright(x) : x);
     const bold = (x) => (colors ? color_1.colors.bold(x) : x);
     const dim = (x) => (colors ? color_1.colors.dim(x) : x);
     const changedEntryChunksStats = [];
     const changedLazyChunksStats = [];
-    let initialTotalSize = 0;
+    let initialTotalRawSize = 0;
+    let initialTotalEstimatedTransferSize;
     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;
+        let data;
+        if (showEstimatedTransferSize) {
+            data = [
+                g(files),
+                names,
+                c(typeof rawSize === 'number' ? formatSize(rawSize) : rawSize),
+                c(typeof estimatedTransferSize === 'number'
+                    ? formatSize(estimatedTransferSize)
+                    : estimatedTransferSize),
+            ];
+        }
+        else {
+            data = [g(files), names, c(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 +103,24 @@ 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 totalSizeElements = [' ', 'Initial Total', formatSize(initialTotalRawSize)];
+            if (showEstimatedTransferSize) {
+                totalSizeElements.push(typeof initialTotalEstimatedTransferSize === 'number'
+                    ? formatSize(initialTotalEstimatedTransferSize)
+                    : '-');
+            }
+            bundleInfo.push(totalSizeElements.map(bold));
         }
     }
     // Seperator
@@ -100,12 +129,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) {
@@ -127,6 +156,7 @@ statsConfig, bundleState) {
     const rs = (x) => (colors ? color_1.colors.reset(x) : x);
     const changedChunksStats = bundleState !== null && bundleState !== void 0 ? bundleState : [];
     let unchangedChunkNumber = 0;
+    let hasEstimatedTransferSizes = false;
     if (!(bundleState === null || bundleState === void 0 ? void 0 : bundleState.length)) {
         const isFirstRun = !runsCache.has(json.outputPath || '');
         for (const chunk of json.chunks) {
@@ -136,8 +166,24 @@ statsConfig, bundleState) {
                 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); });
-            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 }));
+            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;
+                    }
+                }
+            }
+            changedChunksStats.push(generateBundleStats({ ...chunk, rawSize, estimatedTransferSize }));
         }
         unchangedChunkNumber = json.chunks.length - changedChunksStats.length;
         runsCache.add(json.outputPath || '');
@@ -152,7 +198,7 @@ statsConfig, bundleState) {
         }
         return 0;
     });
-    const statsTable = generateBuildStatsTable(changedChunksStats, colors, unchangedChunkNumber === 0);
+    const statsTable = generateBuildStatsTable(changedChunksStats, colors, unchangedChunkNumber === 0, hasEstimatedTransferSizes);
     // 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.