@angular/build 18.0.0-rc.1 → 18.0.0-rc.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@angular/build",
-  "version": "18.0.0-rc.1",
+  "version": "18.0.0-rc.3",
   "description": "Official build system for Angular",
   "keywords": [
     "Angular CLI",
@@ -23,7 +23,7 @@
   "builders": "builders.json",
   "dependencies": {
     "@ampproject/remapping": "2.3.0",
-    "@angular-devkit/architect": "0.1800.0-rc.1",
+    "@angular-devkit/architect": "0.1800.0-rc.3",
     "@babel/core": "7.24.5",
     "@babel/helper-annotate-as-pure": "7.22.5",
     "@babel/helper-split-export-declaration": "7.24.5",
@@ -31,20 +31,20 @@
     "ansi-colors": "4.1.3",
     "browserslist": "^4.23.0",
     "critters": "0.0.22",
-    "esbuild": "0.20.2",
+    "esbuild": "0.21.3",
     "fast-glob": "3.3.2",
     "https-proxy-agent": "7.0.4",
-    "inquirer": "9.2.20",
+    "inquirer": "9.2.22",
+    "lmdb": "3.0.8",
     "magic-string": "0.30.10",
     "mrmime": "2.0.0",
     "ora": "5.4.1",
     "picomatch": "4.0.2",
-    "piscina": "4.4.0",
+    "piscina": "4.5.0",
     "parse5-html-rewriting-stream": "7.0.0",
-    "postcss": "8.4.38",
-    "sass": "1.76.0",
-    "semver": "7.6.0",
-    "undici": "6.15.0",
+    "sass": "1.77.2",
+    "semver": "7.6.2",
+    "undici": "6.18.0",
     "vite": "5.2.11",
     "watchpack": "2.4.1"
   },

package/src/builders/application/build-action.js

@@ -136,6 +136,8 @@ async function* runEsBuildBuildAction(action, options) {
             if (verbose) {
                 logger.info(changes.toDebugString());
             }
+            // Clear removed files from current watch files
+            changes.removed.forEach((removedPath) => currentWatchFiles.delete(removedPath));
             result = await withProgress('Changes detected. Rebuilding...', () => action(result.createRebuildState(changes)));
             // Log all diagnostic (error/warning/logs) messages
             await (0, utils_1.logMessages)(logger, result, colors, jsonLogs);

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

@@ -133,7 +133,7 @@ async function* serveWithVite(serverOptions, builderName, builderAction, context
             // If server is active, send an error notification
             if (result.errors?.length && server) {
                 hadError = true;
-                server.ws.send({
+                server.hot.send({
                     type: 'error',
                     err: {
                         message: result.errors[0].text,
@@ -147,7 +147,7 @@ async function* serveWithVite(serverOptions, builderName, builderAction, context
         else if (hadError && server) {
             hadError = false;
             // Send an empty update to clear the error overlay
-            server.ws.send({
+            server.hot.send({
                 'type': 'update',
                 updates: [],
             });
@@ -189,15 +189,13 @@ async function* serveWithVite(serverOptions, builderName, builderAction, context
             if (!projectName) {
                 throw new Error('The builder requires a target.');
             }
+            context.logger.info('NOTE: Raw file sizes do not reflect development server per-request transformations.');
             const { root = '' } = await context.getProjectMetadata(projectName);
             const projectRoot = (0, node_path_1.join)(context.workspaceRoot, root);
             const browsers = (0, internal_1.getSupportedBrowsers)(projectRoot, context.logger);
             const target = (0, internal_1.transformSupportedBrowsersToTargets)(browsers);
-            const polyfills = Array.isArray((browserOptions.polyfills ??= []))
-                ? browserOptions.polyfills
-                : [browserOptions.polyfills];
             // Setup server and start listening
-            const serverConfiguration = await setupServer(serverOptions, generatedFiles, assetFiles, browserOptions.preserveSymlinks, externalMetadata, !!browserOptions.ssr, prebundleTransformer, target, (0, internal_1.isZonelessApp)(polyfills), browserOptions.loader, extensions?.middleware, transformers?.indexHtml, thirdPartySourcemaps);
+            const serverConfiguration = await setupServer(serverOptions, generatedFiles, assetFiles, browserOptions.preserveSymlinks, externalMetadata, !!browserOptions.ssr, prebundleTransformer, target, (0, internal_1.isZonelessApp)(browserOptions.polyfills), browserOptions.loader, extensions?.middleware, transformers?.indexHtml, thirdPartySourcemaps);
             server = await createServer(serverConfiguration);
             await server.listen();
             if (serverConfiguration.ssr?.optimizeDeps?.disabled === false) {
@@ -224,7 +222,7 @@ async function* serveWithVite(serverOptions, builderName, builderAction, context
                         key: 'r',
                         description: 'force reload browser',
                         action(server) {
-                            server.ws.send({
+                            server.hot.send({
                                 type: 'full-reload',
                                 path: '*',
                             });
@@ -354,6 +352,14 @@ async function setupServer(serverOptions, outputFiles, assets, preserveSymlinks,
         css: {
             devSourcemap: true,
         },
+        // Ensure custom 'file' loader build option entries are handled by Vite in application code that
+        // reference third-party libraries. Relative usage is handled directly by the build and not Vite.
+        // Only 'file' loader entries are currently supported directly by Vite.
+        assetsInclude: prebundleLoaderExtensions &&
+            Object.entries(prebundleLoaderExtensions)
+                .filter(([, value]) => value === 'file')
+                // Create a file extension glob for each key
+                .map(([key]) => '*' + key),
         // Vite will normalize the `base` option by adding a leading slash.
         base: serverOptions.servePath,
         resolve: {

package/src/tools/babel/plugins/adjust-static-class-members.js

@@ -216,77 +216,10 @@ function default_1() {
                 const { wrapStatementPaths, hasPotentialSideEffects } = exportDefaultAnalysis.get(classNode) ??
                     analyzeClassSiblings(origin, classNode.id, wrapDecorators);
                 visitedClasses.add(classNode);
-                if (hasPotentialSideEffects) {
-                    return;
-                }
                 // If no statements to wrap, check for static class properties.
-                // Static class properties may be downleveled at later stages in the build pipeline
-                // which results in additional function calls outside the class body. These calls
-                // then cause the class to be referenced and not eligible for removal. Since it is
-                // not known at this stage whether the class needs to be downleveled, the transform
-                // wraps classes preemptively to allow for potential removal within the optimization
-                // stages.
-                if (wrapStatementPaths.length === 0) {
-                    let shouldWrap = false;
-                    for (const element of path.get('body').get('body')) {
-                        if (element.isClassProperty()) {
-                            // Only need to analyze static properties
-                            if (!element.node.static) {
-                                continue;
-                            }
-                            // Check for potential side effects.
-                            // These checks are conservative and could potentially be expanded in the future.
-                            const elementKey = element.get('key');
-                            const elementValue = element.get('value');
-                            if (elementKey.isIdentifier() &&
-                                (!elementValue.isExpression() ||
-                                    canWrapProperty(elementKey.node.name, elementValue))) {
-                                shouldWrap = true;
-                            }
-                            else {
-                                // Not safe to wrap
-                                shouldWrap = false;
-                                break;
-                            }
-                            // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                        }
-                        else if (element.isStaticBlock()) {
-                            // Only need to analyze static blocks
-                            const body = element.get('body');
-                            if (Array.isArray(body) && body.length > 1) {
-                                // Not safe to wrap
-                                shouldWrap = false;
-                                break;
-                            }
-                            const expression = body.find((n) => n.isExpressionStatement());
-                            const assignmentExpression = expression?.get('expression');
-                            if (assignmentExpression?.isAssignmentExpression()) {
-                                const left = assignmentExpression.get('left');
-                                if (!left.isMemberExpression()) {
-                                    continue;
-                                }
-                                if (!left.get('object').isThisExpression()) {
-                                    // Not safe to wrap
-                                    shouldWrap = false;
-                                    break;
-                                }
-                                const element = left.get('property');
-                                const right = assignmentExpression.get('right');
-                                if (element.isIdentifier() &&
-                                    (!right.isExpression() || canWrapProperty(element.node.name, right))) {
-                                    shouldWrap = true;
-                                }
-                                else {
-                                    // Not safe to wrap
-                                    shouldWrap = false;
-                                    break;
-                                }
-                            }
-                        }
-                    }
-                    if (!shouldWrap) {
-                        return;
-                    }
+                if (hasPotentialSideEffects ||
+                    (wrapStatementPaths.length === 0 && !analyzeClassStaticProperties(path).shouldWrap)) {
+                    return;
                 }
                 const wrapStatementNodes = [];
                 for (const statementPath of wrapStatementPaths) {
@@ -310,9 +243,7 @@ function default_1() {
             ClassExpression(path, state) {
                 const { node: classNode, parentPath } = path;
                 const { wrapDecorators } = state.opts;
-                // Class expressions are used by TypeScript to represent downlevel class/constructor decorators.
-                // If not wrapping decorators, they do not need to be processed.
-                if (!wrapDecorators || visitedClasses.has(classNode)) {
+                if (visitedClasses.has(classNode)) {
                     return;
                 }
                 if (!parentPath.isVariableDeclarator() || !core_1.types.isIdentifier(parentPath.node.id)) {
@@ -324,7 +255,9 @@ function default_1() {
                 }
                 const { wrapStatementPaths, hasPotentialSideEffects } = analyzeClassSiblings(origin, parentPath.node.id, wrapDecorators);
                 visitedClasses.add(classNode);
-                if (hasPotentialSideEffects || wrapStatementPaths.length === 0) {
+                // If no statements to wrap, check for static class properties.
+                if (hasPotentialSideEffects ||
+                    (wrapStatementPaths.length === 0 && !analyzeClassStaticProperties(path).shouldWrap)) {
                     return;
                 }
                 const wrapStatementNodes = [];
@@ -349,3 +282,69 @@ function default_1() {
     };
 }
 exports.default = default_1;
+/**
+ * Static class properties may be downleveled at later stages in the build pipeline
+ * which results in additional function calls outside the class body. These calls
+ * then cause the class to be referenced and not eligible for removal. Since it is
+ * not known at this stage whether the class needs to be downleveled, the transform
+ * wraps classes preemptively to allow for potential removal within the optimization stages.
+ */
+function analyzeClassStaticProperties(path) {
+    let shouldWrap = false;
+    for (const element of path.get('body').get('body')) {
+        if (element.isClassProperty()) {
+            // Only need to analyze static properties
+            if (!element.node.static) {
+                continue;
+            }
+            // Check for potential side effects.
+            // These checks are conservative and could potentially be expanded in the future.
+            const elementKey = element.get('key');
+            const elementValue = element.get('value');
+            if (elementKey.isIdentifier() &&
+                (!elementValue.isExpression() || canWrapProperty(elementKey.node.name, elementValue))) {
+                shouldWrap = true;
+            }
+            else {
+                // Not safe to wrap
+                shouldWrap = false;
+                break;
+            }
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        }
+        else if (element.isStaticBlock()) {
+            // Only need to analyze static blocks
+            const body = element.get('body');
+            if (Array.isArray(body) && body.length > 1) {
+                // Not safe to wrap
+                shouldWrap = false;
+                break;
+            }
+            const expression = body.find((n) => n.isExpressionStatement());
+            const assignmentExpression = expression?.get('expression');
+            if (assignmentExpression?.isAssignmentExpression()) {
+                const left = assignmentExpression.get('left');
+                if (!left.isMemberExpression()) {
+                    continue;
+                }
+                if (!left.get('object').isThisExpression()) {
+                    // Not safe to wrap
+                    shouldWrap = false;
+                    break;
+                }
+                const element = left.get('property');
+                const right = assignmentExpression.get('right');
+                if (element.isIdentifier() &&
+                    (!right.isExpression() || canWrapProperty(element.node.name, right))) {
+                    shouldWrap = true;
+                }
+                else {
+                    // Not safe to wrap
+                    shouldWrap = false;
+                    break;
+                }
+            }
+        }
+    }
+    return { shouldWrap };
+}

package/src/tools/esbuild/angular/compiler-plugin.js

@@ -38,6 +38,7 @@ const node_assert_1 = __importDefault(require("node:assert"));
 const path = __importStar(require("node:path"));
 const environment_options_1 = require("../../../utils/environment-options");
 const javascript_transformer_1 = require("../javascript-transformer");
+const lmdb_cache_store_1 = require("../lmdb-cache-store");
 const load_result_cache_1 = require("../load-result-cache");
 const profiling_1 = require("../profiling");
 const compilation_1 = require("./compilation");
@@ -54,7 +55,11 @@ function createCompilerPlugin(pluginOptions, styleOptions) {
             let setupWarnings = [];
             const preserveSymlinks = build.initialOptions.preserveSymlinks;
             // Initialize a worker pool for JavaScript transformations
-            const javascriptTransformer = new javascript_transformer_1.JavaScriptTransformer(pluginOptions, environment_options_1.maxWorkers);
+            let cacheStore;
+            if (pluginOptions.sourceFileCache?.persistentCachePath) {
+                cacheStore = new lmdb_cache_store_1.LmbdCacheStore(path.join(pluginOptions.sourceFileCache.persistentCachePath, 'angular-compiler.db'));
+            }
+            const javascriptTransformer = new javascript_transformer_1.JavaScriptTransformer(pluginOptions, environment_options_1.maxWorkers, cacheStore?.createCache('jstransformer'));
             // Setup defines based on the values used by the Angular compiler-cli
             build.initialOptions.define ??= {};
             build.initialOptions.define['ngI18nClosureMode'] ??= 'false';
@@ -320,6 +325,7 @@ function createCompilerPlugin(pluginOptions, styleOptions) {
                 sharedTSCompilationState?.dispose();
                 void stylesheetBundler.dispose();
                 void compilation.close?.();
+                void cacheStore?.close();
             });
             /**
              * Checks if the file has side-effects when `advancedOptimizations` is enabled.

package/src/tools/esbuild/commonjs-checker.js

@@ -143,7 +143,7 @@ function createCommonJSModuleError(request, importer) {
         notes: [
             {
                 text: 'CommonJS or AMD dependencies can cause optimization bailouts.\n' +
-                    'For more information see: https://angular.io/guide/build#configuring-commonjs-dependencies',
+                    'For more information see: https://angular.dev/tools/cli/build#configuring-commonjs-dependencies',
             },
         ],
     };

package/src/tools/esbuild/external-packages-plugin.js

@@ -22,7 +22,12 @@ function createExternalPackagesPlugin(options) {
     return {
         name: 'angular-external-packages',
         setup(build) {
-            const loaderOptionKeys = build.initialOptions.loader && Object.keys(build.initialOptions.loader);
+            // Find all loader keys that are not using the 'file' loader.
+            // The 'file' loader is automatically handled by Vite and does not need exclusion.
+            const loaderOptionKeys = build.initialOptions.loader &&
+                Object.entries(build.initialOptions.loader)
+                    .filter(([, value]) => value !== 'file')
+                    .map(([key]) => key);
             // Safe to use native packages external option if no loader options or exclusions present
             if (!exclusions && !loaderOptionKeys?.length) {
                 build.initialOptions.packages = 'external';

package/src/tools/esbuild/lmdb-cache-store.d.ts

@@ -0,0 +1,18 @@
+/**
+ * @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 { Cache, CacheStore } from './cache';
+export declare class LmbdCacheStore implements CacheStore<unknown> {
+    #private;
+    readonly cachePath: string;
+    constructor(cachePath: string);
+    get(key: string): Promise<any>;
+    has(key: string): boolean;
+    set(key: string, value: unknown): Promise<this>;
+    createCache<V = unknown>(namespace: string): Cache<V>;
+    close(): Promise<void>;
+}

package/src/tools/esbuild/lmdb-cache-store.js

@@ -0,0 +1,54 @@
+"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.LmbdCacheStore = void 0;
+const lmdb_1 = require("lmdb");
+const cache_1 = require("./cache");
+class LmbdCacheStore {
+    cachePath;
+    #cacheFileUrl;
+    #db;
+    constructor(cachePath) {
+        this.cachePath = cachePath;
+        this.#cacheFileUrl = cachePath;
+    }
+    #ensureCacheFile() {
+        this.#db ??= (0, lmdb_1.open)({
+            path: this.#cacheFileUrl,
+            compression: true,
+        });
+        return this.#db;
+    }
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    async get(key) {
+        const db = this.#ensureCacheFile();
+        const value = db.get(key);
+        return value;
+    }
+    has(key) {
+        return this.#ensureCacheFile().doesExist(key);
+    }
+    async set(key, value) {
+        const db = this.#ensureCacheFile();
+        await db.put(key, value);
+        return this;
+    }
+    createCache(namespace) {
+        return new cache_1.Cache(this, namespace);
+    }
+    async close() {
+        try {
+            await this.#db?.close();
+        }
+        catch {
+            // Failure to close should not be fatal
+        }
+    }
+}
+exports.LmbdCacheStore = LmbdCacheStore;

package/src/tools/esbuild/stylesheets/css-inline-fonts-plugin.js

@@ -45,7 +45,7 @@ function createCssInlineFontsPlugin({ cache, cacheOptions, }) {
                         errors: [
                             {
                                 text: `Failed to inline external stylesheet '${args.path}'.`,
-                                detail: error,
+                                notes: error instanceof Error ? [{ text: error.toString() }] : undefined,
                             },
                         ],
                     };

package/src/tools/esbuild/stylesheets/sass-language.js

@@ -41,7 +41,7 @@ function isSassException(error) {
 }
 function shutdownSassWorkerPool() {
     if (sassWorkerPool) {
-        sassWorkerPool.close();
+        void sassWorkerPool.close();
         sassWorkerPool = undefined;
     }
     else if (sassWorkerPoolPromise) {

package/src/tools/sass/rebasing-importer.js

@@ -15,6 +15,7 @@ const magic_string_1 = __importDefault(require("magic-string"));
 const node_fs_1 = require("node:fs");
 const node_path_1 = require("node:path");
 const node_url_1 = require("node:url");
+const error_1 = require("../../utils/error");
 const lexer_1 = require("./lexer");
 /**
  * Ensures that a bare specifier URL path that is intended to be treated as
@@ -70,7 +71,11 @@ class UrlRebasingImporter {
                 continue;
             }
             // Skip if root-relative, absolute or protocol relative url
-            if (/^((?:\w+:)?\/\/|data:|chrome:|#|\/)/.test(value)) {
+            if (/^((?:\w+:)?\/\/|data:|chrome:|\/)/.test(value)) {
+                continue;
+            }
+            // Skip if a fragment identifier but not a Sass interpolation
+            if (value[0] === '#' && value[1] !== '{') {
                 continue;
             }
             // Sass variable usage either starts with a `$` or contains a namespace and a `.$`
@@ -195,8 +200,15 @@ class RelativeUrlRebasingImporter extends UrlRebasingImporter {
             try {
                 entries = (0, node_fs_1.readdirSync)(directory, { withFileTypes: true });
             }
-            catch {
-                return null;
+            catch (error) {
+                (0, error_1.assertIsError)(error);
+                // If the containing directory does not exist return null to indicate it cannot be resolved
+                if (error.code === 'ENOENT') {
+                    return null;
+                }
+                throw new Error(`Error reading directory ["${directory}"] while resolving Sass import`, {
+                    cause: error,
+                });
             }
             foundDefaults = [];
             foundImports = [];
@@ -205,7 +217,7 @@ class RelativeUrlRebasingImporter extends UrlRebasingImporter {
                 let isDirectory;
                 let isFile;
                 if (entry.isSymbolicLink()) {
-                    const stats = (0, node_fs_1.statSync)((0, node_path_1.join)(entry.path, entry.name));
+                    const stats = (0, node_fs_1.statSync)((0, node_path_1.join)(directory, entry.name));
                     isDirectory = stats.isDirectory();
                     isFile = stats.isFile();
                 }

package/src/tools/sass/sass-service.d.ts

@@ -5,7 +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 { CompileResult, Deprecation, SourceSpan, StringOptions } from 'sass';
+import type { CompileResult, Deprecation, SourceSpan, StringOptions } from 'sass';
 export interface SerializableVersion {
     major: number;
     minor: number;
@@ -36,14 +36,10 @@ export type SerializableWarningMessage = ({
  * the worker which can be up to two times faster than the asynchronous variant.
  */
 export declare class SassWorkerImplementation {
-    private rebase;
-    private readonly workers;
-    private readonly availableWorkers;
-    private readonly requests;
-    private readonly workerPath;
-    private idCounter;
-    private nextWorkerIndex;
-    constructor(rebase?: boolean);
+    #private;
+    private readonly rebase;
+    readonly maxThreads: number;
+    constructor(rebase?: boolean, maxThreads?: number);
     /**
      * Provides information about the Sass implementation.
      * This mimics enough of the `dart-sass` value to be used with the `sass-loader`.
@@ -63,10 +59,9 @@ export declare class SassWorkerImplementation {
     /**
      * Shutdown the Sass render worker.
      * Executing this method will stop any pending render requests.
+     * @returns A void promise that resolves when closing is complete.
      */
-    close(): void;
-    private createWorker;
+    close(): Promise<void>;
     private processImporters;
-    private createRequest;
     private isFileImporter;
 }

package/src/tools/sass/sass-service.js

@@ -6,12 +6,64 @@
  * 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 __addDisposableResource = (this && this.__addDisposableResource) || function (env, value, async) {
+    if (value !== null && value !== void 0) {
+        if (typeof value !== "object" && typeof value !== "function") throw new TypeError("Object expected.");
+        var dispose;
+        if (async) {
+            if (!Symbol.asyncDispose) throw new TypeError("Symbol.asyncDispose is not defined.");
+            dispose = value[Symbol.asyncDispose];
+        }
+        if (dispose === void 0) {
+            if (!Symbol.dispose) throw new TypeError("Symbol.dispose is not defined.");
+            dispose = value[Symbol.dispose];
+        }
+        if (typeof dispose !== "function") throw new TypeError("Object not disposable.");
+        env.stack.push({ value: value, dispose: dispose, async: async });
+    }
+    else if (async) {
+        env.stack.push({ async: true });
+    }
+    return value;
+};
+var __disposeResources = (this && this.__disposeResources) || (function (SuppressedError) {
+    return function (env) {
+        function fail(e) {
+            env.error = env.hasError ? new SuppressedError(e, env.error, "An error was suppressed during disposal.") : e;
+            env.hasError = true;
+        }
+        function next() {
+            while (env.stack.length) {
+                var rec = env.stack.pop();
+                try {
+                    var result = rec.dispose && rec.dispose.call(rec.value);
+                    if (rec.async) return Promise.resolve(result).then(next, function(e) { fail(e); return next(); });
+                }
+                catch (e) {
+                    fail(e);
+                }
+            }
+            if (env.hasError) throw env.error;
+        }
+        return next();
+    };
+})(typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+    var e = new Error(message);
+    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+});
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SassWorkerImplementation = void 0;
-const node_path_1 = require("node:path");
+const node_assert_1 = __importDefault(require("node:assert"));
 const node_url_1 = require("node:url");
 const node_worker_threads_1 = require("node:worker_threads");
+const piscina_1 = require("piscina");
 const environment_options_1 = require("../../utils/environment-options");
+// Polyfill Symbol.dispose if not present
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+Symbol.dispose ??= Symbol('Symbol Dispose');
 /**
  * The maximum number of Workers that will be created to execute render requests.
  */
@@ -24,14 +76,22 @@ const MAX_RENDER_WORKERS = environment_options_1.maxWorkers;
  */
 class SassWorkerImplementation {
     rebase;
-    workers = [];
-    availableWorkers = [];
-    requests = new Map();
-    workerPath = (0, node_path_1.join)(__dirname, './worker.js');
-    idCounter = 1;
-    nextWorkerIndex = 0;
-    constructor(rebase = false) {
+    maxThreads;
+    #workerPool;
+    constructor(rebase = false, maxThreads = MAX_RENDER_WORKERS) {
         this.rebase = rebase;
+        this.maxThreads = maxThreads;
+    }
+    #ensureWorkerPool() {
+        this.#workerPool ??= new piscina_1.Piscina({
+            filename: require.resolve('./worker'),
+            minThreads: 1,
+            maxThreads: this.maxThreads,
+            // Shutdown idle threads after 1 second of inactivity
+            idleTimeout: 1000,
+            recordTiming: false,
+        });
+        return this.#workerPool;
     }
     /**
      * Provides information about the Sass implementation.
@@ -52,49 +112,20 @@ class SassWorkerImplementation {
      * @param source The contents to compile.
      * @param options The `dart-sass` options to use when rendering the stylesheet.
      */
-    compileStringAsync(source, options) {
-        // The `functions`, `logger` and `importer` options are JavaScript functions that cannot be transferred.
-        // If any additional function options are added in the future, they must be excluded as well.
-        const { functions, importers, url, logger, ...serializableOptions } = options;
-        // The CLI's configuration does not use or expose the ability to defined custom Sass functions
-        if (functions && Object.keys(functions).length > 0) {
-            throw new Error('Sass custom functions are not supported.');
-        }
-        return new Promise((resolve, reject) => {
-            let workerIndex = this.availableWorkers.pop();
-            if (workerIndex === undefined) {
-                if (this.workers.length < MAX_RENDER_WORKERS) {
-                    workerIndex = this.workers.length;
-                    this.workers.push(this.createWorker());
-                }
-                else {
-                    workerIndex = this.nextWorkerIndex++;
-                    if (this.nextWorkerIndex >= this.workers.length) {
-                        this.nextWorkerIndex = 0;
-                    }
-                }
+    async compileStringAsync(source, options) {
+        const env_1 = { stack: [], error: void 0, hasError: false };
+        try {
+            // The `functions`, `logger` and `importer` options are JavaScript functions that cannot be transferred.
+            // If any additional function options are added in the future, they must be excluded as well.
+            const { functions, importers, url, logger, ...serializableOptions } = options;
+            // The CLI's configuration does not use or expose the ability to define custom Sass functions
+            if (functions && Object.keys(functions).length > 0) {
+                throw new Error('Sass custom functions are not supported.');
             }
-            const callback = (error, result) => {
-                if (error) {
-                    const url = error.span?.url;
-                    if (url) {
-                        error.span.url = (0, node_url_1.pathToFileURL)(url);
-                    }
-                    reject(error);
-                    return;
-                }
-                if (!result) {
-                    reject(new Error('No result.'));
-                    return;
-                }
-                resolve(result);
-            };
-            const request = this.createRequest(workerIndex, callback, logger, importers);
-            this.requests.set(request.id, request);
-            this.workers[workerIndex].postMessage({
-                id: request.id,
+            const importerChannel = __addDisposableResource(env_1, importers?.length ? this.#createImporterChannel(importers) : undefined, false);
+            const response = (await this.#ensureWorkerPool().run({
                 source,
-                hasImporter: !!importers?.length,
+                importerChannel,
                 hasLogger: !!logger,
                 rebase: this.rebase,
                 options: {
@@ -102,39 +133,13 @@ class SassWorkerImplementation {
                     // URL is not serializable so to convert to string here and back to URL in the worker.
                     url: url ? (0, node_url_1.fileURLToPath)(url) : undefined,
                 },
-            });
-        });
-    }
-    /**
-     * Shutdown the Sass render worker.
-     * Executing this method will stop any pending render requests.
-     */
-    close() {
-        for (const worker of this.workers) {
-            try {
-                void worker.terminate();
-            }
-            catch { }
-        }
-        this.requests.clear();
-    }
-    createWorker() {
-        const { port1: mainImporterPort, port2: workerImporterPort } = new node_worker_threads_1.MessageChannel();
-        const importerSignal = new Int32Array(new SharedArrayBuffer(4));
-        const worker = new node_worker_threads_1.Worker(this.workerPath, {
-            workerData: { workerImporterPort, importerSignal },
-            transferList: [workerImporterPort],
-        });
-        worker.on('message', (response) => {
-            const request = this.requests.get(response.id);
-            if (!request) {
-                return;
-            }
-            this.requests.delete(response.id);
-            this.availableWorkers.push(request.workerIndex);
-            if (response.warnings && request.logger?.warn) {
-                for (const { message, span, ...options } of response.warnings) {
-                    request.logger.warn(message, {
+            }, {
+                transferList: importerChannel ? [importerChannel.port] : undefined,
+            }));
+            const { result, error, warnings } = response;
+            if (warnings && logger?.warn) {
+                for (const { message, span, ...options } of warnings) {
+                    logger.warn(message, {
                         ...options,
                         span: span && {
                             ...span,
@@ -143,26 +148,49 @@ class SassWorkerImplementation {
                     });
                 }
             }
-            if (response.result) {
-                request.callback(undefined, {
-                    ...response.result,
-                    // URL is not serializable so in the worker we convert to string and here back to URL.
-                    loadedUrls: response.result.loadedUrls.map((p) => (0, node_url_1.pathToFileURL)(p)),
-                });
+            if (error) {
+                // Convert stringified url value required for cloning back to a URL object
+                const url = error.span?.url;
+                if (url) {
+                    error.span.url = (0, node_url_1.pathToFileURL)(url);
+                }
+                throw error;
             }
-            else {
-                request.callback(response.error);
+            (0, node_assert_1.default)(result, 'Sass render worker should always return a result or an error');
+            return {
+                ...result,
+                // URL is not serializable so in the worker we convert to string and here back to URL.
+                loadedUrls: result.loadedUrls.map((p) => (0, node_url_1.pathToFileURL)(p)),
+            };
+        }
+        catch (e_1) {
+            env_1.error = e_1;
+            env_1.hasError = true;
+        }
+        finally {
+            __disposeResources(env_1);
+        }
+    }
+    /**
+     * Shutdown the Sass render worker.
+     * Executing this method will stop any pending render requests.
+     * @returns A void promise that resolves when closing is complete.
+     */
+    async close() {
+        if (this.#workerPool) {
+            try {
+                await this.#workerPool.destroy();
             }
-        });
-        mainImporterPort.on('message', ({ id, url, options }) => {
-            const request = this.requests.get(id);
-            if (!request?.importers) {
-                mainImporterPort.postMessage(null);
-                Atomics.store(importerSignal, 0, 1);
-                Atomics.notify(importerSignal, 0);
-                return;
+            finally {
+                this.#workerPool = undefined;
             }
-            this.processImporters(request.importers, url, {
+        }
+    }
+    #createImporterChannel(importers) {
+        const { port1: mainImporterPort, port2: workerImporterPort } = new node_worker_threads_1.MessageChannel();
+        const importerSignal = new Int32Array(new SharedArrayBuffer(4));
+        mainImporterPort.on('message', ({ url, options }) => {
+            this.processImporters(importers, url, {
                 ...options,
                 // URL is not serializable so in the worker we convert to string and here back to URL.
                 containingUrl: options.containingUrl
@@ -181,7 +209,13 @@ class SassWorkerImplementation {
             });
         });
         mainImporterPort.unref();
-        return worker;
+        return {
+            port: workerImporterPort,
+            signal: importerSignal,
+            [Symbol.dispose]() {
+                mainImporterPort.close();
+            },
+        };
     }
     async processImporters(importers, url, options) {
         for (const importer of importers) {
@@ -197,15 +231,6 @@ class SassWorkerImplementation {
         }
         return null;
     }
-    createRequest(workerIndex, callback, logger, importers) {
-        return {
-            id: this.idCounter++,
-            workerIndex,
-            callback,
-            logger,
-            importers,
-        };
-    }
     isFileImporter(value) {
         return 'findFileUrl' in value;
     }

package/src/tools/sass/worker.d.ts

@@ -5,4 +5,80 @@
  * 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
  */
+/// <reference types="node" />
+/// <reference types="source-map-js/source-map" />
+import { MessagePort } from 'node:worker_threads';
+import { SourceSpan, StringOptions } from 'sass';
+import type { SerializableWarningMessage } from './sass-service';
+/**
+ * A request to render a Sass stylesheet using the supplied options.
+ */
+interface RenderRequestMessage {
+    /**
+     * The contents to compile.
+     */
+    source: string;
+    /**
+     * The Sass options to provide to the `dart-sass` compile function.
+     */
+    options: Omit<StringOptions<'sync'>, 'url'> & {
+        url: string;
+    };
+    /**
+     * Indicates the request has a custom importer function on the main thread.
+     */
+    importerChannel?: {
+        port: MessagePort;
+        signal: Int32Array;
+    };
+    /**
+     * Indicates the request has a custom logger for warning messages.
+     */
+    hasLogger: boolean;
+    /**
+     * Indicates paths within url() CSS functions should be rebased.
+     */
+    rebase: boolean;
+}
+export default function renderSassStylesheet(request: RenderRequestMessage): Promise<{
+    warnings: SerializableWarningMessage[] | undefined;
+    result: {
+        loadedUrls: string[];
+        css: string;
+        sourceMap?: import("source-map-js").RawSourceMap | undefined;
+    };
+    error?: undefined;
+} | {
+    warnings: SerializableWarningMessage[] | undefined;
+    error: {
+        span: Omit<SourceSpan, "url"> & {
+            url?: string | undefined;
+        };
+        message: string;
+        stack: string | undefined;
+        sassMessage: string;
+        sassStack: string;
+    };
+    result?: undefined;
+} | {
+    warnings: SerializableWarningMessage[] | undefined;
+    error: {
+        message: string;
+        stack: string | undefined;
+        span?: undefined;
+        sassMessage?: undefined;
+        sassStack?: undefined;
+    };
+    result?: undefined;
+} | {
+    warnings: SerializableWarningMessage[] | undefined;
+    error: {
+        message: string;
+        span?: undefined;
+        stack?: undefined;
+        sassMessage?: undefined;
+        sassStack?: undefined;
+    };
+    result?: undefined;
+}>;
 export {};

package/src/tools/sass/worker.js

@@ -16,22 +16,14 @@ const node_url_1 = require("node:url");
 const node_worker_threads_1 = require("node:worker_threads");
 const sass_1 = require("sass");
 const rebasing_importer_1 = require("./rebasing-importer");
-if (!node_worker_threads_1.parentPort || !node_worker_threads_1.workerData) {
-    throw new Error('Sass worker must be executed as a Worker.');
-}
-// The importer variables are used to proxy import requests to the main thread
-const { workerImporterPort, importerSignal } = node_worker_threads_1.workerData;
-node_worker_threads_1.parentPort.on('message', (message) => {
-    if (!node_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, rebase } = message;
+async function renderSassStylesheet(request) {
+    const { importerChannel, hasLogger, source, options, rebase } = request;
     const entryDirectory = (0, node_path_1.dirname)(options.url);
     let warnings;
     try {
         const directoryCache = new Map();
         const rebaseSourceMaps = options.sourceMap ? new Map() : undefined;
-        if (hasImporter) {
+        if (importerChannel) {
             // When a custom importer function is present, the importer request must be proxied
             // back to the main thread where it can be executed.
             // This process must be synchronous from the perspective of dart-sass. The `Atomics`
@@ -39,17 +31,16 @@ node_worker_threads_1.parentPort.on('message', (message) => {
             // `receiveMessageOnPort` function are used to ensure synchronous behavior.
             const proxyImporter = {
                 findFileUrl: (url, { fromImport, containingUrl }) => {
-                    Atomics.store(importerSignal, 0, 0);
-                    workerImporterPort.postMessage({
-                        id,
+                    Atomics.store(importerChannel.signal, 0, 0);
+                    importerChannel.port.postMessage({
                         url,
                         options: {
                             fromImport,
                             containingUrl: containingUrl ? (0, node_url_1.fileURLToPath)(containingUrl) : null,
                         },
                     });
-                    Atomics.wait(importerSignal, 0, 0);
-                    const result = (0, node_worker_threads_1.receiveMessageOnPort)(workerImporterPort)?.message;
+                    Atomics.wait(importerChannel.signal, 0, 0);
+                    const result = (0, node_worker_threads_1.receiveMessageOnPort)(importerChannel.port)?.message;
                     return result ? (0, node_url_1.pathToFileURL)(result) : null;
                 },
             };
@@ -99,22 +90,20 @@ node_worker_threads_1.parentPort.on('message', (message) => {
             // is referencing its original self.
             (file, context) => (file !== context.importer ? rebaseSourceMaps.get(file) : null));
         }
-        node_worker_threads_1.parentPort.postMessage({
-            id,
+        return {
             warnings,
             result: {
                 ...result,
                 // URL is not serializable so to convert to string here and back to URL in the parent.
                 loadedUrls: result.loadedUrls.map((p) => (0, node_url_1.fileURLToPath)(p)),
             },
-        });
+        };
     }
     catch (error) {
         // Needed because V8 will only serialize the message and stack properties of an Error instance.
         if (error instanceof sass_1.Exception) {
             const { span, message, stack, sassMessage, sassStack } = error;
-            node_worker_threads_1.parentPort.postMessage({
-                id,
+            return {
                 warnings,
                 error: {
                     span: convertSourceSpan(span),
@@ -123,21 +112,21 @@ node_worker_threads_1.parentPort.on('message', (message) => {
                     sassMessage,
                     sassStack,
                 },
-            });
+            };
         }
         else if (error instanceof Error) {
             const { message, stack } = error;
-            node_worker_threads_1.parentPort.postMessage({ id, warnings, error: { message, stack } });
+            return { warnings, error: { message, stack } };
         }
         else {
-            node_worker_threads_1.parentPort.postMessage({
-                id,
+            return {
                 warnings,
                 error: { message: 'An unknown error has occurred.' },
-            });
+            };
         }
     }
-});
+}
+exports.default = renderSassStylesheet;
 /**
  * Converts a Sass SourceSpan object into a serializable form.
  * The SourceSpan object contains a URL property which must be converted into a string.

package/src/utils/format-bytes.js

@@ -13,8 +13,8 @@ function formatSize(size) {
         return '0 bytes';
     }
     const abbreviations = ['bytes', 'kB', 'MB', 'GB'];
-    const index = Math.floor(Math.log(size) / Math.log(1024));
-    const roundedSize = size / Math.pow(1024, index);
+    const index = Math.floor(Math.log(size) / Math.log(1000));
+    const roundedSize = size / Math.pow(1000, index);
     // bytes don't have a fraction
     const fractionDigits = index === 0 ? 0 : 2;
     return `${roundedSize.toFixed(fractionDigits)} ${abbreviations[index]}`;

package/src/utils/normalize-cache.js

@@ -10,7 +10,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.normalizeCacheOptions = void 0;
 const node_path_1 = require("node:path");
 /** Version placeholder is replaced during the build process with actual package version */
-const VERSION = '18.0.0-rc.1';
+const VERSION = '18.0.0-rc.3';
 function hasCacheMetadata(value) {
     return (!!value &&
         typeof value === 'object' &&

package/src/utils/server-rendering/fetch-patch.js

@@ -36,7 +36,8 @@ function patchFetchToLoadInMemoryAssets() {
         else {
             return originalFetch(input, init);
         }
-        const { pathname, protocol } = url;
+        const { protocol } = url;
+        const pathname = decodeURIComponent(url.pathname);
         if (protocol !== RESOLVE_PROTOCOL || !assetFiles[pathname]) {
             // Only handle relative requests or files that are in assets.
             return originalFetch(input, init);

package/src/utils/version.js

@@ -58,7 +58,7 @@ function assertCompatibleAngularVersion(projectRoot) {
     if (!(0, semver_1.satisfies)(angularVersion, supportedAngularSemver, { includePrerelease: true })) {
         console.error(`This version of CLI is only compatible with Angular versions ${supportedAngularSemver},\n` +
             `but Angular version ${angularVersion} was found instead.\n` +
-            'Please visit the link below to find instructions on how to update Angular.\nhttps://update.angular.io/');
+            'Please visit the link below to find instructions on how to update Angular.\nhttps://update.angular.dev/');
         process.exit(3);
     }
 }

package/src/utils/index-file/style-nonce.d.ts

@@ -1,12 +0,0 @@
-/**
- * @license
- * Copyright Google LLC All Rights Reserved.
- *
- * Use of this source code is governed by an MIT-style license that can be
- * found in the LICENSE file at https://angular.io/license
- */
-/**
- * Finds the `ngCspNonce` value and copies it to all inline `<style>` and `<script> `tags.
- * @param html Markup that should be processed.
- */
-export declare function addNonce(html: string): Promise<string>;

package/src/utils/index-file/style-nonce.js

@@ -1,55 +0,0 @@
-"use strict";
-/**
- * @license
- * Copyright Google LLC All Rights Reserved.
- *
- * Use of this source code is governed by an MIT-style license that can be
- * found in the LICENSE file at https://angular.io/license
- */
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.addNonce = void 0;
-const html_rewriting_stream_1 = require("./html-rewriting-stream");
-/**
- * Pattern matching the name of the Angular nonce attribute. Note that this is
- * case-insensitive, because HTML attribute names are case-insensitive as well.
- */
-const NONCE_ATTR_PATTERN = /ngCspNonce/i;
-/**
- * Finds the `ngCspNonce` value and copies it to all inline `<style>` and `<script> `tags.
- * @param html Markup that should be processed.
- */
-async function addNonce(html) {
-    const nonce = await findNonce(html);
-    if (!nonce) {
-        return html;
-    }
-    const { rewriter, transformedContent } = await (0, html_rewriting_stream_1.htmlRewritingStream)(html);
-    rewriter.on('startTag', (tag) => {
-        if ((tag.tagName === 'style' ||
-            (tag.tagName === 'script' && !tag.attrs.some((attr) => attr.name === 'src'))) &&
-            !tag.attrs.some((attr) => attr.name === 'nonce')) {
-            tag.attrs.push({ name: 'nonce', value: nonce });
-        }
-        rewriter.emitStartTag(tag);
-    });
-    return transformedContent();
-}
-exports.addNonce = addNonce;
-/** Finds the Angular nonce in an HTML string. */
-async function findNonce(html) {
-    // Inexpensive check to avoid parsing the HTML when we're sure there's no nonce.
-    if (!NONCE_ATTR_PATTERN.test(html)) {
-        return null;
-    }
-    const { rewriter, transformedContent } = await (0, html_rewriting_stream_1.htmlRewritingStream)(html);
-    let nonce = null;
-    rewriter.on('startTag', (tag) => {
-        const nonceAttr = tag.attrs.find((attr) => NONCE_ATTR_PATTERN.test(attr.name));
-        if (nonceAttr?.value) {
-            nonce = nonceAttr.value;
-            rewriter.stop(); // Stop parsing since we've found the nonce.
-        }
-    });
-    await transformedContent();
-    return nonce;
-}