@angular-devkit/build-angular 17.0.6 → 17.0.7

package/package.json

@@ -1,15 +1,15 @@
 {
   "name": "@angular-devkit/build-angular",
-  "version": "17.0.6",
+  "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.6",
-    "@angular-devkit/build-webpack": "0.1700.6",
-    "@angular-devkit/core": "17.0.6",
+    "@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.6",
+    "@ngtools/webpack": "17.0.7",
     "@vitejs/plugin-basic-ssl": "1.0.1",
     "ansi-colors": "4.1.3",
     "autoprefixer": "10.4.16",

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

@@ -42,7 +42,7 @@ 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, 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,21 +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,
             followSymlinks: preserveSymlinks,
-            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, '/')}/**/.*/**`,
-            ],
+            ignored,
         });
         // Setup abort support
         options.signal?.addEventListener('abort', () => void watcher?.close());

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/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/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/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/tools/esbuild/normalize-path.d.ts

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

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

@@ -1,22 +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.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;