@angular-devkit/build-angular 17.0.5 → 17.0.7

package/package.json

@@ -1,15 +1,15 @@
 {
   "name": "@angular-devkit/build-angular",
-  "version": "17.0.5",
+  "version": "17.0.7",
   "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.1700.5",
-    "@angular-devkit/build-webpack": "0.1700.5",
-    "@angular-devkit/core": "17.0.5",
+    "@angular-devkit/architect": "0.1700.7",
+    "@angular-devkit/build-webpack": "0.1700.7",
+    "@angular-devkit/core": "17.0.7",
     "@babel/core": "7.23.2",
     "@babel/generator": "7.23.0",
     "@babel/helper-annotate-as-pure": "7.22.5",
@@ -20,7 +20,7 @@
     "@babel/preset-env": "7.23.2",
     "@babel/runtime": "7.23.2",
     "@discoveryjs/json-ext": "0.5.7",
-    "@ngtools/webpack": "17.0.5",
+    "@ngtools/webpack": "17.0.7",
     "@vitejs/plugin-basic-ssl": "1.0.1",
     "ansi-colors": "4.1.3",
     "autoprefixer": "10.4.16",
@@ -65,7 +65,7 @@
     "tree-kill": "1.2.2",
     "tslib": "2.6.2",
     "undici": "5.27.2",
-    "vite": "4.5.0",
+    "vite": "4.5.1",
     "webpack": "5.89.0",
     "webpack-dev-middleware": "6.1.1",
     "webpack-dev-server": "4.15.1",

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,9 +40,9 @@ 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);
+        await (0, delete_output_dir_1.deleteOutputDir)(workspaceRoot, outputPath, ['browser', 'server']);
     }
     const withProgress = progress ? utils_1.withSpinner : utils_1.withNoProgress;
     // Initial build
