@angular-devkit/build-angular 17.1.0-next.0 → 17.1.0-next.1

package/package.json

@@ -1,15 +1,15 @@
 {
   "name": "@angular-devkit/build-angular",
-  "version": "17.1.0-next.0",
+  "version": "17.1.0-next.1",
   "description": "Angular Webpack Build Facade",
   "main": "src/index.js",
   "typings": "src/index.d.ts",
   "builders": "builders.json",
   "dependencies": {
     "@ampproject/remapping": "2.2.1",
-    "@angular-devkit/architect": "0.1701.0-next.0",
-    "@angular-devkit/build-webpack": "0.1701.0-next.0",
-    "@angular-devkit/core": "17.1.0-next.0",
+    "@angular-devkit/architect": "0.1701.0-next.1",
+    "@angular-devkit/build-webpack": "0.1701.0-next.1",
+    "@angular-devkit/core": "17.1.0-next.1",
     "@babel/core": "7.23.5",
     "@babel/generator": "7.23.5",
     "@babel/helper-annotate-as-pure": "7.22.5",
@@ -20,14 +20,13 @@
     "@babel/preset-env": "7.23.5",
     "@babel/runtime": "7.23.5",
     "@discoveryjs/json-ext": "0.5.7",
-    "@ngtools/webpack": "17.1.0-next.0",
+    "@ngtools/webpack": "17.1.0-next.1",
     "@vitejs/plugin-basic-ssl": "1.0.2",
     "ansi-colors": "4.1.3",
     "autoprefixer": "10.4.16",
     "babel-loader": "9.1.3",
     "babel-plugin-istanbul": "6.1.1",
     "browserslist": "^4.21.5",
-    "browser-sync": "2.29.3",
     "chokidar": "3.5.3",
     "copy-webpack-plugin": "11.0.0",
     "critters": "0.0.20",
@@ -51,7 +50,7 @@
     "parse5-html-rewriting-stream": "7.0.0",
     "picomatch": "3.0.1",
     "piscina": "4.2.0",
-    "postcss": "8.4.31",
+    "postcss": "8.4.32",
     "postcss-loader": "7.3.3",
     "resolve-url-loader": "5.0.0",
     "rxjs": "7.8.1",
@@ -60,12 +59,12 @@
     "semver": "7.5.4",
     "source-map-loader": "4.0.1",
     "source-map-support": "0.5.21",
-    "terser": "5.24.0",
+    "terser": "5.25.0",
     "text-table": "0.2.0",
     "tree-kill": "1.2.2",
     "tslib": "2.6.2",
-    "undici": "5.28.1",
-    "vite": "5.0.4",
+    "undici": "6.0.1",
+    "vite": "5.0.6",
     "webpack": "5.89.0",
     "webpack-dev-middleware": "6.1.1",
     "webpack-dev-server": "4.15.1",
@@ -80,6 +79,7 @@
     "@angular/localize": "^17.0.0 || ^17.1.0-next.0",
     "@angular/platform-server": "^17.0.0 || ^17.1.0-next.0",
     "@angular/service-worker": "^17.0.0 || ^17.1.0-next.0",
+    "browser-sync": "^2.29.3",
     "jest": "^29.5.0",
     "jest-environment-jsdom": "^29.5.0",
     "karma": "^6.3.0",
@@ -98,6 +98,9 @@
     "@angular/service-worker": {
       "optional": true
     },
+    "browser-sync": {
+      "optional": true
+    },
     "jest": {
       "optional": true
     },

package/src/builders/application/build-action.d.ts

@@ -24,4 +24,5 @@ export declare function runEsBuildBuildAction(action: (rebuildState?: RebuildSta
     deleteOutputPath?: boolean;
     poll?: number;
     signal?: AbortSignal;
+    preserveSymlinks?: boolean;
 }): AsyncIterable<(ExecutionResult['outputWithFiles'] | ExecutionResult['output']) & BuilderOutput>;

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

@@ -40,7 +40,7 @@ const utils_1 = require("../../tools/esbuild/utils");
 const delete_output_dir_1 = require("../../utils/delete-output-dir");
 const environment_options_1 = require("../../utils/environment-options");
 async function* runEsBuildBuildAction(action, options) {
-    const { writeToFileSystemFilter, writeToFileSystem = true, watch, poll, logger, deleteOutputPath, cacheOptions, outputPath, verbose, projectRoot, workspaceRoot, progress, } = options;
+    const { writeToFileSystemFilter, writeToFileSystem = true, watch, poll, logger, deleteOutputPath, cacheOptions, outputPath, verbose, projectRoot, workspaceRoot, progress, preserveSymlinks, } = options;
     if (deleteOutputPath && writeToFileSystem) {
         await (0, delete_output_dir_1.deleteOutputDir)(workspaceRoot, outputPath);
     }
@@ -67,6 +67,7 @@ async function* runEsBuildBuildAction(action, options) {
         watcher = createWatcher({
             polling: typeof poll === 'number',
             interval: poll,
+            followSymlinks: preserveSymlinks,
             ignored: [
                 // Ignore the output and cache paths to avoid infinite rebuild cycles
                 outputPath,

package/src/builders/application/execute-post-bundle.js

@@ -39,9 +39,11 @@ async function executePostBundleSteps(options, outputFiles, assetFiles, initialF
      * NOTE: we don't perform critical CSS inlining as this will be done during server rendering.
      */
     let indexContentOutputNoCssInlining;
+    // When using prerender/app-shell the index HTML file can be regenerated.
+    // Thus, we use a Map so that we do not generate 2 files with the same filename.
+    const additionalHtmlOutputFiles = new Map();
     // Generate index HTML file
     // If localization is enabled, index generation is handled in the inlining process.
-    // NOTE: Localization with SSR is not currently supported.
     if (indexHtmlOptions) {
         const { content, contentWithoutCriticalCssInlined, errors, warnings } = await (0, index_html_generator_1.generateIndexHtml)(initialFiles, outputFiles, {
             ...options,
@@ -50,9 +52,10 @@ async function executePostBundleSteps(options, outputFiles, assetFiles, initialF
         indexContentOutputNoCssInlining = contentWithoutCriticalCssInlined;
         allErrors.push(...errors);
         allWarnings.push(...warnings);
-        additionalOutputFiles.push((0, utils_1.createOutputFileFromText)(indexHtmlOptions.output, content, bundler_context_1.BuildOutputFileType.Browser));
+        additionalHtmlOutputFiles.set(indexHtmlOptions.output, (0, utils_1.createOutputFileFromText)(indexHtmlOptions.output, content, bundler_context_1.BuildOutputFileType.Browser));
         if (ssrOptions) {
-            additionalOutputFiles.push((0, utils_1.createOutputFileFromText)('index.server.html', contentWithoutCriticalCssInlined, bundler_context_1.BuildOutputFileType.Server));
+            const serverIndexHtmlFilename = 'index.server.html';
+            additionalHtmlOutputFiles.set(serverIndexHtmlFilename, (0, utils_1.createOutputFileFromText)(serverIndexHtmlFilename, contentWithoutCriticalCssInlined, bundler_context_1.BuildOutputFileType.Server));
         }
     }
     // Pre-render (SSG) and App-shell
@@ -64,9 +67,10 @@ async function executePostBundleSteps(options, outputFiles, assetFiles, initialF
         allWarnings.push(...warnings);
         prerenderedRoutes.push(...Array.from(generatedRoutes));
         for (const [path, content] of Object.entries(output)) {
-            additionalOutputFiles.push((0, utils_1.createOutputFileFromText)(path, content, bundler_context_1.BuildOutputFileType.Browser));
+            additionalHtmlOutputFiles.set(path, (0, utils_1.createOutputFileFromText)(path, content, bundler_context_1.BuildOutputFileType.Browser));
         }
     }
+    additionalOutputFiles.push(...additionalHtmlOutputFiles.values());
     // Augment the application with service worker support
     // If localization is enabled, service worker is handled in the inlining process.
     if (serviceWorker) {

package/src/builders/application/index.js

@@ -29,6 +29,13 @@ context, infrastructureSettings, plugins) {
         return;
     }
     const normalizedOptions = await (0, options_1.normalizeOptions)(context, projectName, options, plugins);
+    // Setup an abort controller with a builder teardown if no signal is present
+    let signal = context.signal;
+    if (!signal) {
+        const controller = new AbortController();
+        signal = controller.signal;
+        context.addTeardown(() => controller.abort('builder-teardown'));
+    }
     yield* (0, build_action_1.runEsBuildBuildAction)(async (rebuildState) => {
         const startTime = process.hrtime.bigint();
         const result = await (0, execute_build_1.executeBuild)(normalizedOptions, context, rebuildState);
@@ -38,6 +45,7 @@ context, infrastructureSettings, plugins) {
         return result;
     }, {
         watch: normalizedOptions.watch,
+        preserveSymlinks: normalizedOptions.preserveSymlinks,
         poll: normalizedOptions.poll,
         deleteOutputPath: normalizedOptions.deleteOutputPath,
         cacheOptions: normalizedOptions.cacheOptions,
@@ -53,7 +61,7 @@ context, infrastructureSettings, plugins) {
             ? undefined
             : (file) => file.type !== bundler_context_1.BuildOutputFileType.Server,
         logger: context.logger,
-        signal: context.signal,
+        signal,
     });
 }
 exports.buildApplicationInternal = buildApplicationInternal;

package/src/builders/application/options.js

@@ -181,7 +181,7 @@ async function normalizeOptions(context, projectName, options, plugins) {
     const { allowedCommonJsDependencies, aot, baseHref, crossOrigin, externalDependencies, extractLicenses, inlineStyleLanguage = 'css', outExtension, serviceWorker, poll, polyfills, statsJson, stylePreprocessorOptions, subresourceIntegrity, verbose, watch, progress = true, externalPackages, deleteOutputPath, namedChunks, budgets, deployUrl, } = options;
     // Return all the normalized options
     return {
-        advancedOptimizations: !!aot,
+        advancedOptimizations: !!aot && optimizationOptions.scripts,
         allowedCommonJsDependencies,
         baseHref,
         cacheOptions,

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

@@ -157,7 +157,7 @@ async function* serveWithVite(serverOptions, builderName, context, transformers,
         assetFiles.clear();
         if (result.assetFiles) {
             for (const asset of result.assetFiles) {
-                assetFiles.set('/' + normalizePath(asset.destination), asset.source);
+                assetFiles.set('/' + normalizePath(asset.destination), normalizePath(asset.source));
             }
         }
         // To avoid disconnecting the array objects from the option, these arrays need to be mutated instead of replaced.

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

@@ -35,7 +35,6 @@ const architect_1 = require("@angular-devkit/architect");
 const core_1 = require("@angular-devkit/core");
 const path_1 = require("path");
 const rxjs_1 = require("rxjs");
-const operators_1 = require("rxjs/operators");
 const url = __importStar(require("url"));
 const error_1 = require("../../utils/error");
 const utils_1 = require("./utils");
@@ -60,7 +59,17 @@ function execute(options, context) {
         progress: options.progress,
         verbose: options.verbose,
     });
-    const bsInstance = require('browser-sync').create();
+    let browserSync;
+    try {
+        browserSync = require('browser-sync');
+    }
+    catch {
+        return (0, rxjs_1.of)({
+            success: false,
+            error: '"browser-sync" is not installed, most likely you need to run `npm install browser-sync --save-dev` in your project.',
+        });
+    }
+    const bsInstance = browserSync.create();
     context.logger.error(core_1.tags.stripIndents `
   ****************************************************************************************
   This is a simple server for use in testing or debugging Angular applications locally.
@@ -69,35 +78,35 @@ function execute(options, context) {
   DON'T USE IT FOR PRODUCTION!
   ****************************************************************************************
  `);
-    return (0, rxjs_1.zip)(browserTargetRun, serverTargetRun, (0, utils_1.getAvailablePort)()).pipe((0, operators_1.switchMap)(([br, sr, nodeServerPort]) => {
+    return (0, rxjs_1.zip)(browserTargetRun, serverTargetRun, (0, utils_1.getAvailablePort)()).pipe((0, rxjs_1.switchMap)(([br, sr, nodeServerPort]) => {
         return (0, rxjs_1.combineLatest)([br.output, sr.output]).pipe(
         // This is needed so that if both server and browser emit close to each other
         // we only emit once. This typically happens on the first build.
-        (0, operators_1.debounceTime)(120), (0, operators_1.switchMap)(([b, s]) => {
+        (0, rxjs_1.debounceTime)(120), (0, rxjs_1.switchMap)(([b, s]) => {
             if (!s.success || !b.success) {
                 return (0, rxjs_1.of)([b, s]);
             }
-            return startNodeServer(s, nodeServerPort, context.logger, !!options.inspect).pipe((0, operators_1.mapTo)([b, s]), (0, operators_1.catchError)((err) => {
+            return startNodeServer(s, nodeServerPort, context.logger, !!options.inspect).pipe((0, rxjs_1.map)(() => [b, s]), (0, rxjs_1.catchError)((err) => {
                 context.logger.error(`A server error has occurred.\n${mapErrorToMessage(err)}`);
                 return rxjs_1.EMPTY;
             }));
-        }), (0, operators_1.map)(([b, s]) => [
+        }), (0, rxjs_1.map)(([b, s]) => [
             {
                 success: b.success && s.success,
                 error: b.error || s.error,
             },
             nodeServerPort,
-        ]), (0, operators_1.tap)(([builderOutput]) => {
+        ]), (0, rxjs_1.tap)(([builderOutput]) => {
             if (builderOutput.success) {
                 context.logger.info('\nCompiled successfully.');
             }
-        }), (0, operators_1.debounce)(([builderOutput]) => builderOutput.success && !options.inspect
+        }), (0, rxjs_1.debounce)(([builderOutput]) => builderOutput.success && !options.inspect
             ? (0, utils_1.waitUntilServerIsListening)(nodeServerPort)
-            : rxjs_1.EMPTY), (0, operators_1.finalize)(() => {
+            : rxjs_1.EMPTY), (0, rxjs_1.finalize)(() => {
             void br.stop();
             void sr.stop();
         }));
-    }), (0, operators_1.concatMap)(([builderOutput, nodeServerPort]) => {
+    }), (0, rxjs_1.concatMap)(([builderOutput, nodeServerPort]) => {
         if (!builderOutput.success) {
             return (0, rxjs_1.of)(builderOutput);
         }
@@ -106,7 +115,7 @@ function execute(options, context) {
             return (0, rxjs_1.of)(builderOutput);
         }
         else {
-            return (0, rxjs_1.from)(initBrowserSync(bsInstance, nodeServerPort, options, context)).pipe((0, operators_1.tap)((bs) => {
+            return (0, rxjs_1.from)(initBrowserSync(bsInstance, nodeServerPort, options, context)).pipe((0, rxjs_1.tap)((bs) => {
                 const baseUrl = getBaseUrl(bs);
                 context.logger.info(core_1.tags.oneLine `
                 **
@@ -114,19 +123,19 @@ function execute(options, context) {
                 open your browser on ${baseUrl}
                 **
               `);
-            }), (0, operators_1.mapTo)(builderOutput));
+            }), (0, rxjs_1.map)(() => builderOutput));
         }
-    }), (0, operators_1.map)((builderOutput) => ({
+    }), (0, rxjs_1.map)((builderOutput) => ({
         success: builderOutput.success,
         error: builderOutput.error,
         baseUrl: getBaseUrl(bsInstance),
         port: bsInstance.getOption('port'),
-    })), (0, operators_1.finalize)(() => {
+    })), (0, rxjs_1.finalize)(() => {
         if (bsInstance) {
             bsInstance.exit();
             bsInstance.cleanup();
         }
-    }), (0, operators_1.catchError)((error) => (0, rxjs_1.of)({
+    }), (0, rxjs_1.catchError)((error) => (0, rxjs_1.of)({
         success: false,
         error: mapErrorToMessage(error),
     })));
@@ -152,10 +161,10 @@ function startNodeServer(serverOutput, port, logger, inspectMode = false) {
     if (inspectMode) {
         args.unshift('--inspect-brk');
     }
-    return (0, rxjs_1.of)(null).pipe((0, operators_1.delay)(0), // Avoid EADDRINUSE error since it will cause the kill event to be finish.
-    (0, operators_1.switchMap)(() => (0, utils_1.spawnAsObservable)('node', args, { env, shell: true })), (0, operators_1.tap)((res) => log({ stderr: res.stderr, stdout: res.stdout }, logger)), (0, operators_1.ignoreElements)(), 
+    return (0, rxjs_1.of)(null).pipe((0, rxjs_1.delay)(0), // Avoid EADDRINUSE error since it will cause the kill event to be finish.
+    (0, rxjs_1.switchMap)(() => (0, utils_1.spawnAsObservable)('node', args, { env, shell: true })), (0, rxjs_1.tap)((res) => log({ stderr: res.stderr, stdout: res.stdout }, logger)), (0, rxjs_1.ignoreElements)(), 
     // Emit a signal after the process has been started
-    (0, operators_1.startWith)(undefined));
+    (0, rxjs_1.startWith)(undefined));
 }
 async function initBrowserSync(browserSyncInstance, nodeServerPort, options, context) {
     if (browserSyncInstance.active) {

package/src/tools/esbuild/i18n-locale-plugin.d.ts

@@ -6,6 +6,10 @@
  * found in the LICENSE file at https://angular.io/license
  */
 import type { Plugin } from 'esbuild';
+/**
+ * The internal namespace used by generated locale import statements and Angular locale data plugin.
+ */
+export declare const LOCALE_DATA_NAMESPACE = "angular:locale/data";
 /**
  * The base module location used to search for locale specific data.
  */

package/src/tools/esbuild/i18n-locale-plugin.js

@@ -7,7 +7,11 @@
  * found in the LICENSE file at https://angular.io/license
  */
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.createAngularLocaleDataPlugin = exports.LOCALE_DATA_BASE_MODULE = void 0;
+exports.createAngularLocaleDataPlugin = exports.LOCALE_DATA_BASE_MODULE = exports.LOCALE_DATA_NAMESPACE = void 0;
+/**
+ * The internal namespace used by generated locale import statements and Angular locale data plugin.
+ */
+exports.LOCALE_DATA_NAMESPACE = 'angular:locale/data';
 /**
  * The base module location used to search for locale specific data.
  */
@@ -33,12 +37,37 @@ function createAngularLocaleDataPlugin() {
             }
             build.onResolve({ filter: /^angular:locale\/data:/ }, async ({ path }) => {
                 // Extract the locale from the path
-                const originalLocale = path.split(':', 3)[2];
-                // Remove any private subtags since these will never match
-                let partialLocale = originalLocale.replace(/-x(-[a-zA-Z0-9]{1,8})+$/, '');
+                const rawLocaleTag = path.split(':', 3)[2];
+                // Extract and normalize the base name of the raw locale tag
+                let partialLocaleTag;
+                try {
+                    const locale = new Intl.Locale(rawLocaleTag);
+                    partialLocaleTag = locale.baseName;
+                }
+                catch {
+                    return {
+                        path: rawLocaleTag,
+                        namespace: exports.LOCALE_DATA_NAMESPACE,
+                        errors: [
+                            {
+                                text: `Invalid or unsupported locale provided in configuration: "${rawLocaleTag}"`,
+                            },
+                        ],
+                    };
+                }
                 let exact = true;
-                while (partialLocale) {
-                    const potentialPath = `${exports.LOCALE_DATA_BASE_MODULE}/${partialLocale}`;
+                while (partialLocaleTag) {
+                    // Angular embeds the `en`/`en-US` locale into the framework and it does not need to be included again here.
+                    // The onLoad hook below for the locale data namespace has an `empty` loader that will prevent inclusion.
+                    // Angular does not contain exact locale data for `en-US` but `en` is equivalent.
+                    if (partialLocaleTag === 'en' || partialLocaleTag === 'en-US') {
+                        return {
+                            path: rawLocaleTag,
+                            namespace: exports.LOCALE_DATA_NAMESPACE,
+                        };
+                    }
+                    // Attempt to resolve the locale tag data within the Angular base module location
+                    const potentialPath = `${exports.LOCALE_DATA_BASE_MODULE}/${partialLocaleTag}`;
                     const result = await build.resolve(potentialPath, {
                         kind: 'import-statement',
                         resolveDir: build.initialOptions.absWorkingDir,
@@ -54,36 +83,37 @@ function createAngularLocaleDataPlugin() {
                                     ...result.warnings,
                                     {
                                         location: null,
-                                        text: `Locale data for '${originalLocale}' cannot be found. Using locale data for '${partialLocale}'.`,
+                                        text: `Locale data for '${rawLocaleTag}' cannot be found. Using locale data for '${partialLocaleTag}'.`,
                                     },
                                 ],
                             };
                         }
                     }
-                    // Remove the last subtag and try again with a less specific locale
-                    const parts = partialLocale.split('-');
-                    partialLocale = parts.slice(0, -1).join('-');
+                    // Remove the last subtag and try again with a less specific locale.
+                    // Usually the match is exact so the string splitting here is not done until actually needed after the exact
+                    // match fails to resolve.
+                    const parts = partialLocaleTag.split('-');
+                    partialLocaleTag = parts.slice(0, -1).join('-');
                     exact = false;
-                    // The locales "en" and "en-US" are considered exact to retain existing behavior
-                    if (originalLocale === 'en-US' && partialLocale === 'en') {
-                        exact = true;
-                    }
                 }
                 // Not found so issue a warning and use an empty loader. Framework built-in `en-US` data will be used.
                 // This retains existing behavior as in the Webpack-based builder.
                 return {
-                    path: originalLocale,
-                    namespace: 'angular:locale/data',
+                    path: rawLocaleTag,
+                    namespace: exports.LOCALE_DATA_NAMESPACE,
                     warnings: [
                         {
                             location: null,
-                            text: `Locale data for '${originalLocale}' cannot be found. No locale data will be included for this locale.`,
+                            text: `Locale data for '${rawLocaleTag}' cannot be found. No locale data will be included for this locale.`,
                         },
                     ],
                 };
             });
             // Locales that cannot be found will be loaded as empty content with a warning from the resolve step
-            build.onLoad({ filter: /./, namespace: 'angular:locale/data' }, () => ({ loader: 'empty' }));
+            build.onLoad({ filter: /./, namespace: exports.LOCALE_DATA_NAMESPACE }, () => ({
+                contents: '',
+                loader: 'empty',
+            }));
         },
     };
 }

package/src/tools/esbuild/normalize-path.d.ts

@@ -0,0 +1,8 @@
+/**
+ * @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
+ */
+export declare function normalizePath(path: string): string;

package/src/tools/esbuild/normalize-path.js

@@ -0,0 +1,22 @@
+"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.normalizePath = void 0;
+const node_os_1 = require("node:os");
+const node_path_1 = require("node:path");
+const USING_WINDOWS = (0, node_os_1.platform)() === 'win32';
+function normalizePath(path) {
+    if (USING_WINDOWS) {
+        return (0, node_path_1.normalize)(path).toLowerCase();
+    }
+    else {
+        return (0, node_path_1.normalize)(path);
+    }
+}
+exports.normalizePath = normalizePath;

package/src/tools/esbuild/watcher.d.ts

@@ -21,4 +21,5 @@ export declare function createWatcher(options?: {
     polling?: boolean;
     interval?: number;
     ignored?: string[];
+    followSymlinks?: boolean;
 }): BuildWatcher;

package/src/tools/esbuild/watcher.js

@@ -32,6 +32,7 @@ function createWatcher(options) {
         usePolling: options?.polling,
         interval: options?.interval,
         ignored: options?.ignored,
+        followSymlinks: options?.followSymlinks,
         disableGlobbing: true,
         ignoreInitial: true,
     });
@@ -83,52 +84,23 @@ function createWatcher(options) {
      * ... (Nothing)
      * ```
      */
-    watcher.on('raw', (event, path, { watchedPath }) => {
+    watcher
+        .on('raw', (event, path, { watchedPath }) => {
+        if (watchedPath && !(0, node_path_1.extname)(watchedPath)) {
+            // Ignore directories, file changes in directories will be fired seperatly.
+            return;
+        }
         switch (event) {
-            case 'add':
-            case 'change':
-            // When using Visual Studio the rename event is fired before a change event when the contents of the file changed
-            // or instead of `unlink` when the file has been renamed.
-            case 'unlink':
             case 'rename':
+            case 'change':
                 // When polling is enabled `watchedPath` can be undefined.
                 // `path` is always normalized unlike `watchedPath`.
                 const changedPath = watchedPath ? (0, node_path_1.normalize)(watchedPath) : path;
-                currentEvents ??= new Map();
-                currentEvents.set(changedPath, event);
+                handleFileChange(event, changedPath);
                 break;
-            default:
-                return;
-        }
-        // 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 && currentEvents) {
-                    const events = currentEvents;
-                    currentEvents = undefined;
-                    const currentChanges = new ChangedFiles();
-                    for (const [path, event] of events) {
-                        switch (event) {
-                            case 'add':
-                                currentChanges.added.add(path);
-                                break;
-                            case 'change':
-                                currentChanges.modified.add(path);
-                                break;
-                            case 'unlink':
-                            case 'rename':
-                                currentChanges.removed.add(path);
-                                break;
-                        }
-                    }
-                    next(currentChanges);
-                }
-            }, 250);
-            nextWaitTimeout?.unref();
         }
-    });
+    })
+        .on('all', handleFileChange);
     return {
         [Symbol.asyncIterator]() {
             return this;
@@ -164,5 +136,48 @@ function createWatcher(options) {
             }
         },
     };
+    function handleFileChange(event, path) {
+        switch (event) {
+            case 'add':
+            case 'change':
+            // When using Visual Studio the rename event is fired before a change event when the contents of the file changed
+            // or instead of `unlink` when the file has been renamed.
+            case 'unlink':
+            case 'rename':
+                currentEvents ??= new Map();
+                currentEvents.set(path, event);
+                break;
+            default:
+                return;
+        }
+        // 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 && currentEvents) {
+                    const events = currentEvents;
+                    currentEvents = undefined;
+                    const currentChanges = new ChangedFiles();
+                    for (const [path, event] of events) {
+                        switch (event) {
+                            case 'add':
+                                currentChanges.added.add(path);
+                                break;
+                            case 'change':
+                                currentChanges.modified.add(path);
+                                break;
+                            case 'unlink':
+                            case 'rename':
+                                currentChanges.removed.add(path);
+                                break;
+                        }
+                    }
+                    next(currentChanges);
+                }
+            }, 250);
+            nextWaitTimeout?.unref();
+        }
+    }
 }
 exports.createWatcher = createWatcher;

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

@@ -16,6 +16,25 @@ const node_fs_1 = require("node:fs");
 const node_path_1 = require("node:path");
 const node_url_1 = require("node:url");
 const lexer_1 = require("./lexer");
+/**
+ * Ensures that a bare specifier URL path that is intended to be treated as
+ * a relative path has a leading `./` or `../` prefix.
+ *
+ * @param url A bare specifier URL path that should be considered relative.
+ * @returns
+ */
+function ensureRelative(url) {
+    // Empty
+    if (!url) {
+        return url;
+    }
+    // Already relative
+    if (url[0] === '.' && (url[1] === '/' || (url[1] === '.' && url[2] === '/'))) {
+        return url;
+    }
+    // Needs prefix
+    return './' + url;
+}
 /**
  * A Sass Importer base class that provides the load logic to rebase all `url()` functions
  * within a stylesheet. The rebasing will ensure that the URLs in the output of the Sass compiler
@@ -46,8 +65,13 @@ class UrlRebasingImporter {
         // Rebase any URLs that are found
         let updatedContents;
         for (const { start, end, value } of (0, lexer_1.findUrls)(contents)) {
-            // Skip if value is empty, a Sass variable, or Webpack-specific prefix
-            if (value.length === 0 || value[0] === '$' || value[0] === '~' || value[0] === '^') {
+            // Skip if value is empty or Webpack-specific prefix
+            if (value.length === 0 || value[0] === '~' || value[0] === '^') {
+                continue;
+            }
+            // Skip if value is a Sass variable.
+            // Sass variable usage either starts with a `$` or contains a namespace and a `.$`
+            if (value[0] === '$' || /^\w+\.\$/.test(value)) {
                 continue;
             }
             // Skip if root-relative, absolute or protocol relative url
@@ -57,9 +81,10 @@ class UrlRebasingImporter {
             const rebasedPath = (0, node_path_1.relative)(this.entryDirectory, (0, node_path_1.join)(stylesheetDirectory, value));
             // Normalize path separators and escape characters
             // https://developer.mozilla.org/en-US/docs/Web/CSS/url#syntax
-            const rebasedUrl = './' + rebasedPath.replace(/\\/g, '/').replace(/[()\s'"]/g, '\\$&');
+            const rebasedUrl = ensureRelative(rebasedPath.replace(/\\/g, '/').replace(/[()\s'"]/g, '\\$&'));
             updatedContents ??= new magic_string_1.default(contents);
-            updatedContents.update(start, end, rebasedUrl);
+            // Always quote the URL to avoid potential downstream parsing problems
+            updatedContents.update(start, end, `"${rebasedUrl}"`);
         }
         if (updatedContents) {
             contents = updatedContents.toString();

package/src/utils/server-rendering/esm-in-memory-loader/register-hooks.js

@@ -7,9 +7,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 Object.defineProperty(exports, "__esModule", { value: true });
-// TODO: remove the below once @types/node are version 20.x.x
-// @ts-expect-error "node:module"' has no exported member 'register'.ts(2305)
 const node_module_1 = require("node:module");
 const node_url_1 = require("node:url");
 const node_worker_threads_1 = require("node:worker_threads");
-(0, node_module_1.register)('./loader-hooks.js', (0, node_url_1.pathToFileURL)(__filename), { data: node_worker_threads_1.workerData });
+(0, node_module_1.register)('./loader-hooks.js', { parentURL: (0, node_url_1.pathToFileURL)(__filename), data: node_worker_threads_1.workerData });

package/src/utils/spinner.js

@@ -21,7 +21,7 @@ class Spinner {
     #isTTY = (0, tty_1.isTTY)();
     constructor(text) {
         this.spinner = (0, ora_1.default)({
-            text,
+            text: text === undefined ? undefined : text + '\n',
             // The below 2 options are needed because otherwise CTRL+C will be delayed
             // when the underlying process is sync.
             hideCursor: false,