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

package/package.json

@@ -1,15 +1,15 @@
 {
   "name": "@angular-devkit/build-angular",
-  "version": "13.1.0-next.2",
+  "version": "13.1.0-next.3",
   "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.2",
-    "@angular-devkit/build-webpack": "0.1301.0-next.2",
-    "@angular-devkit/core": "13.1.0-next.2",
+    "@ampproject/remapping": "1.0.2",
+    "@angular-devkit/architect": "0.1301.0-next.3",
+    "@angular-devkit/build-webpack": "0.1301.0-next.3",
+    "@angular-devkit/core": "13.1.0-next.3",
     "@babel/core": "7.16.0",
     "@babel/generator": "7.16.0",
     "@babel/helper-annotate-as-pure": "7.16.0",
@@ -19,19 +19,19 @@
     "@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.2",
+    "@discoveryjs/json-ext": "0.5.6",
+    "@ngtools/webpack": "13.1.0-next.3",
     "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.1.0",
-    "core-js": "3.19.1",
-    "critters": "0.0.14",
+    "copy-webpack-plugin": "10.0.0",
+    "core-js": "3.19.2",
+    "critters": "0.0.15",
     "css-loader": "6.5.1",
-    "esbuild-wasm": "0.13.14",
+    "esbuild-wasm": "0.14.1",
     "glob": "7.2.0",
     "https-proxy-agent": "5.0.0",
     "inquirer": "8.2.0",
@@ -41,38 +41,38 @@
     "less-loader": "10.2.0",
     "license-webpack-plugin": "4.0.0",
     "loader-utils": "3.2.0",
-    "mini-css-extract-plugin": "2.4.4",
+    "mini-css-extract-plugin": "2.4.5",
     "minimatch": "3.0.4",
     "open": "8.4.0",
     "ora": "5.4.1",
     "parse5-html-rewriting-stream": "6.0.1",
     "piscina": "3.1.0",
-    "postcss": "8.3.11",
+    "postcss": "8.4.4",
     "postcss-import": "14.0.2",
-    "postcss-loader": "6.2.0",
+    "postcss-loader": "6.2.1",
     "postcss-preset-env": "6.7.0",
     "regenerator-runtime": "0.13.9",
     "resolve-url-loader": "4.0.0",
     "rxjs": "6.6.7",
-    "sass": "1.43.4",
+    "sass": "1.44.0",
     "sass-loader": "12.3.0",
     "semver": "7.3.5",
     "source-map-loader": "3.0.0",
-    "source-map-support": "0.5.20",
+    "source-map-support": "0.5.21",
     "stylus": "0.55.0",
     "stylus-loader": "6.2.0",
     "terser": "5.10.0",
     "text-table": "0.2.0",
     "tree-kill": "1.2.2",
     "tslib": "2.3.1",
-    "webpack": "5.64.1",
-    "webpack-dev-middleware": "5.2.1",
-    "webpack-dev-server": "4.5.0",
+    "webpack": "5.64.4",
+    "webpack-dev-middleware": "5.2.2",
+    "webpack-dev-server": "4.6.0",
     "webpack-merge": "5.8.0",
     "webpack-subresource-integrity": "5.0.0"
   },
   "optionalDependencies": {
-    "esbuild": "0.13.14"
+    "esbuild": "0.14.1"
   },
   "peerDependencies": {
     "@angular/compiler-cli": "^13.0.0 || ^13.1.0-next",

package/src/babel/presets/application.d.ts

@@ -23,6 +23,7 @@ export interface ApplicationPresetOptions {
         locale: string;
         missingTranslationBehavior?: 'error' | 'warning' | 'ignore';
         translation?: unknown;
+        translationFiles?: string[];
         pluginCreators?: I18nPluginCreators;
     };
     angularLinker?: {

package/src/babel/webpack-loader.js

@@ -41,6 +41,7 @@ async function requiresLinking(path, source) {
     }
     return needsLinking(path, source);
 }
+// eslint-disable-next-line max-lines-per-function
 exports.default = (0, babel_loader_1.custom)(() => {
     const baseOptions = Object.freeze({
         babelrc: false,
@@ -118,6 +119,14 @@ exports.default = (0, babel_loader_1.custom)(() => {
                     ...i18n,
                     pluginCreators: i18nPluginCreators,
                 };
+                // Add translation files as dependencies of the file to support rebuilds
+                // Except for `@angular/core` which needs locale injection but has no translations
+                if (customOptions.i18n.translationFiles &&
+                    !/[\\/]@angular[\\/]core/.test(this.resourcePath)) {
+                    for (const file of customOptions.i18n.translationFiles) {
+                        this.addDependency(file);
+                    }
+                }
                 shouldProcess = true;
             }
             if (optimize) {
@@ -199,7 +208,13 @@ exports.default = (0, babel_loader_1.custom)(() => {
                 // `@ampproject/remapping` source map objects but both are compatible with Webpack.
                 // This method for merging is used because it provides more accurate output
                 // and is faster while using less memory.
-                result.map = (0, remapping_1.default)([result.map, inputSourceMap], () => null);
+                result.map = {
+                    // Convert the SourceMap back to simple plain object.
+                    // This is needed because otherwise code-coverage will fail with `don't know how to turn this value into a node`
+                    // Which is thrown by Babel if it is invoked again from `istanbul-lib-instrument`.
+                    // https://github.com/babel/babel/blob/780aa48d2a34dc55f556843074b6aed45e7eabeb/packages/babel-types/src/converters/valueToNode.ts#L115-L130
+                    ...(0, remapping_1.default)([result.map, inputSourceMap], () => null),
+                };
             }
             return result;
         },

package/src/builders/browser/index.js

@@ -155,8 +155,9 @@ function buildWebpackBrowser(options, context, transforms = {}) {
                 }
                 // Check for budget errors and display them to the user.
                 const budgets = options.budgets;
+                let budgetFailures;
                 if (budgets === null || budgets === void 0 ? void 0 : budgets.length) {
-                    const budgetFailures = (0, bundle_calculator_1.checkBudgets)(budgets, webpackStats);
+                    budgetFailures = [...(0, bundle_calculator_1.checkBudgets)(budgets, webpackStats)];
                     for (const { severity, message } of budgetFailures) {
                         switch (severity) {
                             case bundle_calculator_1.ThresholdSeverity.Warning:
@@ -250,7 +251,7 @@ function buildWebpackBrowser(options, context, transforms = {}) {
                         spinner.succeed('Service worker generation complete.');
                     }
                 }
-                (0, stats_1.webpackStatsLogger)(context.logger, webpackStats, config);
+                (0, stats_1.webpackStatsLogger)(context.logger, webpackStats, config, budgetFailures);
                 return { success: buildSuccess };
             }
         }), (0, operators_1.map)((event) => ({

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

@@ -37,10 +37,13 @@ const url = __importStar(require("url"));
 const utils_1 = require("../../utils");
 const check_port_1 = require("../../utils/check-port");
 const color_1 = require("../../utils/color");
+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 version_1 = require("../../utils/version");
 const webpack_browser_config_1 = require("../../utils/webpack-browser-config");
+const webpack_diagnostics_1 = require("../../utils/webpack-diagnostics");
 const configs_1 = require("../../webpack/configs");
 const index_html_webpack_plugin_1 = require("../../webpack/plugins/index-html-webpack-plugin");
 const stats_1 = require("../../webpack/utils/stats");
@@ -145,7 +148,7 @@ function serveWebpackBrowser(options, context, transforms = {}) {
             if (i18n.inlineLocales.size > 1) {
                 throw new Error('The development server only supports localizing a single locale per build.');
             }
-            await setupLocalize(locale, i18n, browserOptions, webpackConfig, cacheOptions);
+            await setupLocalize(locale, i18n, browserOptions, webpackConfig, cacheOptions, context);
         }
         if (transforms.webpackConfiguration) {
             webpackConfig = await transforms.webpackConfiguration(webpackConfig);
@@ -220,7 +223,7 @@ function serveWebpackBrowser(options, context, transforms = {}) {
     }));
 }
 exports.serveWebpackBrowser = serveWebpackBrowser;
-async function setupLocalize(locale, i18n, browserOptions, webpackConfig, cacheOptions) {
+async function setupLocalize(locale, i18n, browserOptions, webpackConfig, cacheOptions, context) {
     var _a;
     const localeDescription = i18n.locales[locale];
     // Modify main entrypoint to include locale data
@@ -248,6 +251,7 @@ async function setupLocalize(locale, i18n, browserOptions, webpackConfig, cacheO
         locale,
         missingTranslationBehavior,
         translation: i18n.shouldInline ? translation : undefined,
+        translationFiles: localeDescription === null || localeDescription === void 0 ? void 0 : localeDescription.files.map((file) => path.resolve(context.workspaceRoot, file.path)),
     };
     const i18nRule = {
         test: /\.[cm]?[tj]sx?$/,
@@ -276,5 +280,30 @@ async function setupLocalize(locale, i18n, browserOptions, webpackConfig, cacheO
         webpackConfig.module.rules = rules;
     }
     rules.push(i18nRule);
+    // Add a plugin to reload translation files on rebuilds
+    const loader = await (0, load_translations_1.createTranslationLoader)();
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    webpackConfig.plugins.push({
+        apply: (compiler) => {
+            compiler.hooks.thisCompilation.tap('build-angular', (compilation) => {
+                if (i18n.shouldInline && i18nLoaderOptions.translation === undefined) {
+                    // Reload translations
+                    (0, i18n_options_1.loadTranslations)(locale, localeDescription, context.workspaceRoot, loader, {
+                        warn(message) {
+                            (0, webpack_diagnostics_1.addWarning)(compilation, message);
+                        },
+                        error(message) {
+                            (0, webpack_diagnostics_1.addError)(compilation, message);
+                        },
+                    });
+                    i18nLoaderOptions.translation = localeDescription.translation;
+                }
+                compilation.hooks.finishModules.tap('build-angular', () => {
+                    // After loaders are finished, clear out the now unneeded translations
+                    i18nLoaderOptions.translation = undefined;
+                });
+            });
+        },
+    });
 }
 exports.default = (0, architect_1.createBuilder)(serveWebpackBrowser);

package/src/builders/extract-i18n/ivy-extract-loader.js

@@ -29,6 +29,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const nodePath = __importStar(require("path"));
 const load_esm_1 = require("../../utils/load-esm");
 function localizeExtractLoader(content, map) {
+    // This loader is not cacheable due to how message extraction works.
+    // Extracted messages are not part of webpack pipeline and hence they cannot be retrieved from cache.
+    // TODO: We should investigate in the future on making this deterministic and more cacheable.
+    this.cacheable(false);
     const options = this.getOptions();
     const callback = this.async();
     extract(this, content, map, options).then(() => {

package/src/utils/bundle-calculator.d.ts

@@ -20,13 +20,12 @@ export declare enum ThresholdSeverity {
     Warning = "warning",
     Error = "error"
 }
-export declare function calculateThresholds(budget: Budget): IterableIterator<Threshold>;
-export declare function checkBudgets(budgets: Budget[], webpackStats: StatsCompilation): IterableIterator<{
-    severity: ThresholdSeverity;
-    message: string;
-}>;
-export declare function checkThresholds(thresholds: IterableIterator<Threshold>, size: number, label?: string): IterableIterator<{
+export interface BudgetCalculatorResult {
     severity: ThresholdSeverity;
     message: string;
-}>;
+    label?: string;
+}
+export declare function calculateThresholds(budget: Budget): IterableIterator<Threshold>;
+export declare function checkBudgets(budgets: Budget[], webpackStats: StatsCompilation): IterableIterator<BudgetCalculatorResult>;
+export declare function checkThresholds(thresholds: IterableIterator<Threshold>, size: number, label?: string): IterableIterator<BudgetCalculatorResult>;
 export {};

package/src/utils/bundle-calculator.js

@@ -143,7 +143,7 @@ class BundleCalculator extends Calculator {
             .filter((chunk) => { var _a; return (_a = chunk === null || chunk === void 0 ? void 0 : chunk.names) === null || _a === void 0 ? void 0 : _a.includes(budgetName); })
             .map((chunk) => this.calculateChunkSize(chunk))
             .reduce((l, r) => l + r, 0);
-        return [{ size, label: `bundle ${this.budget.name}` }];
+        return [{ size, label: this.budget.name }];
     }
 }
 /**
@@ -262,6 +262,7 @@ function* checkThresholds(thresholds, size, label) {
                 const sizeDifference = (0, stats_1.formatSize)(size - threshold.limit);
                 yield {
                     severity: threshold.severity,
+                    label,
                     message: `${label} exceeded maximum budget. Budget ${(0, stats_1.formatSize)(threshold.limit)} was not met by ${sizeDifference} with a total of ${(0, stats_1.formatSize)(size)}.`,
                 };
                 break;
@@ -273,6 +274,7 @@ function* checkThresholds(thresholds, size, label) {
                 const sizeDifference = (0, stats_1.formatSize)(threshold.limit - size);
                 yield {
                     severity: threshold.severity,
+                    label,
                     message: `${label} failed to meet minimum budget. Budget ${(0, stats_1.formatSize)(threshold.limit)} was not met by ${sizeDifference} with a total of ${(0, stats_1.formatSize)(size)}.`,
                 };
                 break;

package/src/utils/i18n-options.d.ts

@@ -9,19 +9,21 @@ import { BuilderContext } from '@angular-devkit/architect';
 import { json } from '@angular-devkit/core';
 import { Schema as BrowserBuilderSchema } from '../builders/browser/schema';
 import { Schema as ServerBuilderSchema } from '../builders/server/schema';
+import { TranslationLoader } from './load-translations';
+export interface LocaleDescription {
+    files: {
+        path: string;
+        integrity?: string;
+        format?: string;
+    }[];
+    translation?: Record<string, unknown>;
+    dataPath?: string;
+    baseHref?: string;
+}
 export interface I18nOptions {
     inlineLocales: Set<string>;
     sourceLocale: string;
-    locales: Record<string, {
-        files: {
-            path: string;
-            integrity?: string;
-            format?: string;
-        }[];
-        translation?: Record<string, unknown>;
-        dataPath?: string;
-        baseHref?: string;
-    }>;
+    locales: Record<string, LocaleDescription>;
     flatOutput?: boolean;
     readonly shouldInline: boolean;
     hasDefinedSourceLocale?: boolean;
@@ -31,3 +33,7 @@ export declare function configureI18nBuild<T extends BrowserBuilderSchema | Serv
     buildOptions: T;
     i18n: I18nOptions;
 }>;
+export declare function loadTranslations(locale: string, desc: LocaleDescription, workspaceRoot: string, loader: TranslationLoader, logger: {
+    warn: (message: string) => void;
+    error: (message: string) => void;
+}, usedFormats?: Set<string>): void;

package/src/utils/i18n-options.js

@@ -10,7 +10,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.configureI18nBuild = exports.createI18nOptions = void 0;
+exports.loadTranslations = exports.configureI18nBuild = exports.createI18nOptions = void 0;
 const core_1 = require("@angular-devkit/core");
 const fs_1 = __importDefault(require("fs"));
 const module_1 = __importDefault(require("module"));
@@ -161,39 +161,17 @@ async function configureI18nBuild(context, options) {
         if (!loader) {
             loader = await (0, load_translations_1.createTranslationLoader)();
         }
-        for (const file of desc.files) {
-            const loadResult = loader(path_1.default.join(context.workspaceRoot, file.path));
-            for (const diagnostics of loadResult.diagnostics.messages) {
-                if (diagnostics.type === 'error') {
-                    throw new Error(`Error parsing translation file '${file.path}': ${diagnostics.message}`);
-                }
-                else {
-                    context.logger.warn(`WARNING [${file.path}]: ${diagnostics.message}`);
-                }
-            }
-            if (loadResult.locale !== undefined && loadResult.locale !== locale) {
-                context.logger.warn(`WARNING [${file.path}]: File target locale ('${loadResult.locale}') does not match configured locale ('${locale}')`);
-            }
-            usedFormats.add(loadResult.format);
-            if (usedFormats.size > 1 && tsConfig.options.enableI18nLegacyMessageIdFormat !== false) {
-                // This limitation is only for legacy message id support (defaults to true as of 9.0)
-                throw new Error('Localization currently only supports using one type of translation file format for the entire application.');
-            }
-            file.format = loadResult.format;
-            file.integrity = loadResult.integrity;
-            if (desc.translation) {
-                // Merge translations
-                for (const [id, message] of Object.entries(loadResult.translations)) {
-                    if (desc.translation[id] !== undefined) {
-                        context.logger.warn(`WARNING [${file.path}]: Duplicate translations for message '${id}' when merging`);
-                    }
-                    desc.translation[id] = message;
-                }
-            }
-            else {
-                // First or only translation file
-                desc.translation = loadResult.translations;
-            }
+        loadTranslations(locale, desc, context.workspaceRoot, loader, {
+            warn(message) {
+                context.logger.warn(message);
+            },
+            error(message) {
+                throw new Error(message);
+            },
+        }, usedFormats);
+        if (usedFormats.size > 1 && tsConfig.options.enableI18nLegacyMessageIdFormat !== false) {
+            // This limitation is only for legacy message id support (defaults to true as of 9.0)
+            throw new Error('Localization currently only supports using one type of translation file format for the entire application.');
         }
     }
     // If inlining store the output in a temporary location to facilitate post-processing
@@ -225,3 +203,36 @@ function findLocaleDataPath(locale, resolver) {
         return null;
     }
 }
+function loadTranslations(locale, desc, workspaceRoot, loader, logger, usedFormats) {
+    for (const file of desc.files) {
+        const loadResult = loader(path_1.default.join(workspaceRoot, file.path));
+        for (const diagnostics of loadResult.diagnostics.messages) {
+            if (diagnostics.type === 'error') {
+                logger.error(`Error parsing translation file '${file.path}': ${diagnostics.message}`);
+            }
+            else {
+                logger.warn(`WARNING [${file.path}]: ${diagnostics.message}`);
+            }
+        }
+        if (loadResult.locale !== undefined && loadResult.locale !== locale) {
+            logger.warn(`WARNING [${file.path}]: File target locale ('${loadResult.locale}') does not match configured locale ('${locale}')`);
+        }
+        usedFormats === null || usedFormats === void 0 ? void 0 : usedFormats.add(loadResult.format);
+        file.format = loadResult.format;
+        file.integrity = loadResult.integrity;
+        if (desc.translation) {
+            // Merge translations
+            for (const [id, message] of Object.entries(loadResult.translations)) {
+                if (desc.translation[id] !== undefined) {
+                    logger.warn(`WARNING [${file.path}]: Duplicate translations for message '${id}' when merging`);
+                }
+                desc.translation[id] = message;
+            }
+        }
+        else {
+            // First or only translation file
+            desc.translation = loadResult.translations;
+        }
+    }
+}
+exports.loadTranslations = loadTranslations;

package/src/utils/index-file/augment-index-html.d.ts

@@ -27,4 +27,8 @@ export interface FileInfo {
     name: string;
     extension: string;
 }
-export declare function augmentIndexHtml(params: AugmentIndexHtmlOptions): Promise<string>;
+export declare function augmentIndexHtml(params: AugmentIndexHtmlOptions): Promise<{
+    content: string;
+    warnings: string[];
+    errors: string[];
+}>;

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,13 @@ function updateAttribute(tag, name, value) {
 function isString(value) {
     return typeof value === 'string';
 }
+async function getLanguageDirection(lang, warnings) {
+    try {
+        const localeData = (await (0, load_esm_1.loadEsmModule)(`@angular/common/locales/${lang}`)).default;
+        const dir = localeData[localeData.length - 2];
+        return isString(dir) ? dir : undefined;
+    }
+    catch {
+        warnings.push(`Locale data for '${lang}' cannot be found. 'dir' attribute will not be set for this locale.`);
+    }
+}

package/src/webpack/configs/common.js

@@ -39,6 +39,7 @@ 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");
@@ -189,8 +190,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));
     }
@@ -262,7 +265,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,
@@ -362,7 +365,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/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/utils/stats.d.ts

@@ -9,6 +9,7 @@ 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,
@@ -33,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

@@ -61,30 +61,59 @@ function generateBundleStats(info) {
     };
 }
 exports.generateBundleStats = generateBundleStats;
-function generateBuildStatsTable(data, colors, showTotalSize, showEstimatedTransferSize) {
+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 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, rawSize, estimatedTransferSize] = stats;
+        const getRawSizeColor = getSizeColor(names, files);
         let data;
         if (showEstimatedTransferSize) {
             data = [
                 g(files),
                 names,
-                c(typeof rawSize === 'number' ? formatSize(rawSize) : rawSize),
+                getRawSizeColor(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), ''];
+            data = [
+                g(files),
+                names,
+                getRawSizeColor(typeof rawSize === 'number' ? formatSize(rawSize) : rawSize),
+                '',
+            ];
         }
         if (initial) {
             changedEntryChunksStats.push(data);
@@ -114,7 +143,12 @@ function generateBuildStatsTable(data, colors, showTotalSize, showEstimatedTrans
         bundleInfo.push(['Initial Chunk Files', ...baseTitles].map(bold), ...changedEntryChunksStats);
         if (showTotalSize) {
             bundleInfo.push([]);
-            const totalSizeElements = [' ', 'Initial Total', formatSize(initialTotalRawSize)];
+            const initialSizeTotalColor = getSizeColor('bundle initial', undefined, (x) => x);
+            const totalSizeElements = [
+                ' ',
+                'Initial Total',
+                initialSizeTotalColor(formatSize(initialTotalRawSize)),
+            ];
             if (showEstimatedTransferSize) {
                 totalSizeElements.push(typeof initialTotalEstimatedTransferSize === 'number'
                     ? formatSize(initialTotalEstimatedTransferSize)
@@ -147,47 +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;
     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) {
-            // 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 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;
                 }
             }
-            changedChunksStats.push(generateBundleStats({ ...chunk, rawSize, estimatedTransferSize }));
         }
-        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]) {
@@ -198,7 +230,7 @@ statsConfig, bundleState) {
         }
         return 0;
     });
-    const statsTable = generateBuildStatsTable(changedChunksStats, colors, unchangedChunkNumber === 0, hasEstimatedTransferSizes);
+    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.
@@ -320,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));
     }