@@ -62,20 +62,25 @@ async function* runEsBuildBuildAction(action, options) {
         if (progress) {
             logger.info('Watch mode enabled. Watching for file changes...');
         }
+        const ignored = [
+            // Ignore the output and cache paths to avoid infinite rebuild cycles
+            outputPath,
+            cacheOptions.basePath,
+            `${workspaceRoot.replace(/\\/g, '/')}/**/.*/**`,
+        ];
+        if (!preserveSymlinks) {
+            // Ignore all node modules directories to avoid excessive file watchers.
+            // Package changes are handled below by watching manifest and lock files.
+            // NOTE: this is not enable when preserveSymlinks is true as this would break `npm link` usages.
+            ignored.push('**/node_modules/**');
+        }
         // Setup a watcher
         const { createWatcher } = await Promise.resolve().then(() => __importStar(require('../../tools/esbuild/watcher')));
         watcher = createWatcher({
             polling: typeof poll === 'number',
             interval: poll,
-            ignored: [
-                // Ignore the output and cache paths to avoid infinite rebuild cycles
-                outputPath,
-                cacheOptions.basePath,
-                // Ignore all node modules directories to avoid excessive file watchers.
-                // Package changes are handled below by watching manifest and lock files.
-                '**/node_modules/**',
-                `${workspaceRoot.replace(/\\/g, '/')}/**/.*/**`,
-            ],
+            followSymlinks: preserveSymlinks,
+            ignored,
         });
         // Setup abort support
         options.signal?.addEventListener('abort', () => void watcher?.close());

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

@@ -38,6 +38,7 @@ context, infrastructureSettings, plugins) {
         return result;
     }, {
         watch: normalizedOptions.watch,
+        preserveSymlinks: normalizedOptions.preserveSymlinks,
         poll: normalizedOptions.poll,
         deleteOutputPath: normalizedOptions.deleteOutputPath,
         cacheOptions: normalizedOptions.cacheOptions,

package/src/builders/application/options.js

@@ -168,7 +168,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/browser-esbuild/builder-status-warnings.js

@@ -30,9 +30,7 @@ function logBuilderStatusWarnings(options, { logger }) {
         if (typeof value === 'object' && Object.keys(value).length === 0) {
             continue;
         }
-        if (unsupportedOption === 'vendorChunk' ||
-            unsupportedOption === 'resourcesOutputPath' ||
-            unsupportedOption === 'deployUrl') {
+        if (unsupportedOption === 'vendorChunk' || unsupportedOption === 'resourcesOutputPath') {
             logger.warn(`The '${unsupportedOption}' option is not used by this builder and will be ignored.`);
             continue;
         }

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

@@ -65,6 +65,11 @@ function execute(options, context, transforms = {}, extensions) {
             if (transforms?.logging || transforms?.webpackConfiguration) {
                 throw new Error('The `application` and `browser-esbuild` builders do not support Webpack transforms.');
             }
+            if (normalizedOptions.forceEsbuild &&
+                builderName === '@angular-devkit/build-angular:browser') {
+                // The compatibility builder should be used if esbuild is force enabled with the official Webpack-based builder.
+                builderName = '@angular-devkit/build-angular:browser-esbuild';
+            }
             return (0, rxjs_1.defer)(() => Promise.resolve().then(() => __importStar(require('./vite-server')))).pipe((0, rxjs_1.switchMap)(({ serveWithVite }) => serveWithVite(normalizedOptions, builderName, context, transforms, extensions)));
         }
         if (extensions?.buildPlugins?.length) {

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

@@ -73,8 +73,11 @@ async function* serveWithVite(serverOptions, builderName, context, transformers,
     }
     // Set all packages as external to support Vite's prebundle caching
     browserOptions.externalPackages = serverOptions.cacheOptions.enabled;
-    if (serverOptions.servePath === undefined && browserOptions.baseHref !== undefined) {
-        serverOptions.servePath = browserOptions.baseHref;
+    const baseHref = browserOptions.baseHref;
+    if (serverOptions.servePath === undefined && baseHref !== undefined) {
+        // Remove trailing slash
+        serverOptions.servePath =
+            baseHref[baseHref.length - 1] === '/' ? baseHref.slice(0, -1) : baseHref;
     }
     // The development server currently only supports a single locale when localizing.
     // This matches the behavior of the Webpack-based development server but could be expanded in the future.
@@ -329,7 +332,7 @@ async function setupServer(serverOptions, outputFiles, assets, preserveSymlinks,
         css: {
             devSourcemap: true,
         },
-        // Vite will normalize the `base` option by adding a leading and trailing forward slash.
+        // Vite will normalize the `base` option by adding a leading slash.
         base: serverOptions.servePath,
         resolve: {
             mainFields: ['es2020', 'browser', 'module', 'main'],
@@ -449,6 +452,10 @@ async function setupServer(serverOptions, outputFiles, assets, preserveSymlinks,
                         // Rewrite all build assets to a vite raw fs URL
                         const assetSourcePath = assets.get(pathname);
                         if (assetSourcePath !== undefined) {
+                            // Workaround to disable Vite transformer middleware.
+                            // See: https://github.com/vitejs/vite/blob/746a1daab0395f98f0afbdee8f364cb6cf2f3b3f/packages/vite/src/node/server/middlewares/transform.ts#L201 and
+                            // https://github.com/vitejs/vite/blob/746a1daab0395f98f0afbdee8f364cb6cf2f3b3f/packages/vite/src/node/server/transformRequest.ts#L204-L206
+                            req.headers.accept = 'text/html';
                             // The encoding needs to match what happens in the vite static middleware.
                             // ref: https://github.com/vitejs/vite/blob/d4f13bd81468961c8c926438e815ab6b1c82735e/packages/vite/src/node/server/middlewares/static.ts#L163
                             req.url = `${server.config.base}@fs/${encodeURI(assetSourcePath)}`;

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");
@@ -69,35 +68,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 +105,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 +113,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 +151,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/angular/compiler-plugin.js

@@ -308,7 +308,7 @@ function createCompilerPlugin(pluginOptions, styleOptions) {
             }));
             // Setup bundling of component templates and stylesheets when in JIT mode
             if (pluginOptions.jit) {
-                (0, jit_plugin_callbacks_1.setupJitPluginCallbacks)(build, stylesheetBundler, additionalResults, styleOptions.inlineStyleLanguage);
+                (0, jit_plugin_callbacks_1.setupJitPluginCallbacks)(build, stylesheetBundler, additionalResults, styleOptions.inlineStyleLanguage, pluginOptions.loadResultCache);
             }
             build.onEnd((result) => {
                 // Ensure other compilations are unblocked if the main compilation throws during start

package/src/tools/esbuild/angular/jit-plugin-callbacks.d.ts

@@ -6,6 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 import type { Metafile, OutputFile, PluginBuild } from 'esbuild';
+import { LoadResultCache } from '../load-result-cache';
 import { ComponentStylesheetBundler } from './component-stylesheets';
 /**
  * Sets up esbuild resolve and load callbacks to support Angular JIT mode processing
@@ -19,4 +20,4 @@ import { ComponentStylesheetBundler } from './component-stylesheets';
 export declare function setupJitPluginCallbacks(build: PluginBuild, stylesheetBundler: ComponentStylesheetBundler, additionalResultFiles: Map<string, {
     outputFiles?: OutputFile[];
     metafile?: Metafile;
-}>, inlineStyleLanguage: string): void;
+}>, inlineStyleLanguage: string, loadCache?: LoadResultCache): void;

package/src/tools/esbuild/angular/jit-plugin-callbacks.js

@@ -6,13 +6,11 @@
  * 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 __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.setupJitPluginCallbacks = void 0;
 const promises_1 = require("node:fs/promises");
-const node_path_1 = __importDefault(require("node:path"));
+const node_path_1 = require("node:path");
+const load_result_cache_1 = require("../load-result-cache");
 const uri_1 = require("./uri");
 /**
  * Loads/extracts the contents from a load callback Angular JIT entry.
@@ -27,7 +25,7 @@ const uri_1 = require("./uri");
  */
 async function loadEntry(entry, root, skipRead) {
     if (entry.startsWith('file:')) {
-        const specifier = node_path_1.default.join(root, entry.slice(5));
+        const specifier = (0, node_path_1.join)(root, entry.slice(5));
         return {
             path: specifier,
             contents: skipRead ? undefined : await (0, promises_1.readFile)(specifier, 'utf-8'),
@@ -36,7 +34,7 @@ async function loadEntry(entry, root, skipRead) {
     else if (entry.startsWith('inline:')) {
         const [importer, data] = entry.slice(7).split(';', 2);
         return {
-            path: node_path_1.default.join(root, importer),
+            path: (0, node_path_1.join)(root, importer),
             contents: Buffer.from(data, 'base64').toString(),
         };
     }
@@ -53,7 +51,7 @@ async function loadEntry(entry, root, skipRead) {
  * @param styleOptions The options to use when bundling stylesheets.
  * @param additionalResultFiles A Map where stylesheet resources will be added.
  */
-function setupJitPluginCallbacks(build, stylesheetBundler, additionalResultFiles, inlineStyleLanguage) {
+function setupJitPluginCallbacks(build, stylesheetBundler, additionalResultFiles, inlineStyleLanguage, loadCache) {
     const root = build.initialOptions.absWorkingDir ?? '';
     // Add a resolve callback to capture and parse any JIT URIs that were added by the
     // JIT resource TypeScript transformer.
@@ -68,13 +66,13 @@ function setupJitPluginCallbacks(build, stylesheetBundler, additionalResultFiles
             return {
                 // Use a relative path to prevent fully resolved paths in the metafile (JSON stats file).
                 // This is only necessary for custom namespaces. esbuild will handle the file namespace.
-                path: 'file:' + node_path_1.default.relative(root, node_path_1.default.join(node_path_1.default.dirname(args.importer), specifier)),
+                path: 'file:' + (0, node_path_1.relative)(root, (0, node_path_1.join)((0, node_path_1.dirname)(args.importer), specifier)),
                 namespace,
             };
         }
         else {
             // Inline data may need the importer to resolve imports/references within the content
-            const importer = node_path_1.default.relative(root, args.importer);
+            const importer = (0, node_path_1.relative)(root, args.importer);
             return {
                 path: `inline:${importer};${specifier}`,
                 namespace,
@@ -82,7 +80,7 @@ function setupJitPluginCallbacks(build, stylesheetBundler, additionalResultFiles
         }
     });
     // Add a load callback to handle Component stylesheets (both inline and external)
-    build.onLoad({ filter: /./, namespace: uri_1.JIT_STYLE_NAMESPACE }, async (args) => {
+    build.onLoad({ filter: /./, namespace: uri_1.JIT_STYLE_NAMESPACE }, (0, load_result_cache_1.createCachedLoad)(loadCache, async (args) => {
         // skipRead is used here because the stylesheet bundling will read a file stylesheet
         // directly either via a preprocessor or esbuild itself.
         const entry = await loadEntry(args.path, root, true /* skipRead */);
@@ -94,24 +92,26 @@ function setupJitPluginCallbacks(build, stylesheetBundler, additionalResultFiles
         else {
             stylesheetResult = await stylesheetBundler.bundleInline(entry.contents, entry.path, inlineStyleLanguage);
         }
-        const { contents, resourceFiles, errors, warnings, metafile } = stylesheetResult;
+        const { contents, resourceFiles, errors, warnings, metafile, referencedFiles } = stylesheetResult;
         additionalResultFiles.set(entry.path, { outputFiles: resourceFiles, metafile });
         return {
             errors,
             warnings,
             contents,
             loader: 'text',
+            watchFiles: referencedFiles && [...referencedFiles],
         };
-    });
+    }));
     // Add a load callback to handle Component templates
     // NOTE: While this callback supports both inline and external templates, the transformer
     // currently only supports generating URIs for external templates.
-    build.onLoad({ filter: /./, namespace: uri_1.JIT_TEMPLATE_NAMESPACE }, async (args) => {
-        const { contents } = await loadEntry(args.path, root);
+    build.onLoad({ filter: /./, namespace: uri_1.JIT_TEMPLATE_NAMESPACE }, (0, load_result_cache_1.createCachedLoad)(loadCache, async (args) => {
+        const { contents, path } = await loadEntry(args.path, root);
         return {
             contents,
             loader: 'text',
+            watchFiles: [path],
         };
-    });
+    }));
 }
 exports.setupJitPluginCallbacks = setupJitPluginCallbacks;

package/src/tools/esbuild/angular/source-file-cache.js

@@ -52,7 +52,6 @@ class SourceFileCache extends Map {
         }
         for (let file of files) {
             file = path.normalize(file);
-            this.typeScriptFileCache.delete(file);
             this.loadResultCache.invalidate(file);
             // Normalize separators to allow matching TypeScript Host paths
             if (USING_WINDOWS) {

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/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

@@ -9,6 +9,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.createWatcher = exports.ChangedFiles = void 0;
 const chokidar_1 = require("chokidar");
+const node_path_1 = require("node:path");
 class ChangedFiles {
     added = new Set();
     modified = new Set();
@@ -31,43 +32,75 @@ function createWatcher(options) {
         usePolling: options?.polling,
         interval: options?.interval,
         ignored: options?.ignored,
+        followSymlinks: options?.followSymlinks,
         disableGlobbing: true,
         ignoreInitial: true,
     });
     const nextQueue = [];
     let currentChanges;
     let nextWaitTimeout;
-    watcher.on('all', (event, path) => {
+    /**
+     * We group the current events in a map as on Windows with certain IDE a file contents change can trigger multiple events.
+     *
+     * Example:
+     * rename | 'C:/../src/app/app.component.css'
+     * rename | 'C:/../src/app/app.component.css'
+     * change | 'C:/../src/app/app.component.css'
+     *
+     */
+    let currentEvents;
+    /**
+     * Using `watcher.on('all')` does not capture some of events fired when using Visual studio and this does not happen all the time,
+     * but only after a file has been changed 3 or more times.
+     *
+     * Also, some IDEs such as Visual Studio (not VS Code) will fire a rename event instead of unlink when a file is renamed or changed.
+     *
+     * Example:
+     * ```
+     * watcher.on('raw')
+     * Change 1
+     * rename | 'C:/../src/app/app.component.css'
+     * rename | 'C:/../src/app/app.component.css'
+     * change | 'C:/../src/app/app.component.css'
+     *
+     * Change 2
+     * rename | 'C:/../src/app/app.component.css'
+     * rename | 'C:/../src/app/app.component.css'
+     * change | 'C:/../src/app/app.component.css'
+     *
+     * Change 3
+     * rename | 'C:/../src/app/app.component.css'
+     * rename | 'C:/../src/app/app.component.css'
+     * change | 'C:/../src/app/app.component.css'
+     *
+     * watcher.on('all')
+     * Change 1
+     * change | 'C:\\..\\src\\app\\app.component.css'
+     *
+     * Change 2
+     * unlink | 'C:\\..\\src\\app\\app.component.css'
+     *
+     * Change 3
+     * ... (Nothing)
+     * ```
+     */
+    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':
-                currentChanges ??= new ChangedFiles();
-                currentChanges.added.add(path);
-                break;
+            case 'rename':
             case 'change':
-                currentChanges ??= new ChangedFiles();
-                currentChanges.modified.add(path);
-                break;
-            case 'unlink':
-                currentChanges ??= new ChangedFiles();
-                currentChanges.removed.add(path);
+                // When polling is enabled `watchedPath` can be undefined.
+                // `path` is always normalized unlike `watchedPath`.
+                const changedPath = watchedPath ? (0, node_path_1.normalize)(watchedPath) : path;
+                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) {
-                    const value = currentChanges;
-                    currentChanges = undefined;
-                    next(value);
-                }
-            }, 250);
-            nextWaitTimeout?.unref();
         }
-    });
+    })
+        .on('all', handleFileChange);
     return {
         [Symbol.asyncIterator]() {
             return this;
@@ -103,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/check-port.js

@@ -6,43 +6,26 @@
  * 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;
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.checkPort = void 0;
-const net = __importStar(require("net"));
+const node_assert_1 = __importDefault(require("node:assert"));
+const node_net_1 = require("node:net");
 const load_esm_1 = require("./load-esm");
 const tty_1 = require("./tty");
 function createInUseError(port) {
     return new Error(`Port ${port} is already in use. Use '--port' to specify a different port.`);
 }
 async function checkPort(port, host) {
-    if (port === 0) {
-        return 0;
-    }
+    // Disabled due to Vite not handling port 0 and instead always using the default value (5173)
+    // TODO: Enable this again once Vite is fixed
+    // if (port === 0) {
+    //   return 0;
+    // }
     return new Promise((resolve, reject) => {
-        const server = net.createServer();
+        const server = (0, node_net_1.createServer)();
         server
             .once('error', (err) => {
             if (err.code !== 'EADDRINUSE') {
@@ -60,11 +43,14 @@ async function checkPort(port, host) {
                 message: `Port ${port} is already in use.\nWould you like to use a different port?`,
                 default: true,
             }))
-                .then((answers) => (answers.useDifferent ? resolve(0) : reject(createInUseError(port))), () => reject(createInUseError(port)));
+                .then((answers) => answers.useDifferent ? resolve(checkPort(0, host)) : reject(createInUseError(port)), () => reject(createInUseError(port)));
         })
             .once('listening', () => {
+            // Get the actual address from the listening server instance
+            const address = server.address();
+            (0, node_assert_1.default)(address && typeof address !== 'string', 'Port check server address should always be an object.');
             server.close();
-            resolve(port);
+            resolve(address.port);
         })
             .listen(port, host);
     });

package/src/utils/delete-output-dir.d.ts

@@ -8,4 +8,4 @@
 /**
  * Delete an output directory, but error out if it's the root of the project.
  */
-export declare function deleteOutputDir(root: string, outputPath: string): Promise<void>;
+export declare function deleteOutputDir(root: string, outputPath: string, emptyOnlyDirectories?: string[]): Promise<void>;

package/src/utils/delete-output-dir.js

@@ -13,11 +13,14 @@ const node_path_1 = require("node:path");
 /**
  * Delete an output directory, but error out if it's the root of the project.
  */
-async function deleteOutputDir(root, outputPath) {
+async function deleteOutputDir(root, outputPath, emptyOnlyDirectories) {
     const resolvedOutputPath = (0, node_path_1.resolve)(root, outputPath);
     if (resolvedOutputPath === root) {
         throw new Error('Output path MUST not be project root directory!');
     }
+    const directoriesToEmpty = emptyOnlyDirectories
+        ? new Set(emptyOnlyDirectories.map((directory) => (0, node_path_1.join)(resolvedOutputPath, directory)))
+        : undefined;
     // Avoid removing the actual directory to avoid errors in cases where the output
     // directory is mounted or symlinked. Instead the contents are removed.
     let entries;
@@ -31,7 +34,13 @@ async function deleteOutputDir(root, outputPath) {
         throw error;
     }
     for (const entry of entries) {
-        await (0, promises_1.rm)((0, node_path_1.join)(resolvedOutputPath, entry), { force: true, recursive: true, maxRetries: 3 });
+        const fullEntry = (0, node_path_1.join)(resolvedOutputPath, entry);
+        // Leave requested directories. This allows symlinks to continue to function.
+        if (directoriesToEmpty?.has(fullEntry)) {
+            await deleteOutputDir(resolvedOutputPath, fullEntry);
+            continue;
+        }
+        await (0, promises_1.rm)(fullEntry, { force: true, recursive: true, maxRetries: 3 });
     }
 }
 exports.deleteOutputDir = deleteOutputDir;

package/src/utils/environment-options.js

@@ -82,6 +82,4 @@ exports.useLegacySass = (() => {
 const debugPerfVariable = process.env['NG_BUILD_DEBUG_PERF'];
 exports.debugPerformance = isPresent(debugPerfVariable) && isEnabled(debugPerfVariable);
 const watchRootVariable = process.env['NG_BUILD_WATCH_ROOT'];
-exports.shouldWatchRoot = process.platform === 'win32'
-    ? !isPresent(watchRootVariable) || !isDisabled(watchRootVariable)
-    : isPresent(watchRootVariable) && isEnabled(watchRootVariable);
+exports.shouldWatchRoot = isPresent(watchRootVariable) && isEnabled(watchRootVariable);

package/src/utils/index-file/inline-fonts.js

@@ -195,7 +195,16 @@ class InlineFontsProcessor {
                 .get(url, {
                 agent,
                 headers: {
-                    'user-agent': 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/85.0.4183.121 Safari/537.36',
+                    /**
+                     * Always use a Windows UA. This is because Google fonts will including hinting in fonts for Windows.
+                     * Hinting is a technique used with Windows files to improve appearance however
+                     * results in 20-50% larger file sizes.
+                     *
+                     * @see http://google3/java/com/google/fonts/css/OpenSansWebFontsCssBuilder.java?l=22
+                     * @see https://fonts.google.com/knowledge/glossary/hinting (short)
+                     * @see https://glyphsapp.com/learn/hinting-manual-truetype-hinting (deep dive)
+                     */
+                    'user-agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36',
                 },
             }, (res) => {
                 if (res.statusCode !== 200) {

package/src/utils/server-rendering/esm-in-memory-loader/node-18-utils.js

@@ -11,19 +11,20 @@ exports.getESMLoaderArgs = exports.callInitializeIfNeeded = void 0;
 const node_path_1 = require("node:path");
 const node_url_1 = require("node:url");
 const node_worker_threads_1 = require("node:worker_threads");
-let IS_NODE_18;
-function isNode18() {
-    return (IS_NODE_18 ??= process.versions.node.startsWith('18.'));
+const semver_1 = require("semver");
+let SUPPORTS_IMPORT_FLAG;
+function supportsImportFlag() {
+    return (SUPPORTS_IMPORT_FLAG ??= (0, semver_1.satisfies)(process.versions.node, '>= 18.19'));
 }
 /** Call the initialize hook when running on Node.js 18 */
 function callInitializeIfNeeded(initialize) {
-    if (isNode18()) {
+    if (!supportsImportFlag()) {
         initialize(node_worker_threads_1.workerData);
     }
 }
 exports.callInitializeIfNeeded = callInitializeIfNeeded;
 function getESMLoaderArgs() {
-    if (isNode18()) {
+    if (!supportsImportFlag()) {
         return [
             '--no-warnings',
             '--loader',

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,