@angular-devkit/build-angular 15.0.0-rc.0 → 15.0.0-rc.2

package/package.json

@@ -1,37 +1,37 @@
 {
   "name": "@angular-devkit/build-angular",
-  "version": "15.0.0-rc.0",
+  "version": "15.0.0-rc.2",
   "description": "Angular Webpack Build Facade",
   "main": "src/index.js",
   "typings": "src/index.d.ts",
   "builders": "builders.json",
   "dependencies": {
     "@ampproject/remapping": "2.2.0",
-    "@angular-devkit/architect": "0.1500.0-rc.0",
-    "@angular-devkit/build-webpack": "0.1500.0-rc.0",
-    "@angular-devkit/core": "15.0.0-rc.0",
-    "@babel/core": "7.19.3",
-    "@babel/generator": "7.19.5",
+    "@angular-devkit/architect": "0.1500.0-rc.2",
+    "@angular-devkit/build-webpack": "0.1500.0-rc.2",
+    "@angular-devkit/core": "15.0.0-rc.2",
+    "@babel/core": "7.19.6",
+    "@babel/generator": "7.20.1",
     "@babel/helper-annotate-as-pure": "7.18.6",
-    "@babel/plugin-proposal-async-generator-functions": "7.19.1",
+    "@babel/plugin-proposal-async-generator-functions": "7.20.1",
     "@babel/plugin-transform-async-to-generator": "7.18.6",
-    "@babel/plugin-transform-runtime": "7.19.1",
+    "@babel/plugin-transform-runtime": "7.19.6",
     "@babel/preset-env": "7.19.4",
-    "@babel/runtime": "7.19.4",
+    "@babel/runtime": "7.20.1",
     "@babel/template": "7.18.10",
     "@discoveryjs/json-ext": "0.5.7",
-    "@ngtools/webpack": "15.0.0-rc.0",
+    "@ngtools/webpack": "15.0.0-rc.2",
     "ansi-colors": "4.1.3",
-    "autoprefixer": "10.4.12",
-    "babel-loader": "8.2.5",
+    "autoprefixer": "10.4.13",
+    "babel-loader": "9.0.1",
     "babel-plugin-istanbul": "6.1.1",
     "browserslist": "^4.9.1",
-    "cacache": "17.0.0",
+    "cacache": "17.0.1",
     "chokidar": "3.5.3",
     "copy-webpack-plugin": "11.0.0",
     "critters": "0.0.16",
     "css-loader": "6.7.1",
-    "esbuild-wasm": "0.15.11",
+    "esbuild-wasm": "0.15.12",
     "glob": "8.0.3",
     "https-proxy-agent": "5.0.1",
     "inquirer": "8.2.4",
@@ -60,7 +60,7 @@
     "terser": "5.15.1",
     "text-table": "0.2.0",
     "tree-kill": "1.2.2",
-    "tslib": "2.4.0",
+    "tslib": "2.4.1",
     "webpack": "5.74.0",
     "webpack-dev-middleware": "5.3.3",
     "webpack-dev-server": "4.11.1",
@@ -68,7 +68,7 @@
     "webpack-subresource-integrity": "5.1.0"
   },
   "optionalDependencies": {
-    "esbuild": "0.15.11"
+    "esbuild": "0.15.12"
   },
   "peerDependencies": {
     "@angular/compiler-cli": "^15.0.0-next",

package/src/builders/browser-esbuild/compiler-plugin.d.ts

@@ -11,6 +11,7 @@ import { BundleStylesheetOptions } from './stylesheets';
 export declare class SourceFileCache extends Map<string, ts.SourceFile> {
     readonly modifiedFiles: Set<string>;
     readonly babelFileCache: Map<string, Uint8Array>;
+    readonly typeScriptFileCache: Map<string, Uint8Array>;
     invalidate(files: Iterable<string>): void;
 }
 export interface CompilerPluginOptions {

package/src/builders/browser-esbuild/compiler-plugin.js

@@ -35,10 +35,11 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.createCompilerPlugin = exports.SourceFileCache = void 0;
 const core_1 = require("@babel/core");
-const assert = __importStar(require("assert"));
-const fs_1 = require("fs");
-const os_1 = require("os");
-const path = __importStar(require("path"));
+const assert = __importStar(require("node:assert"));
+const fs = __importStar(require("node:fs/promises"));
+const node_os_1 = require("node:os");
+const path = __importStar(require("node:path"));
+const node_url_1 = require("node:url");
 const typescript_1 = __importDefault(require("typescript"));
 const application_1 = __importDefault(require("../../babel/presets/application"));
 const webpack_loader_1 = require("../../babel/webpack-loader");
@@ -108,18 +109,20 @@ function convertTypeScriptDiagnostic(diagnostic, host) {
     }
     return message;
 }
-const USING_WINDOWS = (0, os_1.platform)() === 'win32';
+const USING_WINDOWS = (0, node_os_1.platform)() === 'win32';
 const WINDOWS_SEP_REGEXP = new RegExp(`\\${path.win32.sep}`, 'g');
 class SourceFileCache extends Map {
     constructor() {
         super(...arguments);
         this.modifiedFiles = new Set();
         this.babelFileCache = new Map();
+        this.typeScriptFileCache = new Map();
     }
     invalidate(files) {
         this.modifiedFiles.clear();
         for (let file of files) {
             this.babelFileCache.delete(file);
+            this.typeScriptFileCache.delete((0, node_url_1.pathToFileURL)(file).href);
             // Normalize separators to allow matching TypeScript Host paths
             if (USING_WINDOWS) {
                 file = file.replace(WINDOWS_SEP_REGEXP, path.posix.sep);
@@ -185,8 +188,8 @@ function createCompilerPlugin(pluginOptions, styleOptions) {
                     location: { file: pluginOptions.tsconfig },
                     notes: [
                         {
-                            text: `To control ECMA version and features use the Browerslist configuration. ' +
-              'For more information, see https://github.com/browserslist/browserslist#queries'`,
+                            text: 'To control ECMA version and features use the Browerslist configuration. ' +
+                                'For more information, see https://angular.io/guide/build#configuring-browser-compatibility',
                         },
                     ],
                 });
@@ -269,6 +272,12 @@ function createCompilerPlugin(pluginOptions, styleOptions) {
                 const builder = typescript_1.default.createEmitAndSemanticDiagnosticsBuilderProgram(typeScriptProgram, host, previousBuilder, configurationDiagnostics);
                 previousBuilder = builder;
                 await (0, profiling_1.profileAsync)('NG_ANALYZE_PROGRAM', () => angularCompiler.analyzeAsync());
+                const affectedFiles = (0, profiling_1.profileSync)('NG_FIND_AFFECTED', () => findAffectedFiles(builder, angularCompiler));
+                if (pluginOptions.sourceFileCache) {
+                    for (const affected of affectedFiles) {
+                        pluginOptions.sourceFileCache.typeScriptFileCache.delete((0, node_url_1.pathToFileURL)(affected.fileName).href);
+                    }
+                }
                 function* collectDiagnostics() {
                     // Collect program level diagnostics
                     yield* builder.getConfigFileParsingDiagnostics();
@@ -276,7 +285,6 @@ function createCompilerPlugin(pluginOptions, styleOptions) {
                     yield* builder.getOptionsDiagnostics();
                     yield* builder.getGlobalDiagnostics();
                     // Collect source file specific diagnostics
-                    const affectedFiles = findAffectedFiles(builder, angularCompiler);
                     const optimizeFor = affectedFiles.size > 1 ? OptimizeFor.WholeProgram : OptimizeFor.SingleFile;
                     for (const sourceFile of builder.getSourceFiles()) {
                         if (angularCompiler.ignoreForDiagnostics.has(sourceFile)) {
@@ -286,6 +294,10 @@ function createCompilerPlugin(pluginOptions, styleOptions) {
                         // changed or affected for this build when using incremental building.
                         yield* (0, profiling_1.profileSync)('NG_DIAGNOSTICS_SYNTACTIC', () => builder.getSyntacticDiagnostics(sourceFile), true);
                         yield* (0, profiling_1.profileSync)('NG_DIAGNOSTICS_SEMANTIC', () => builder.getSemanticDiagnostics(sourceFile), true);
+                        // Declaration files cannot have template diagnostics
+                        if (sourceFile.isDeclarationFile) {
+                            continue;
+                        }
                         // Only request Angular template diagnostics for affected files to avoid
                         // overhead of template diagnostics for unchanged files.
                         if (affectedFiles.has(sourceFile)) {
@@ -319,39 +331,47 @@ function createCompilerPlugin(pluginOptions, styleOptions) {
                 return result;
             });
             build.onLoad({ filter: compilerOptions.allowJs ? /\.[cm]?[jt]sx?$/ : /\.[cm]?tsx?$/ }, (args) => (0, profiling_1.profileAsync)('NG_EMIT_TS*', async () => {
-                var _a, _b, _c;
+                var _a, _b, _c, _d, _e;
                 assert.ok(fileEmitter, 'Invalid plugin execution order');
-                const typescriptResult = await fileEmitter((_b = (_a = pluginOptions.fileReplacements) === null || _a === void 0 ? void 0 : _a[args.path]) !== null && _b !== void 0 ? _b : args.path);
-                if (!typescriptResult) {
-                    // No TS result indicates the file is not part of the TypeScript program.
-                    // If allowJs is enabled and the file is JS then defer to the next load hook.
-                    if (compilerOptions.allowJs && /\.[cm]?js$/.test(args.path)) {
-                        return undefined;
-                    }
-                    // Otherwise return an error
-                    return {
-                        errors: [
-                            {
-                                text: `File '${args.path}' is missing from the TypeScript compilation.`,
-                                notes: [
-                                    {
-                                        text: `Ensure the file is part of the TypeScript program via the 'files' or 'include' property.`,
-                                    },
-                                ],
-                            },
-                        ],
-                    };
-                }
-                const data = (_c = typescriptResult.content) !== null && _c !== void 0 ? _c : '';
-                // The pre-transformed data is used as a cache key. Since the cache is memory only,
+                // The filename is currently used as a cache key. Since the cache is memory only,
                 // the options cannot change and do not need to be represented in the key. If the
                 // cache is later stored to disk, then the options that affect transform output
-                // would need to be added to the key as well.
-                let contents = babelDataCache.get(data);
+                // would need to be added to the key as well as a check for any change of content.
+                let contents = (_a = pluginOptions.sourceFileCache) === null || _a === void 0 ? void 0 : _a.typeScriptFileCache.get((0, node_url_1.pathToFileURL)(args.path).href);
                 if (contents === undefined) {
-                    const transformedData = await transformWithBabel(args.path, data, pluginOptions);
-                    contents = Buffer.from(transformedData, 'utf-8');
-                    babelDataCache.set(data, contents);
+                    const typescriptResult = await fileEmitter((_c = (_b = pluginOptions.fileReplacements) === null || _b === void 0 ? void 0 : _b[args.path]) !== null && _c !== void 0 ? _c : args.path);
+                    if (!typescriptResult) {
+                        // No TS result indicates the file is not part of the TypeScript program.
+                        // If allowJs is enabled and the file is JS then defer to the next load hook.
+                        if (compilerOptions.allowJs && /\.[cm]?js$/.test(args.path)) {
+                            return undefined;
+                        }
+                        // Otherwise return an error
+                        return {
+                            errors: [
+                                {
+                                    text: `File '${args.path}' is missing from the TypeScript compilation.`,
+                                    notes: [
+                                        {
+                                            text: `Ensure the file is part of the TypeScript program via the 'files' or 'include' property.`,
+                                        },
+                                    ],
+                                },
+                            ],
+                        };
+                    }
+                    const data = (_d = typescriptResult.content) !== null && _d !== void 0 ? _d : '';
+                    // The pre-transformed data is used as a cache key. Since the cache is memory only,
+                    // the options cannot change and do not need to be represented in the key. If the
+                    // cache is later stored to disk, then the options that affect transform output
+                    // would need to be added to the key as well.
+                    contents = babelDataCache.get(data);
+                    if (contents === undefined) {
+                        const transformedData = await transformWithBabel(args.path, data, pluginOptions);
+                        contents = Buffer.from(transformedData, 'utf-8');
+                        babelDataCache.set(data, contents);
+                    }
+                    (_e = pluginOptions.sourceFileCache) === null || _e === void 0 ? void 0 : _e.typeScriptFileCache.set((0, node_url_1.pathToFileURL)(args.path).href, contents);
                 }
                 return {
                     contents,
@@ -366,7 +386,7 @@ function createCompilerPlugin(pluginOptions, styleOptions) {
                 // would need to be added to the key as well as a check for any change of content.
                 let contents = (_a = pluginOptions.sourceFileCache) === null || _a === void 0 ? void 0 : _a.babelFileCache.get(args.path);
                 if (contents === undefined) {
-                    const data = await fs_1.promises.readFile(args.path, 'utf-8');
+                    const data = await fs.readFile(args.path, 'utf-8');
                     const transformedData = await transformWithBabel(args.path, data, pluginOptions);
                     contents = Buffer.from(transformedData, 'utf-8');
                     (_b = pluginOptions.sourceFileCache) === null || _b === void 0 ? void 0 : _b.babelFileCache.set(args.path, contents);

package/src/builders/browser-esbuild/index.js

@@ -46,6 +46,7 @@ const compiler_plugin_1 = require("./compiler-plugin");
 const esbuild_1 = require("./esbuild");
 const experimental_warnings_1 = require("./experimental-warnings");
 const options_1 = require("./options");
+const sass_plugin_1 = require("./sass-plugin");
 const stylesheets_1 = require("./stylesheets");
 const watcher_1 = require("./watcher");
 /**
@@ -208,6 +209,11 @@ function createCodeBundleOptions(options, target, sourceFileCache) {
             // loader to perform the downlevel transformation.
             // NOTE: If esbuild adds support in the future, the babel support for async generators can be disabled.
             'async-await': false,
+            // V8 currently has a performance defect involving object spread operations that can cause signficant
+            // degradation in runtime performance. By not supporting the language feature here, a downlevel form
+            // will be used instead which provides a workaround for the performance issue.
+            // For more details: https://bugs.chromium.org/p/v8/issues/detail?id=11536
+            'object-rest-spread': false,
         },
         mainFields: ['es2020', 'browser', 'module', 'main'],
         conditions: ['es2020', 'es2015', 'module'],
@@ -345,6 +351,7 @@ async function* buildEsbuildBrowser(initialOptions, context) {
     yield result.output;
     // Finish if watch mode is not enabled
     if (!initialOptions.watch) {
+        (0, sass_plugin_1.shutdownSassWorkerPool)();
         return;
     }
     context.logger.info('Watch mode enabled. Watching for file changes...');
@@ -352,8 +359,8 @@ async function* buildEsbuildBrowser(initialOptions, context) {
     const watcher = (0, watcher_1.createWatcher)({
         polling: typeof initialOptions.poll === 'number',
         interval: initialOptions.poll,
-        // Ignore the output path to avoid infinite rebuild cycles
-        ignored: [normalizedOptions.outputPath],
+        // Ignore the output and cache paths to avoid infinite rebuild cycles
+        ignored: [normalizedOptions.outputPath, normalizedOptions.cacheOptions.basePath],
     });
     // Temporarily watch the entire project
     watcher.add(normalizedOptions.projectRoot);
@@ -378,6 +385,7 @@ async function* buildEsbuildBrowser(initialOptions, context) {
         await watcher.close();
         // Cleanup incremental rebuild state
         result.dispose();
+        (0, sass_plugin_1.shutdownSassWorkerPool)();
     }
 }
 exports.buildEsbuildBrowser = buildEsbuildBrowser;

package/src/builders/browser-esbuild/options.d.ts

@@ -21,6 +21,7 @@ export declare type NormalizedBrowserOptions = Awaited<ReturnType<typeof normali
 export declare function normalizeOptions(context: BuilderContext, projectName: string, options: BrowserBuilderOptions): Promise<{
     advancedOptimizations: boolean | undefined;
     baseHref: string | undefined;
+    cacheOptions: import("../../utils/normalize-cache").NormalizedCachedOptions;
     crossOrigin: import("./schema").CrossOrigin | undefined;
     externalDependencies: string[] | undefined;
     poll: number | undefined;

package/src/builders/browser-esbuild/options.js

@@ -33,6 +33,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.normalizeOptions = void 0;
 const path = __importStar(require("path"));
 const utils_1 = require("../../utils");
+const normalize_cache_1 = require("../../utils/normalize-cache");
 const normalize_polyfills_1 = require("../../utils/normalize-polyfills");
 const package_chunk_sort_1 = require("../../utils/package-chunk-sort");
 const webpack_browser_config_1 = require("../../utils/webpack-browser-config");
@@ -54,7 +55,7 @@ async function normalizeOptions(context, projectName, options) {
     const projectMetadata = await context.getProjectMetadata(projectName);
     const projectRoot = path.join(workspaceRoot, (_a = projectMetadata.root) !== null && _a !== void 0 ? _a : '');
     const projectSourceRoot = path.join(workspaceRoot, (_b = projectMetadata.sourceRoot) !== null && _b !== void 0 ? _b : 'src');
-    // Normalize options
+    const cacheOptions = (0, normalize_cache_1.normalizeCacheOptions)(projectMetadata, workspaceRoot);
     const mainEntryPoint = path.join(workspaceRoot, options.main);
     // Currently esbuild do not support multiple files per entry-point
     const [polyfillsEntryPoint, ...remainingPolyfills] = (0, normalize_polyfills_1.normalizePolyfills)(options.polyfills, workspaceRoot);
@@ -126,6 +127,7 @@ async function normalizeOptions(context, projectName, options) {
     return {
         advancedOptimizations: buildOptimizer,
         baseHref,
+        cacheOptions,
         crossOrigin,
         externalDependencies,
         poll,

package/src/builders/browser-esbuild/profiling.js

@@ -18,9 +18,22 @@ function logCumulativeDurations() {
     if (!environment_options_1.debugPerformance || !cumulativeDurations) {
         return;
     }
-    for (const [name, duration] of cumulativeDurations) {
+    for (const [name, durations] of cumulativeDurations) {
+        let total = 0;
+        let min;
+        let max;
+        for (const duration of durations) {
+            total += duration;
+            if (min === undefined || duration < min) {
+                min = duration;
+            }
+            if (max === undefined || duration > max) {
+                max = duration;
+            }
+        }
+        const average = total / durations.length;
         // eslint-disable-next-line no-console
-        console.log(`DURATION[${name}]: ${duration.toFixed(9)} seconds`);
+        console.log(`DURATION[${name}]: ${total.toFixed(9)}s [count: ${durations.length}; avg: ${average.toFixed(9)}s; min: ${min === null || min === void 0 ? void 0 : min.toFixed(9)}s; max: ${max === null || max === void 0 ? void 0 : max.toFixed(9)}s]`);
     }
 }
 exports.logCumulativeDurations = logCumulativeDurations;
@@ -29,11 +42,13 @@ function recordDuration(name, startTime, cumulative) {
     const duration = Number(process.hrtime.bigint() - startTime) / 10 ** 9;
     if (cumulative) {
         cumulativeDurations !== null && cumulativeDurations !== void 0 ? cumulativeDurations : (cumulativeDurations = new Map());
-        cumulativeDurations.set(name, ((_a = cumulativeDurations.get(name)) !== null && _a !== void 0 ? _a : 0) + duration);
+        const durations = (_a = cumulativeDurations.get(name)) !== null && _a !== void 0 ? _a : [];
+        durations.push(duration);
+        cumulativeDurations.set(name, durations);
     }
     else {
         // eslint-disable-next-line no-console
-        console.log(`DURATION[${name}]: ${duration.toFixed(9)} seconds`);
+        console.log(`DURATION[${name}]: ${duration.toFixed(9)}s`);
     }
 }
 async function profileAsync(name, action, cumulative) {

package/src/builders/browser-esbuild/sass-plugin.d.ts

@@ -6,6 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 import type { Plugin } from 'esbuild';
+export declare function shutdownSassWorkerPool(): void;
 export declare function createSassPlugin(options: {
     sourcemap: boolean;
     loadPaths?: string[];

package/src/builders/browser-esbuild/sass-plugin.js

@@ -6,54 +6,49 @@
  * Use of this source code is governed by an MIT-style license that can be
  * found in the LICENSE file at https://angular.io/license
  */
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.createSassPlugin = void 0;
+exports.createSassPlugin = exports.shutdownSassWorkerPool = void 0;
+const promises_1 = require("node:fs/promises");
 const node_path_1 = require("node:path");
 const node_url_1 = require("node:url");
+const sass_service_1 = require("../../sass/sass-service");
+let sassWorkerPool;
+function isSassException(error) {
+    return !!error && typeof error === 'object' && 'sassMessage' in error;
+}
+function shutdownSassWorkerPool() {
+    sassWorkerPool === null || sassWorkerPool === void 0 ? void 0 : sassWorkerPool.close();
+}
+exports.shutdownSassWorkerPool = shutdownSassWorkerPool;
 function createSassPlugin(options) {
     return {
         name: 'angular-sass',
         setup(build) {
-            let sass;
             build.onLoad({ filter: /\.s[ac]ss$/ }, async (args) => {
                 // Lazily load Sass when a Sass file is found
-                sass !== null && sass !== void 0 ? sass : (sass = await Promise.resolve().then(() => __importStar(require('sass'))));
+                sassWorkerPool !== null && sassWorkerPool !== void 0 ? sassWorkerPool : (sassWorkerPool = new sass_service_1.SassWorkerImplementation());
+                const warnings = [];
                 try {
-                    const warnings = [];
-                    // Use sync version as async version is slower.
-                    const { css, sourceMap, loadedUrls } = sass.compile(args.path, {
+                    const data = await (0, promises_1.readFile)(args.path, 'utf-8');
+                    const { css, sourceMap, loadedUrls } = await sassWorkerPool.compileStringAsync(data, {
+                        url: (0, node_url_1.pathToFileURL)(args.path),
                         style: 'expanded',
                         loadPaths: options.loadPaths,
                         sourceMap: options.sourcemap,
                         sourceMapIncludeSources: options.sourcemap,
                         quietDeps: true,
                         logger: {
-                            warn: (text, _options) => {
+                            warn: (text, { deprecation, span }) => {
                                 warnings.push({
-                                    text,
+                                    text: deprecation ? 'Deprecation' : text,
+                                    location: span && {
+                                        file: span.url && (0, node_url_1.fileURLToPath)(span.url),
+                                        lineText: span.context,
+                                        // Sass line numbers are 0-based while esbuild's are 1-based
+                                        line: span.start.line + 1,
+                                        column: span.start.column,
+                                    },
+                                    notes: deprecation ? [{ text }] : undefined,
                                 });
                             },
                         },
@@ -68,15 +63,16 @@ function createSassPlugin(options) {
                     };
                 }
                 catch (error) {
-                    if (error instanceof sass.Exception) {
+                    if (isSassException(error)) {
                         const file = error.span.url ? (0, node_url_1.fileURLToPath)(error.span.url) : undefined;
                         return {
                             loader: 'css',
                             errors: [
                                 {
-                                    text: error.toString(),
+                                    text: error.message,
                                 },
                             ],
+                            warnings,
                             watchFiles: file ? [file] : undefined,
                         };
                     }

package/src/builders/browser-esbuild/watcher.js

@@ -33,6 +33,7 @@ function createWatcher(options) {
     });
     const nextQueue = [];
     let currentChanges;
+    let nextWaitTimeout;
     watcher.on('all', (event, path) => {
         switch (event) {
             case 'add':
@@ -50,11 +51,18 @@ function createWatcher(options) {
             default:
                 return;
         }
-        const next = nextQueue.shift();
-        if (next) {
-            const value = currentChanges;
-            currentChanges = undefined;
-            next(value);
+        // Wait 250ms from next change to better capture groups of file save operations.
+        if (!nextWaitTimeout) {
+            nextWaitTimeout = setTimeout(() => {
+                nextWaitTimeout = undefined;
+                const next = nextQueue.shift();
+                if (next) {
+                    const value = currentChanges;
+                    currentChanges = undefined;
+                    next(value);
+                }
+            }, 250);
+            nextWaitTimeout === null || nextWaitTimeout === void 0 ? void 0 : nextWaitTimeout.unref();
         }
     });
     return {
@@ -80,6 +88,9 @@ function createWatcher(options) {
         async close() {
             try {
                 await watcher.close();
+                if (nextWaitTimeout) {
+                    clearTimeout(nextWaitTimeout);
+                }
             }
             finally {
                 let next;

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

@@ -114,6 +114,12 @@ function serveWebpackBrowser(options, context, transforms = {}) {
         const metadata = await context.getProjectMetadata(projectName);
         const cacheOptions = (0, normalize_cache_1.normalizeCacheOptions)(metadata, context.workspaceRoot);
         const browserName = await context.getBuilderNameForTarget(browserTarget);
+        // Issue a warning that the dev-server does not currently support the experimental esbuild-
+        // based builder and will use Webpack.
+        if (browserName === '@angular-devkit/build-angular:browser-esbuild') {
+            logger.warn('WARNING: The experimental esbuild-based builder is not currently supported ' +
+                'by the dev-server. The stable Webpack-based builder will be used instead.');
+        }
         const browserOptions = (await context.validateOptions({
             ...rawBrowserOptions,
             watch: options.watch,

package/src/sass/sass-service.js

@@ -87,12 +87,13 @@ class SassWorkerImplementation {
                 }
                 resolve(result);
             };
-            const request = this.createRequest(workerIndex, callback, importers);
+            const request = this.createRequest(workerIndex, callback, logger, importers);
             this.requests.set(request.id, request);
             this.workers[workerIndex].postMessage({
                 id: request.id,
                 source,
                 hasImporter: !!(importers === null || importers === void 0 ? void 0 : importers.length),
+                hasLogger: !!logger,
                 options: {
                     ...serializableOptions,
                     // URL is not serializable so to convert to string here and back to URL in the worker.
@@ -122,12 +123,24 @@ class SassWorkerImplementation {
             transferList: [workerImporterPort],
         });
         worker.on('message', (response) => {
+            var _a;
             const request = this.requests.get(response.id);
             if (!request) {
                 return;
             }
             this.requests.delete(response.id);
             this.availableWorkers.push(request.workerIndex);
+            if (response.warnings && ((_a = request.logger) === null || _a === void 0 ? void 0 : _a.warn)) {
+                for (const { message, span, ...options } of response.warnings) {
+                    request.logger.warn(message, {
+                        ...options,
+                        span: span && {
+                            ...span,
+                            url: span.url ? (0, node_url_1.pathToFileURL)(span.url) : undefined,
+                        },
+                    });
+                }
+            }
             if (response.result) {
                 request.callback(undefined, {
                     ...response.result,
@@ -184,11 +197,12 @@ class SassWorkerImplementation {
         }
         return null;
     }
-    createRequest(workerIndex, callback, importers) {
+    createRequest(workerIndex, callback, logger, importers) {
         return {
             id: this.idCounter++,
             workerIndex,
             callback,
+            logger,
             importers,
         };
     }

package/src/sass/worker.js

@@ -15,10 +15,12 @@ if (!worker_threads_1.parentPort || !worker_threads_1.workerData) {
 }
 // The importer variables are used to proxy import requests to the main thread
 const { workerImporterPort, importerSignal } = worker_threads_1.workerData;
-worker_threads_1.parentPort.on('message', ({ id, hasImporter, source, options }) => {
+worker_threads_1.parentPort.on('message', (message) => {
     if (!worker_threads_1.parentPort) {
         throw new Error('"parentPort" is not defined. Sass worker must be executed as a Worker.');
     }
+    const { id, hasImporter, hasLogger, source, options } = message;
+    let warnings;
     try {
         if (hasImporter) {
             // When a custom importer function is present, the importer request must be proxied
@@ -44,9 +46,23 @@ worker_threads_1.parentPort.on('message', ({ id, hasImporter, source, options })
             ...options,
             // URL is not serializable so to convert to string in the parent and back to URL here.
             url: options.url ? (0, url_1.pathToFileURL)(options.url) : undefined,
+            logger: hasLogger
+                ? {
+                    warn(message, { deprecation, span, stack }) {
+                        warnings !== null && warnings !== void 0 ? warnings : (warnings = []);
+                        warnings.push({
+                            message,
+                            deprecation,
+                            stack,
+                            span: span && convertSourceSpan(span),
+                        });
+                    },
+                }
+                : undefined,
         });
         worker_threads_1.parentPort.postMessage({
             id,
+            warnings,
             result: {
                 ...result,
                 // URL is not serializable so to convert to string here and back to URL in the parent.
@@ -60,22 +76,9 @@ worker_threads_1.parentPort.on('message', ({ id, hasImporter, source, options })
             const { span, message, stack, sassMessage, sassStack } = error;
             worker_threads_1.parentPort.postMessage({
                 id,
+                warnings,
                 error: {
-                    span: {
-                        text: span.text,
-                        context: span.context,
-                        end: {
-                            column: span.end.column,
-                            offset: span.end.offset,
-                            line: span.end.line,
-                        },
-                        start: {
-                            column: span.start.column,
-                            offset: span.start.offset,
-                            line: span.start.line,
-                        },
-                        url: span.url ? (0, url_1.fileURLToPath)(span.url) : undefined,
-                    },
+                    span: convertSourceSpan(span),
                     message,
                     stack,
                     sassMessage,
@@ -85,10 +88,40 @@ worker_threads_1.parentPort.on('message', ({ id, hasImporter, source, options })
         }
         else if (error instanceof Error) {
             const { message, stack } = error;
-            worker_threads_1.parentPort.postMessage({ id, error: { message, stack } });
+            worker_threads_1.parentPort.postMessage({ id, warnings, error: { message, stack } });
         }
         else {
-            worker_threads_1.parentPort.postMessage({ id, error: { message: 'An unknown error has occurred.' } });
+            worker_threads_1.parentPort.postMessage({
+                id,
+                warnings,
+                error: { message: 'An unknown error has occurred.' },
+            });
         }
     }
 });
+/**
+ * Converts a Sass SourceSpan object into a serializable form.
+ * The SourceSpan object contains a URL property which must be converted into a string.
+ * Also, most of the interface's properties are get accessors and are not automatically
+ * serialized when sent back from the worker.
+ *
+ * @param span The Sass SourceSpan object to convert.
+ * @returns A serializable form of the SourceSpan object.
+ */
+function convertSourceSpan(span) {
+    return {
+        text: span.text,
+        context: span.context,
+        end: {
+            column: span.end.column,
+            offset: span.end.offset,
+            line: span.end.line,
+        },
+        start: {
+            column: span.start.column,
+            offset: span.start.offset,
+            line: span.start.line,
+        },
+        url: span.url ? (0, url_1.fileURLToPath)(span.url) : undefined,
+    };
+}

package/src/webpack/plugins/typescript.js

@@ -28,7 +28,7 @@ function createIvyPlugin(wco, aot, tsconfig) {
         (_a = (_c = tsConfig.options).useDefineForClassFields) !== null && _a !== void 0 ? _a : (_c.useDefineForClassFields = false);
         wco.logger.warn('TypeScript compiler options "target" and "useDefineForClassFields" are set to "ES2022" and ' +
             '"false" respectively by the Angular CLI. To control ECMA version and features use the Browerslist configuration. ' +
-            'For more information, see https://github.com/browserslist/browserslist');
+            'For more information, see https://angular.io/guide/build#configuring-browser-compatibility');
     }
     if (buildOptions.preserveSymlinks !== undefined) {
         compilerOptions.preserveSymlinks = buildOptions.preserveSymlinks;