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

package/package.json

@@ -1,15 +1,15 @@
 {
   "name": "@angular-devkit/build-angular",
-  "version": "13.1.0-next.2",
+  "version": "13.1.1",
   "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.1",
+    "@angular-devkit/build-webpack": "0.1301.1",
+    "@angular-devkit/core": "13.1.1",
     "@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.1",
     "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.3",
+    "critters": "0.0.15",
     "css-loader": "6.5.1",
-    "esbuild-wasm": "0.13.14",
+    "esbuild-wasm": "0.14.2",
     "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-loader": "12.3.0",
+    "sass": "1.44.0",
+    "sass-loader": "12.4.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.65.0",
+    "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.2"
   },
   "peerDependencies": {
     "@angular/compiler-cli": "^13.0.0 || ^13.1.0-next",
@@ -82,7 +82,7 @@
     "ng-packagr": "^13.0.0 || ^13.1.0-next",
     "protractor": "^7.0.0",
     "tailwindcss": "^2.0.0",
-    "typescript": "~4.4.3"
+    "typescript": ">=4.4.3 <4.6"
   },
   "peerDependenciesMeta": {
     "@angular/localize": {

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

@@ -5,6 +5,7 @@
  * 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 type { ɵParsedTranslation } from '@angular/localize/private';
 import type { makeEs2015TranslatePlugin, makeEs5TranslatePlugin, makeLocalePlugin } from '@angular/localize/tools';
 export declare type DiagnosticReporter = (type: 'error' | 'warning' | 'info', message: string) => void;
 /**
@@ -22,8 +23,9 @@ export interface ApplicationPresetOptions {
     i18n?: {
         locale: string;
         missingTranslationBehavior?: 'error' | 'warning' | 'ignore';
-        translation?: unknown;
-        pluginCreators?: I18nPluginCreators;
+        translation?: Record<string, ɵParsedTranslation>;
+        translationFiles?: string[];
+        pluginCreators: I18nPluginCreators;
     };
     angularLinker?: {
         shouldLink: boolean;

package/src/babel/presets/application.js

@@ -60,28 +60,18 @@ function createI18nDiagnostics(reporter) {
     })();
     return diagnostics;
 }
-function createI18nPlugins(locale, translation, missingTranslationBehavior, diagnosticReporter, 
-// TODO_ESM: Make `pluginCreators` required once `@angular/localize` is published with the `tools` entry point
-pluginCreators) {
+function createI18nPlugins(locale, translation, missingTranslationBehavior, diagnosticReporter, pluginCreators) {
     const diagnostics = createI18nDiagnostics(diagnosticReporter);
     const plugins = [];
+    const { makeEs5TranslatePlugin, makeEs2015TranslatePlugin, makeLocalePlugin } = pluginCreators;
     if (translation) {
-        const { makeEs2015TranslatePlugin,
-        // TODO_ESM: Remove all deep imports once `@angular/localize` is published with the `tools` entry point
-         } = pluginCreators !== null && pluginCreators !== void 0 ? pluginCreators : require('@angular/localize/src/tools/src/translate/source_files/es2015_translate_plugin');
         plugins.push(makeEs2015TranslatePlugin(diagnostics, translation, {
             missingTranslation: missingTranslationBehavior,
         }));
-        const { makeEs5TranslatePlugin,
-        // TODO_ESM: Remove all deep imports once `@angular/localize` is published with the `tools` entry point
-         } = pluginCreators !== null && pluginCreators !== void 0 ? pluginCreators : require('@angular/localize/src/tools/src/translate/source_files/es5_translate_plugin');
         plugins.push(makeEs5TranslatePlugin(diagnostics, translation, {
             missingTranslation: missingTranslationBehavior,
         }));
     }
-    const { makeLocalePlugin,
-    // TODO_ESM: Remove all deep imports once `@angular/localize` is published with the `tools` entry point
-     } = pluginCreators !== null && pluginCreators !== void 0 ? pluginCreators : require('@angular/localize/src/tools/src/translate/source_files/locale_plugin');
     plugins.push(makeLocalePlugin(locale));
     return plugins;
 }

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,
@@ -65,13 +66,10 @@ exports.default = (0, babel_loader_1.custom)(() => {
             };
             // Analyze file for linking
             if (await requiresLinking(this.resourcePath, source)) {
-                if (!linkerPluginCreator) {
-                    // Load ESM `@angular/compiler-cli/linker/babel` 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 linkerBabelModule = await (0, load_esm_1.loadEsmModule)('@angular/compiler-cli/linker/babel');
-                    linkerPluginCreator = linkerBabelModule.createEs2015LinkerPlugin;
-                }
+                // Load ESM `@angular/compiler-cli/linker/babel` 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.
+                linkerPluginCreator !== null && linkerPluginCreator !== void 0 ? linkerPluginCreator : (linkerPluginCreator = (await (0, load_esm_1.loadEsmModule)('@angular/compiler-cli/linker/babel')).createEs2015LinkerPlugin);
                 customOptions.angularLinker = {
                     shouldLink: true,
                     jitMode: aot !== true,
@@ -104,20 +102,24 @@ exports.default = (0, babel_loader_1.custom)(() => {
                 // During the transition, this will always attempt to load the entry point for each file.
                 // This will only occur during prerelease and will be automatically corrected once the new
                 // entry point exists.
-                // TODO_ESM: Make import failure an error once the `tools` entry point exists.
                 if (i18nPluginCreators === undefined) {
                     // Load ESM `@angular/localize/tools` 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.
-                    try {
-                        i18nPluginCreators = await (0, load_esm_1.loadEsmModule)('@angular/localize/tools');
-                    }
-                    catch { }
+                    i18nPluginCreators = await (0, load_esm_1.loadEsmModule)('@angular/localize/tools');
                 }
                 customOptions.i18n = {
                     ...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 +201,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(() => {
@@ -43,7 +47,6 @@ async function extract(loaderContext, content, map, options) {
     // Try to load the `@angular/localize` message extractor.
     // All the localize usages are setup to first try the ESM entry point then fallback to the deep imports.
     // This provides interim compatibility while the framework is transitioned to bundled ESM packages.
-    // TODO_ESM: Remove all deep imports once `@angular/localize` is published with the `tools` entry point
     let MessageExtractor;
     try {
         // Load ESM `@angular/localize/tools` using the TypeScript dynamic import workaround.

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

@@ -8,6 +8,5 @@
 export declare const allowMangle: boolean;
 export declare const shouldBeautify: boolean;
 export declare const allowMinify: boolean;
-export declare const profilingEnabled: boolean;
 export declare const maxWorkers: number;
 export declare const cachingDisabled: boolean | null;

package/src/utils/environment-options.js

@@ -7,7 +7,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.cachingDisabled = exports.maxWorkers = exports.profilingEnabled = exports.allowMinify = exports.shouldBeautify = exports.allowMangle = void 0;
+exports.cachingDisabled = exports.maxWorkers = exports.allowMinify = exports.shouldBeautify = exports.allowMangle = void 0;
 const color_1 = require("./color");
 function isDisabled(variable) {
     return variable === '0' || variable.toLowerCase() === 'false';
@@ -57,9 +57,6 @@ exports.allowMangle = isPresent(mangleVariable)
     : debugOptimize.mangle;
 exports.shouldBeautify = debugOptimize.beautify;
 exports.allowMinify = debugOptimize.minify;
-// Build profiling
-const profilingVariable = process.env['NG_BUILD_PROFILING'];
-exports.profilingEnabled = isPresent(profilingVariable) && isEnabled(profilingVariable);
 /**
  * Some environments, like CircleCI which use Docker report a number of CPUs by the host and not the count of available.
  * This cause `Error: Call retries were exceeded` errors when trying to use them.

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"));
@@ -158,42 +158,18 @@ async function configureI18nBuild(context, options) {
         if (!desc.files.length) {
             continue;
         }
-        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;
-            }
+        loader !== null && loader !== void 0 ? loader : (loader = await (0, load_translations_1.createTranslationLoader)());
+        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 +201,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,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,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");
@@ -46,7 +47,7 @@ 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 = [];
@@ -55,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) {
@@ -92,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.
@@ -189,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));
     }
@@ -202,7 +197,7 @@ 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,
@@ -227,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: {
@@ -235,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,
@@ -262,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,
@@ -288,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
@@ -305,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
@@ -362,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,
                     },
                 ],
             },
@@ -186,7 +186,7 @@ async function addProxyConfig(root, proxyConfig) {
             // 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;
+            return (await (0, load_esm_1.loadEsmModule)((0, url_1.pathToFileURL)(proxyPath))).default;
         case '.cjs':
             return require(proxyPath);
         default:
@@ -200,7 +200,7 @@ async function addProxyConfig(root, proxyConfig) {
                     // 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;
+                    return (await (0, load_esm_1.loadEsmModule)((0, url_1.pathToFileURL)(proxyPath))).default;
                 }
                 throw e;
             }
@@ -274,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/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,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));
     }