@angular/build 20.0.0-next.8 → 20.0.0-rc.0

package/.browserslistrc

@@ -1,6 +1,6 @@
-Chrome >= 105
-ChromeAndroid >= 105
-Edge >= 105
+Chrome >= 107
+ChromeAndroid >= 107
+Edge >= 107
 Firefox >= 104
 FirefoxAndroid >= 104
 Safari >= 16

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@angular/build",
-  "version": "20.0.0-next.8",
+  "version": "20.0.0-rc.0",
   "description": "Official build system for Angular",
   "keywords": [
     "Angular CLI",
@@ -23,34 +23,34 @@
   "builders": "builders.json",
   "dependencies": {
     "@ampproject/remapping": "2.3.0",
-    "@angular-devkit/architect": "0.2000.0-next.8",
-    "@babel/core": "7.26.10",
-    "@babel/helper-annotate-as-pure": "7.25.9",
+    "@angular-devkit/architect": "0.2000.0-rc.0",
+    "@babel/core": "7.27.1",
+    "@babel/helper-annotate-as-pure": "7.27.1",
     "@babel/helper-split-export-declaration": "7.24.7",
     "@inquirer/confirm": "5.1.9",
     "@vitejs/plugin-basic-ssl": "2.0.0",
     "beasties": "0.3.3",
     "browserslist": "^4.23.0",
-    "esbuild": "0.25.3",
+    "esbuild": "0.25.4",
     "https-proxy-agent": "7.0.6",
     "istanbul-lib-instrument": "6.0.3",
     "jsonc-parser": "3.3.1",
-    "listr2": "8.3.2",
+    "listr2": "8.3.3",
     "magic-string": "0.30.17",
     "mrmime": "2.0.1",
     "parse5-html-rewriting-stream": "7.1.0",
     "picomatch": "4.0.2",
-    "piscina": "4.9.2",
-    "rollup": "4.40.0",
+    "piscina": "5.0.0",
+    "rollup": "4.40.2",
     "sass": "1.87.0",
     "semver": "7.7.1",
     "source-map-support": "0.5.21",
     "tinyglobby": "0.2.13",
-    "vite": "6.3.2",
+    "vite": "6.3.5",
     "watchpack": "2.4.2"
   },
   "optionalDependencies": {
-    "lmdb": "3.2.6"
+    "lmdb": "3.3.0"
   },
   "peerDependencies": {
     "@angular/core": "^20.0.0 || ^20.0.0-next.0",
@@ -60,7 +60,7 @@
     "@angular/platform-browser": "^20.0.0 || ^20.0.0-next.0",
     "@angular/platform-server": "^20.0.0 || ^20.0.0-next.0",
     "@angular/service-worker": "^20.0.0 || ^20.0.0-next.0",
-    "@angular/ssr": "^20.0.0-next.8",
+    "@angular/ssr": "^20.0.0-rc.0",
     "karma": "^6.4.0",
     "less": "^4.2.0",
     "ng-packagr": "^20.0.0 || ^20.0.0-next.0",
@@ -114,7 +114,7 @@
   },
   "packageManager": "pnpm@9.15.6",
   "engines": {
-    "node": "^20.11.1 || >=22.11.0",
+    "node": "^20.11.1 || ^22.11.0 || >=24.0.0",
     "npm": "^6.11.0 || ^7.5.6 || >=8.0.0",
     "yarn": ">= 1.13.0"
   },

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

@@ -229,8 +229,9 @@ async function executeBuild(options, context, rebuildState) {
         const result = await (0, execute_post_bundle_1.executePostBundleSteps)(metafile, options, executionResult.outputFiles, executionResult.assetFiles, initialFiles, 
         // Set lang attribute to the defined source locale if present
         i18nOptions.hasDefinedSourceLocale ? i18nOptions.sourceLocale : undefined);
-        executionResult.addErrors(result.errors);
-        executionResult.addWarnings(result.warnings);
+        // Deduplicate and add errors and warnings
+        executionResult.addErrors([...new Set(result.errors)]);
+        executionResult.addWarnings([...new Set(result.warnings)]);
         executionResult.addPrerenderedRoutes(result.prerenderedRoutes);
         executionResult.outputFiles.push(...result.additionalOutputFiles);
         executionResult.assetFiles.push(...result.additionalAssets);

package/src/builders/application/i18n.js

@@ -92,6 +92,21 @@ async function inlineI18n(metafile, options, executionResult, initialFiles) {
     if (!i18nOptions.flatOutput) {
         executionResult.assetFiles = updatedAssetFiles;
     }
+    // Inline any template updates if present
+    if (executionResult.templateUpdates?.size) {
+        // The development server only allows a single locale but issue a warning if used programmatically (experimental)
+        // with multiple locales and template HMR.
+        if (i18nOptions.inlineLocales.size > 1) {
+            inlineResult.warnings.push(`Component HMR updates can only be inlined with a single locale. The first locale will be used.`);
+        }
+        const firstLocale = [...i18nOptions.inlineLocales][0];
+        for (const [id, content] of executionResult.templateUpdates) {
+            const templateUpdateResult = await inliner.inlineTemplateUpdate(firstLocale, i18nOptions.locales[firstLocale].translation, content, id);
+            executionResult.templateUpdates.set(id, templateUpdateResult.code);
+            inlineResult.errors.push(...templateUpdateResult.errors);
+            inlineResult.warnings.push(...templateUpdateResult.warnings);
+        }
+    }
     return inlineResult;
 }
 /**

package/src/builders/application/options.js

@@ -23,6 +23,7 @@ const environment_options_1 = require("../../utils/environment-options");
 const i18n_options_1 = require("../../utils/i18n-options");
 const normalize_cache_1 = require("../../utils/normalize-cache");
 const postcss_configuration_1 = require("../../utils/postcss-configuration");
+const project_metadata_1 = require("../../utils/project-metadata");
 const url_1 = require("../../utils/url");
 const schema_1 = require("./schema");
 /**
@@ -58,8 +59,7 @@ async function normalizeOptions(context, projectName, options, extensions) {
             // ref: https://github.com/nodejs/node/issues/7726
             (0, node_fs_1.realpathSync)(context.workspaceRoot);
     const projectMetadata = await context.getProjectMetadata(projectName);
-    const projectRoot = normalizeDirectoryPath(node_path_1.default.join(workspaceRoot, projectMetadata.root ?? ''));
-    const projectSourceRoot = normalizeDirectoryPath(node_path_1.default.join(workspaceRoot, projectMetadata.sourceRoot ?? 'src'));
+    const { projectRoot, projectSourceRoot } = (0, project_metadata_1.getProjectRootPaths)(workspaceRoot, projectMetadata);
     // Gather persistent caching option and provide a project specific cache location
     const cacheOptions = (0, normalize_cache_1.normalizeCacheOptions)(projectMetadata, workspaceRoot);
     cacheOptions.path = node_path_1.default.join(cacheOptions.path, projectName);
@@ -69,7 +69,7 @@ async function normalizeOptions(context, projectName, options, extensions) {
     if (options.forceI18nFlatOutput) {
         i18nOptions.flatOutput = true;
     }
-    const entryPoints = normalizeEntryPoints(workspaceRoot, options.browser, options.entryPoints);
+    const entryPoints = normalizeEntryPoints(workspaceRoot, projectSourceRoot, options.browser, options.entryPoints);
     const tsconfig = node_path_1.default.join(workspaceRoot, options.tsConfig);
     const optimizationOptions = (0, utils_1.normalizeOptimization)(options.optimization);
     const sourcemapOptions = (0, utils_1.normalizeSourceMaps)(options.sourceMap ?? false);
@@ -169,7 +169,7 @@ async function normalizeOptions(context, projectName, options, extensions) {
         server: 'server',
         media: 'media',
         ...(typeof outputPath === 'string' ? undefined : outputPath),
-        base: normalizeDirectoryPath(node_path_1.default.resolve(workspaceRoot, typeof outputPath === 'string' ? outputPath : outputPath.base)),
+        base: (0, project_metadata_1.normalizeDirectoryPath)(node_path_1.default.resolve(workspaceRoot, typeof outputPath === 'string' ? outputPath : outputPath.base)),
         clean: options.deleteOutputPath ?? true,
         // For app-shell and SSG server files are not required by users.
         // Omit these when SSR is not enabled.
@@ -355,23 +355,22 @@ async function getTailwindConfig(searchDirectories, workspaceRoot, context) {
  * @param entryPoints Set of entry points to use if provided.
  * @returns An object mapping entry point names to their file paths.
  */
-function normalizeEntryPoints(workspaceRoot, browser, entryPoints = new Set()) {
+function normalizeEntryPoints(workspaceRoot, projectSourceRoot, browser, entryPoints) {
     if (browser === '') {
         throw new Error('`browser` option cannot be an empty string.');
     }
     // `browser` and `entryPoints` are mutually exclusive.
-    if (browser && entryPoints.size > 0) {
+    if (browser && entryPoints) {
         throw new Error('Only one of `browser` or `entryPoints` may be provided.');
     }
-    if (!browser && entryPoints.size === 0) {
-        // Schema should normally reject this case, but programmatic usages of the builder might make this mistake.
-        throw new Error('Either `browser` or at least one `entryPoints` value must be provided.');
-    }
-    // Schema types force `browser` to always be provided, but it may be omitted when the builder is invoked programmatically.
     if (browser) {
         // Use `browser` alone.
         return { 'main': node_path_1.default.join(workspaceRoot, browser) };
     }
+    else if (!entryPoints) {
+        // Default browser entry if no explicit entry points
+        return { 'main': node_path_1.default.join(projectSourceRoot, 'main.ts') };
+    }
     else if (entryPoints instanceof Map) {
         return Object.fromEntries(Array.from(entryPoints.entries(), ([name, entryPoint]) => {
             // Get the full file path to a relative entry point input. Leave bare specifiers alone so they are resolved as modules.
@@ -406,19 +405,6 @@ function normalizeEntryPoints(workspaceRoot, browser, entryPoints = new Set()) {
         return entryPointPaths;
     }
 }
-/**
- * Normalize a directory path string.
- * Currently only removes a trailing slash if present.
- * @param path A path string.
- * @returns A normalized path string.
- */
-function normalizeDirectoryPath(path) {
-    const last = path[path.length - 1];
-    if (last === '/' || last === '\\') {
-        return path.slice(0, -1);
-    }
-    return path;
-}
 function normalizeGlobalEntries(rawEntries, defaultName) {
     if (!rawEntries?.length) {
         return [];

package/src/builders/application/schema.d.ts

@@ -27,7 +27,7 @@ export type Schema = {
      * The full path for the browser entry point to the application, relative to the current
      * workspace.
      */
-    browser: string;
+    browser?: string;
     /**
      * Budget thresholds to ensure parts of your application stay within boundaries which you
      * set.

package/src/builders/application/schema.json

@@ -616,7 +616,7 @@
     }
   },
   "additionalProperties": false,
-  "required": ["browser", "tsConfig"],
+  "required": ["tsConfig"],
   "definitions": {
     "assetPattern": {
       "oneOf": [

package/src/builders/karma/application_builder.js

@@ -50,6 +50,7 @@ const tinyglobby_1 = require("tinyglobby");
 const bundler_context_1 = require("../../tools/esbuild/bundler-context");
 const utils_1 = require("../../tools/esbuild/utils");
 const virtual_module_plugin_1 = require("../../tools/esbuild/virtual-module-plugin");
+const project_metadata_1 = require("../../utils/project-metadata");
 const index_1 = require("../application/index");
 const results_1 = require("../application/results");
 const schema_1 = require("../application/schema");
@@ -87,7 +88,7 @@ class AngularAssetsMiddleware {
         }
         switch (file.origin) {
             case 'disk':
-                this.serveFile(file.inputPath, undefined, res);
+                this.serveFile(file.inputPath, undefined, res, undefined, undefined, /* doNotCache */ true);
                 break;
             case 'memory':
                 // Include pathname to help with Content-Type headers.
@@ -266,8 +267,8 @@ async function getProjectSourceRoot(context) {
         return context.workspaceRoot;
     }
     const projectMetadata = await context.getProjectMetadata(projectName);
-    const sourceRoot = (projectMetadata.sourceRoot ?? projectMetadata.root ?? '');
-    return path.join(context.workspaceRoot, sourceRoot);
+    const { projectSourceRoot } = (0, project_metadata_1.getProjectRootPaths)(context.workspaceRoot, projectMetadata);
+    return projectSourceRoot;
 }
 function normalizePolyfills(polyfills) {
     if (typeof polyfills === 'string') {

package/src/builders/unit-test/builder.js

@@ -13,6 +13,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.execute = execute;
 const node_assert_1 = __importDefault(require("node:assert"));
 const node_crypto_1 = require("node:crypto");
+const node_module_1 = require("node:module");
 const node_path_1 = __importDefault(require("node:path"));
 const virtual_module_plugin_1 = require("../../tools/esbuild/virtual-module-plugin");
 const load_esm_1 = require("../../utils/load-esm");
@@ -21,6 +22,7 @@ const results_1 = require("../application/results");
 const schema_1 = require("../application/schema");
 const application_builder_1 = require("../karma/application_builder");
 const find_tests_1 = require("../karma/find-tests");
+const karma_bridge_1 = require("./karma-bridge");
 const options_1 = require("./options");
 /**
  * @experimental Direct usage of this function is considered experimental.
@@ -35,6 +37,12 @@ async function* execute(options, context, extensions = {}) {
     context.logger.warn(`NOTE: The "${context.builder.builderName}" builder is currently EXPERIMENTAL and not ready for production use.`);
     const normalizedOptions = await (0, options_1.normalizeOptions)(context, projectName, options);
     const { projectSourceRoot, workspaceRoot, runnerName } = normalizedOptions;
+    // Translate options and use karma builder directly if specified
+    if (runnerName === 'karma') {
+        const karmaBridge = await (0, karma_bridge_1.useKarmaBuilder)(context, normalizedOptions);
+        yield* karmaBridge;
+        return;
+    }
     if (runnerName !== 'vitest') {
         context.logger.error('Unknown test runner: ' + runnerName);
         return;
@@ -81,8 +89,14 @@ async function* execute(options, context, extensions = {}) {
         loadContent: async () => {
             const contents = [
                 // Initialize the Angular testing environment
-                `import { getTestBed } from '@angular/core/testing';`,
+                `import { getTestBed, ɵgetCleanupHook as getCleanupHook } from '@angular/core/testing';`,
                 `import { BrowserTestingModule, platformBrowserTesting } from '@angular/platform-browser/testing';`,
+                `import { beforeEach, afterEach } from 'vitest';`,
+                '',
+                // Same as https://github.com/angular/angular/blob/05a03d3f975771bb59c7eefd37c01fa127ee2229/packages/core/testing/src/test_hooks.ts#L21-L29
+                `beforeEach(getCleanupHook(false));`,
+                `afterEach(getCleanupHook(true));`,
+                '',
                 `getTestBed().initTestEnvironment(BrowserTestingModule, platformBrowserTesting(), {`,
                 `  errorOnUnknownElements: true,`,
                 `  errorOnUnknownProperties: true,`,
@@ -97,6 +111,23 @@ async function* execute(options, context, extensions = {}) {
     });
     extensions.codePlugins.unshift(virtualTestBedInit);
     let instance;
+    // Setup vitest browser options if configured
+    let browser;
+    if (normalizedOptions.browsers) {
+        const provider = findBrowserProvider(projectSourceRoot);
+        if (!provider) {
+            context.logger.error('The "browsers" option requires either "playwright" or "webdriverio" to be installed within the project.' +
+                ' Please install one of these packages and rerun the test command.');
+            return { success: false };
+        }
+        browser = {
+            enabled: true,
+            provider,
+            instances: normalizedOptions.browsers.map((browserName) => ({
+                browser: browserName,
+            })),
+        };
+    }
     for await (const result of (0, application_1.buildApplicationInternal)(buildOptions, context, extensions)) {
         if (result.kind === results_1.ResultKind.Failure) {
             continue;
@@ -114,8 +145,12 @@ async function* execute(options, context, extensions = {}) {
             test: {
                 root: outputPath,
                 setupFiles,
-                environment: 'jsdom',
+                // Use `jsdom` if no browsers are explicitly configured.
+                // `node` is effectively no "environment" and the default.
+                environment: browser ? 'node' : 'jsdom',
                 watch: normalizedOptions.watch,
+                browser,
+                reporters: normalizedOptions.reporters ?? ['default'],
                 coverage: {
                     enabled: normalizedOptions.codeCoverage,
                     exclude: normalizedOptions.codeCoverageExclude,
@@ -128,3 +163,15 @@ async function* execute(options, context, extensions = {}) {
         yield { success: testModules.every((testModule) => testModule.ok()) };
     }
 }
+function findBrowserProvider(projectSourceRoot) {
+    const projectResolver = (0, node_module_1.createRequire)(projectSourceRoot + '/').resolve;
+    // These must be installed in the project to be used
+    const vitestBuiltinProviders = ['playwright', 'webdriverio'];
+    for (const providerName of vitestBuiltinProviders) {
+        try {
+            projectResolver(providerName);
+            return providerName;
+        }
+        catch { }
+    }
+}

package/src/builders/unit-test/karma-bridge.d.ts

@@ -0,0 +1,10 @@
+/**
+ * @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.dev/license
+ */
+import type { BuilderContext, BuilderOutput } from '@angular-devkit/architect';
+import type { NormalizedUnitTestOptions } from './options';
+export declare function useKarmaBuilder(context: BuilderContext, unitTestOptions: NormalizedUnitTestOptions): Promise<AsyncIterable<BuilderOutput>>;

package/src/builders/unit-test/karma-bridge.js

@@ -0,0 +1,74 @@
+"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.dev/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 () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useKarmaBuilder = useKarmaBuilder;
+async function useKarmaBuilder(context, unitTestOptions) {
+    const buildTargetOptions = (await context.validateOptions(await context.getTargetOptions(unitTestOptions.buildTarget), await context.getBuilderNameForTarget(unitTestOptions.buildTarget)));
+    const options = {
+        tsConfig: unitTestOptions.tsConfig,
+        polyfills: buildTargetOptions.polyfills,
+        assets: buildTargetOptions.assets,
+        scripts: buildTargetOptions.scripts,
+        styles: buildTargetOptions.styles,
+        inlineStyleLanguage: buildTargetOptions.inlineStyleLanguage,
+        stylePreprocessorOptions: buildTargetOptions.stylePreprocessorOptions,
+        externalDependencies: buildTargetOptions.externalDependencies,
+        loader: buildTargetOptions.loader,
+        define: buildTargetOptions.define,
+        include: unitTestOptions.include,
+        exclude: unitTestOptions.exclude,
+        sourceMap: buildTargetOptions.sourceMap,
+        progress: buildTargetOptions.progress,
+        watch: unitTestOptions.watch,
+        poll: buildTargetOptions.poll,
+        preserveSymlinks: buildTargetOptions.preserveSymlinks,
+        browsers: unitTestOptions.browsers?.join(','),
+        codeCoverage: unitTestOptions.codeCoverage,
+        codeCoverageExclude: unitTestOptions.codeCoverageExclude,
+        fileReplacements: buildTargetOptions.fileReplacements,
+        reporters: unitTestOptions.reporters,
+        webWorkerTsConfig: buildTargetOptions.webWorkerTsConfig,
+        aot: buildTargetOptions.aot,
+    };
+    const { execute } = await Promise.resolve().then(() => __importStar(require('../karma')));
+    return execute(options, context);
+}

package/src/builders/unit-test/options.d.ts

@@ -21,5 +21,6 @@ export declare function normalizeOptions(context: BuilderContext, projectName: s
     codeCoverageExclude: string[] | undefined;
     tsConfig: string;
     reporters: string[] | undefined;
+    browsers: string[] | undefined;
     watch: boolean;
 }>;

package/src/builders/unit-test/options.js

@@ -14,19 +14,19 @@ exports.normalizeOptions = normalizeOptions;
 const architect_1 = require("@angular-devkit/architect");
 const node_path_1 = __importDefault(require("node:path"));
 const normalize_cache_1 = require("../../utils/normalize-cache");
+const project_metadata_1 = require("../../utils/project-metadata");
 async function normalizeOptions(context, projectName, options) {
     // Setup base paths based on workspace root and project information
     const workspaceRoot = context.workspaceRoot;
     const projectMetadata = await context.getProjectMetadata(projectName);
-    const projectRoot = normalizeDirectoryPath(node_path_1.default.join(workspaceRoot, projectMetadata.root ?? ''));
-    const projectSourceRoot = normalizeDirectoryPath(node_path_1.default.join(workspaceRoot, projectMetadata.sourceRoot ?? 'src'));
+    const { projectRoot, projectSourceRoot } = (0, project_metadata_1.getProjectRootPaths)(workspaceRoot, projectMetadata);
     // Gather persistent caching option and provide a project specific cache location
     const cacheOptions = (0, normalize_cache_1.normalizeCacheOptions)(projectMetadata, workspaceRoot);
     cacheOptions.path = node_path_1.default.join(cacheOptions.path, projectName);
     // Target specifier defaults to the current project's build target using a development configuration
     const buildTargetSpecifier = options.buildTarget ?? `::development`;
     const buildTarget = (0, architect_1.targetFromTargetString)(buildTargetSpecifier, projectName, 'build');
-    const { codeCoverage, codeCoverageExclude, tsConfig, runner, reporters } = options;
+    const { codeCoverage, codeCoverageExclude, tsConfig, runner, reporters, browsers } = options;
     return {
         // Project/workspace information
         workspaceRoot,
@@ -42,6 +42,7 @@ async function normalizeOptions(context, projectName, options) {
         codeCoverageExclude,
         tsConfig,
         reporters,
+        browsers,
         // TODO: Implement watch support
         watch: false,
     };

package/src/builders/unit-test/schema.d.ts

@@ -2,6 +2,11 @@
  * Unit testing options for Angular applications.
  */
 export type Schema = {
+    /**
+     * A list of browsers to use for test execution. If undefined, jsdom on Node.js will be used
+     * instead of a browser.
+     */
+    browsers?: string[];
     /**
      * A build builder target to serve in the format of `project:target[:configuration]`. You
      * can also pass in more than one configuration name as a comma-separated list. Example:
@@ -50,5 +55,6 @@ export type Schema = {
  * The name of the test runner to use for test execution.
  */
 export declare enum Runner {
+    Karma = "karma",
     Vitest = "vitest"
 }

package/src/builders/unit-test/schema.js

@@ -8,5 +8,6 @@ exports.Runner = void 0;
  */
 var Runner;
 (function (Runner) {
+    Runner["Karma"] = "karma";
     Runner["Vitest"] = "vitest";
 })(Runner || (exports.Runner = Runner = {}));

package/src/builders/unit-test/schema.json

@@ -16,7 +16,15 @@
     "runner": {
       "type": "string",
       "description": "The name of the test runner to use for test execution.",
-      "enum": ["vitest"]
+      "enum": ["karma", "vitest"]
+    },
+    "browsers": {
+      "description": "A list of browsers to use for test execution. If undefined, jsdom on Node.js will be used instead of a browser.",
+      "type": "array",
+      "items": {
+        "type": "string"
+      },
+      "minItems": 1
     },
     "include": {
       "type": "array",

package/src/tools/angular/compilation/aot-compilation.js

@@ -121,10 +121,7 @@ class AotCompilation extends angular_compilation_1.AngularCompilation {
                 const updateId = encodeURIComponent(`${host.getCanonicalFileName(relativePath)}@${node.name?.text}`);
                 const updateText = angularCompiler.emitHmrUpdateModule(node);
                 // If compiler cannot generate an update for the component, prevent template updates.
-                // Also prevent template updates if $localize is directly present which also currently
-                // prevents a template update at runtime.
-                // TODO: Support localized template update modules and remove this check.
-                if (updateText === null || updateText.includes('$localize')) {
+                if (updateText === null) {
                     // Build is needed if a template cannot be updated
                     templateUpdates = undefined;
                     break;

package/src/tools/esbuild/application-code-bundle.js

@@ -37,8 +37,8 @@ const wasm_plugin_1 = require("./wasm-plugin");
 function createBrowserCodeBundleOptions(options, target, sourceFileCache, stylesheetBundler, angularCompilation, templateUpdates) {
     return (loadCache) => {
         const { entryPoints, outputNames, polyfills } = options;
-        const pluginOptions = (0, compiler_plugin_options_1.createCompilerPluginOptions)(options, sourceFileCache, loadCache, templateUpdates);
         const zoneless = (0, utils_1.isZonelessApp)(polyfills);
+        const pluginOptions = (0, compiler_plugin_options_1.createCompilerPluginOptions)(options, sourceFileCache, loadCache, templateUpdates);
         const buildOptions = {
             ...getEsBuildCommonOptions(options),
             platform: 'browser',
@@ -51,22 +51,16 @@ function createBrowserCodeBundleOptions(options, target, sourceFileCache, styles
             entryPoints,
             target,
             supported: (0, utils_1.getFeatureSupport)(target, zoneless),
-            plugins: [
-                (0, loader_import_attribute_plugin_1.createLoaderImportAttributePlugin)(),
-                (0, wasm_plugin_1.createWasmPlugin)({ allowAsync: zoneless, cache: loadCache }),
-                (0, sourcemap_ignorelist_plugin_1.createSourcemapIgnorelistPlugin)(),
-                (0, angular_localize_init_warning_plugin_1.createAngularLocalizeInitWarningPlugin)(),
-                (0, compiler_plugin_1.createCompilerPlugin)(
-                // JS/TS options
-                pluginOptions, angularCompilation, 
-                // Component stylesheet bundler
-                stylesheetBundler),
-            ],
         };
+        buildOptions.plugins ??= [];
+        buildOptions.plugins.push((0, wasm_plugin_1.createWasmPlugin)({ allowAsync: zoneless, cache: loadCache }), (0, angular_localize_init_warning_plugin_1.createAngularLocalizeInitWarningPlugin)(), (0, compiler_plugin_1.createCompilerPlugin)(
+        // JS/TS options
+        pluginOptions, angularCompilation, 
+        // Component stylesheet bundler
+        stylesheetBundler));
         if (options.plugins) {
-            buildOptions.plugins?.push(...options.plugins);
+            buildOptions.plugins.push(...options.plugins);
         }
-        appendOptionsForExternalPackages(options, buildOptions);
         return buildOptions;
     };
 }
@@ -186,20 +180,15 @@ function createServerMainCodeBundleOptions(options, target, sourceFileCache, sty
             },
             entryPoints,
             supported: (0, utils_1.getFeatureSupport)(target, zoneless),
-            plugins: [
-                (0, wasm_plugin_1.createWasmPlugin)({ allowAsync: zoneless, cache: loadResultCache }),
-                (0, sourcemap_ignorelist_plugin_1.createSourcemapIgnorelistPlugin)(),
-                (0, angular_localize_init_warning_plugin_1.createAngularLocalizeInitWarningPlugin)(),
-                (0, compiler_plugin_1.createCompilerPlugin)(
-                // JS/TS options
-                pluginOptions, 
-                // Browser compilation handles the actual Angular code compilation
-                new compilation_1.NoopCompilation(), 
-                // Component stylesheet bundler
-                stylesheetBundler),
-            ],
         };
         buildOptions.plugins ??= [];
+        buildOptions.plugins.push((0, wasm_plugin_1.createWasmPlugin)({ allowAsync: zoneless, cache: loadResultCache }), (0, angular_localize_init_warning_plugin_1.createAngularLocalizeInitWarningPlugin)(), (0, compiler_plugin_1.createCompilerPlugin)(
+        // JS/TS options
+        pluginOptions, 
+        // Browser compilation handles the actual Angular code compilation
+        new compilation_1.NoopCompilation(), 
+        // Component stylesheet bundler
+        stylesheetBundler));
         if (!externalPackages) {
             buildOptions.plugins.push((0, rxjs_esm_resolution_plugin_1.createRxjsEsmResolutionPlugin)());
         }
@@ -259,7 +248,6 @@ function createServerMainCodeBundleOptions(options, target, sourceFileCache, sty
         if (options.plugins) {
             buildOptions.plugins.push(...options.plugins);
         }
-        appendOptionsForExternalPackages(options, buildOptions);
         return buildOptions;
     };
 }
@@ -291,19 +279,15 @@ function createSsrEntryCodeBundleOptions(options, target, sourceFileCache, style
                 'server': ssrEntryNamespace,
             },
             supported: (0, utils_1.getFeatureSupport)(target, true),
-            plugins: [
-                (0, sourcemap_ignorelist_plugin_1.createSourcemapIgnorelistPlugin)(),
-                (0, angular_localize_init_warning_plugin_1.createAngularLocalizeInitWarningPlugin)(),
-                (0, compiler_plugin_1.createCompilerPlugin)(
-                // JS/TS options
-                pluginOptions, 
-                // Browser compilation handles the actual Angular code compilation
-                new compilation_1.NoopCompilation(), 
-                // Component stylesheet bundler
-                stylesheetBundler),
-            ],
         };
         buildOptions.plugins ??= [];
+        buildOptions.plugins.push((0, angular_localize_init_warning_plugin_1.createAngularLocalizeInitWarningPlugin)(), (0, compiler_plugin_1.createCompilerPlugin)(
+        // JS/TS options
+        pluginOptions, 
+        // Browser compilation handles the actual Angular code compilation
+        new compilation_1.NoopCompilation(), 
+        // Component stylesheet bundler
+        stylesheetBundler));
         if (!externalPackages) {
             buildOptions.plugins.push((0, rxjs_esm_resolution_plugin_1.createRxjsEsmResolutionPlugin)());
         }
@@ -360,17 +344,16 @@ function createSsrEntryCodeBundleOptions(options, target, sourceFileCache, style
         if (options.plugins) {
             buildOptions.plugins.push(...options.plugins);
         }
-        appendOptionsForExternalPackages(options, buildOptions);
         return buildOptions;
     };
 }
 function getEsBuildServerCommonOptions(options) {
     const isNodePlatform = options.ssrOptions?.platform !== schema_1.ExperimentalPlatform.Neutral;
-    const commonOptons = getEsBuildCommonOptions(options);
-    commonOptons.define ??= {};
-    commonOptons.define['ngServerMode'] = 'true';
+    const commonOptions = getEsBuildCommonOptions(options);
+    commonOptions.define ??= {};
+    commonOptions.define['ngServerMode'] = 'true';
     return {
-        ...commonOptons,
+        ...commonOptions,
         platform: isNodePlatform ? 'node' : 'neutral',
         outExtension: { '.js': '.mjs' },
         // Note: `es2015` is needed for RxJS v6. If not specified, `module` would
@@ -413,14 +396,32 @@ function getEsBuildCommonOptions(options) {
     }
     else {
         // Include default conditions
-        conditions.push('module');
-        conditions.push(optimizationOptions.scripts ? 'production' : 'development');
+        conditions.push('module', optimizationOptions.scripts ? 'production' : 'development');
+    }
+    const plugins = [
+        (0, loader_import_attribute_plugin_1.createLoaderImportAttributePlugin)(),
+        (0, sourcemap_ignorelist_plugin_1.createSourcemapIgnorelistPlugin)(),
+    ];
+    let packages = 'bundle';
+    if (options.externalPackages) {
+        // Package files affected by a customized loader should not be implicitly marked as external
+        if (options.loaderExtensions ||
+            options.plugins ||
+            typeof options.externalPackages === 'object') {
+            // Plugin must be added after custom plugins to ensure any added loader options are considered
+            plugins.push((0, external_packages_plugin_1.createExternalPackagesPlugin)(options.externalPackages !== true ? options.externalPackages : undefined));
+            packages = 'bundle';
+        }
+        else {
+            // Safe to use the packages external option directly
+            packages = 'external';
+        }
     }
     return {
         absWorkingDir: workspaceRoot,
         format: 'esm',
         bundle: true,
-        packages: 'bundle',
+        packages,
         assetNames: outputNames.media,
         conditions,
         resolveExtensions: ['.ts', '.tsx', '.mjs', '.js', '.cjs'],
@@ -453,15 +454,14 @@ function getEsBuildCommonOptions(options) {
         },
         loader: loaderExtensions,
         footer,
+        plugins,
     };
 }
 function getEsBuildCommonPolyfillsOptions(options, namespace, tryToResolvePolyfillsAsRelative, loadResultCache) {
     const { jit, workspaceRoot, i18nOptions } = options;
-    const buildOptions = {
-        ...getEsBuildCommonOptions(options),
-        splitting: false,
-        plugins: [(0, sourcemap_ignorelist_plugin_1.createSourcemapIgnorelistPlugin)()],
-    };
+    const buildOptions = getEsBuildCommonOptions(options);
+    buildOptions.splitting = false;
+    buildOptions.plugins ??= [];
     let polyfills = options.polyfills ? [...options.polyfills] : [];
     // Angular JIT mode requires the runtime compiler
     if (jit) {
@@ -486,12 +486,12 @@ function getEsBuildCommonPolyfillsOptions(options, namespace, tryToResolvePolyfi
         needLocaleDataPlugin = true;
     }
     if (needLocaleDataPlugin) {
-        buildOptions.plugins?.push((0, i18n_locale_plugin_1.createAngularLocaleDataPlugin)());
+        buildOptions.plugins.push((0, i18n_locale_plugin_1.createAngularLocaleDataPlugin)());
     }
     if (polyfills.length === 0) {
         return;
     }
-    buildOptions.plugins?.push((0, virtual_module_plugin_1.createVirtualModulePlugin)({
+    buildOptions.plugins.push((0, virtual_module_plugin_1.createVirtualModulePlugin)({
         namespace,
         cache: loadResultCache,
         loadContent: async (_, build) => {
@@ -539,19 +539,3 @@ function entryFileToWorkspaceRelative(workspaceRoot, entryFile) {
             .replace(/.[mc]?ts$/, '')
             .replace(/\\/g, '/'));
 }
-function appendOptionsForExternalPackages(options, buildOptions) {
-    if (!options.externalPackages) {
-        return;
-    }
-    buildOptions.plugins ??= [];
-    // Package files affected by a customized loader should not be implicitly marked as external
-    if (options.loaderExtensions || options.plugins || typeof options.externalPackages === 'object') {
-        // Plugin must be added after custom plugins to ensure any added loader options are considered
-        buildOptions.plugins.push((0, external_packages_plugin_1.createExternalPackagesPlugin)(options.externalPackages !== true ? options.externalPackages : undefined));
-        buildOptions.packages = undefined;
-    }
-    else {
-        // Safe to use the packages external option directly
-        buildOptions.packages = 'external';
-    }
-}

package/src/tools/esbuild/bundler-context.js

@@ -13,6 +13,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.BundlerContext = exports.BuildOutputFileType = void 0;
 const esbuild_1 = require("esbuild");
 const node_assert_1 = __importDefault(require("node:assert"));
+const node_module_1 = require("node:module");
 const node_path_1 = require("node:path");
 const load_result_cache_1 = require("./load-result-cache");
 const utils_1 = require("./utils");
@@ -198,10 +199,11 @@ class BundlerContext {
         if (this.incremental) {
             // Add input files except virtual angular files which do not exist on disk
             for (const input of Object.keys(result.metafile.inputs)) {
-                if (!isInternalAngularFile(input)) {
-                    // input file paths are always relative to the workspace root
-                    this.watchFiles.add((0, node_path_1.join)(this.workspaceRoot, input));
+                if (isInternalAngularFile(input) || isInternalBundlerFile(input)) {
+                    continue;
                 }
+                // Input file paths are always relative to the workspace root
+                this.watchFiles.add((0, node_path_1.join)(this.workspaceRoot, input));
             }
         }
         // Return if the build encountered any errors
@@ -380,3 +382,16 @@ exports.BundlerContext = BundlerContext;
 function isInternalAngularFile(file) {
     return file.startsWith('angular:');
 }
+function isInternalBundlerFile(file) {
+    // Bundler virtual files such as "<define:???>" or "<runtime>"
+    if (file[0] === '<' && file.at(-1) === '>') {
+        return true;
+    }
+    const DISABLED_BUILTIN = '(disabled):';
+    // Disabled node builtins such as "/some/path/(disabled):fs"
+    const disabledIndex = file.indexOf(DISABLED_BUILTIN);
+    if (disabledIndex >= 0) {
+        return node_module_1.builtinModules.includes(file.slice(disabledIndex + DISABLED_BUILTIN.length));
+    }
+    return false;
+}

package/src/tools/esbuild/i18n-inliner-worker.d.ts

@@ -8,7 +8,7 @@
 /**
  * The options passed to the inliner for each file request
  */
-interface InlineRequest {
+interface InlineFileRequest {
     /**
      * The filename that should be processed. The data for the file is provided to the Worker
      * during Worker initialization.
@@ -23,14 +23,35 @@ interface InlineRequest {
      */
     translation?: Record<string, unknown>;
 }
+/**
+ * The options passed to the inliner for each code request
+ */
+interface InlineCodeRequest {
+    /**
+     * The code that should be processed.
+     */
+    code: string;
+    /**
+     * The filename to use in error and warning messages for the provided code.
+     */
+    filename: string;
+    /**
+     * The locale specifier that should be used during the inlining process of the file.
+     */
+    locale: string;
+    /**
+     * The translation messages for the locale that should be used during the inlining process of the file.
+     */
+    translation?: Record<string, unknown>;
+}
 /**
  * Inlines the provided locale and translation into a JavaScript file that contains `$localize` usage.
  * This function is the main entry for the Worker's action that is called by the worker pool.
  *
  * @param request An InlineRequest object representing the options for inlining
- * @returns An array containing the inlined file and optional map content.
+ * @returns An object containing the inlined file and optional map content.
  */
-export default function inlineLocale(request: InlineRequest): Promise<{
+export default function inlineFile(request: InlineFileRequest): Promise<{
     file: string;
     code: string;
     map: string | undefined;
@@ -39,4 +60,18 @@ export default function inlineLocale(request: InlineRequest): Promise<{
         message: string;
     }[];
 }>;
+/**
+ * Inlines the provided locale and translation into JavaScript code that contains `$localize` usage.
+ * This function is a secondary entry primarily for use with component HMR update modules.
+ *
+ * @param request An InlineRequest object representing the options for inlining
+ * @returns An object containing the inlined code.
+ */
+export declare function inlineCode(request: InlineCodeRequest): Promise<{
+    output: string;
+    messages: {
+        type: "warning" | "error";
+        message: string;
+    }[];
+}>;
 export {};

package/src/tools/esbuild/i18n-inliner-worker.js

@@ -10,7 +10,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = inlineLocale;
+exports.default = inlineFile;
+exports.inlineCode = inlineCode;
 const remapping_1 = __importDefault(require("@ampproject/remapping"));
 const core_1 = require("@babel/core");
 const node_assert_1 = __importDefault(require("node:assert"));
@@ -25,9 +26,9 @@ const { files, missingTranslation, shouldOptimize } = (node_worker_threads_1.wor
  * This function is the main entry for the Worker's action that is called by the worker pool.
  *
  * @param request An InlineRequest object representing the options for inlining
- * @returns An array containing the inlined file and optional map content.
+ * @returns An object containing the inlined file and optional map content.
  */
-async function inlineLocale(request) {
+async function inlineFile(request) {
     const data = files.get(request.filename);
     (0, node_assert_1.default)(data !== undefined, `Invalid inline request for file '${request.filename}'.`);
     const code = await data.text();
@@ -40,6 +41,20 @@ async function inlineLocale(request) {
         messages: result.diagnostics.messages,
     };
 }
+/**
+ * Inlines the provided locale and translation into JavaScript code that contains `$localize` usage.
+ * This function is a secondary entry primarily for use with component HMR update modules.
+ *
+ * @param request An InlineRequest object representing the options for inlining
+ * @returns An object containing the inlined code.
+ */
+async function inlineCode(request) {
+    const result = await transformWithBabel(request.code, undefined, request);
+    return {
+        output: result.code,
+        messages: result.diagnostics.messages,
+    };
+}
 /**
  * Cached instance of the `@angular/localize/tools` module.
  * This is used to remove the need to repeatedly import the module per file translation.

package/src/tools/esbuild/i18n-inliner.d.ts

@@ -38,6 +38,11 @@ export declare class I18nInliner {
         errors: string[];
         warnings: string[];
     }>;
+    inlineTemplateUpdate(locale: string, translation: Record<string, unknown> | undefined, templateCode: string, templateId: string): Promise<{
+        code: string;
+        errors: string[];
+        warnings: string[];
+    }>;
     /**
      * Stops all active transformation tasks and shuts down all workers.
      * @returns A void promise that resolves when closing is complete.

package/src/tools/esbuild/i18n-inliner.js

@@ -201,6 +201,32 @@ class I18nInliner {
             warnings,
         };
     }
+    async inlineTemplateUpdate(locale, translation, templateCode, templateId) {
+        const hasLocalize = templateCode.includes(LOCALIZE_KEYWORD);
+        if (!hasLocalize) {
+            return {
+                code: templateCode,
+                errors: [],
+                warnings: [],
+            };
+        }
+        const { output, messages } = await this.#workerPool.run({ code: templateCode, filename: templateId, locale, translation }, { name: 'inlineCode' });
+        const errors = [];
+        const warnings = [];
+        for (const message of messages) {
+            if (message.type === 'error') {
+                errors.push(message.message);
+            }
+            else {
+                warnings.push(message.message);
+            }
+        }
+        return {
+            code: output,
+            errors,
+            warnings,
+        };
+    }
     /**
      * Stops all active transformation tasks and shuts down all workers.
      * @returns A void promise that resolves when closing is complete.

package/src/tools/esbuild/utils.js

@@ -315,7 +315,7 @@ function transformSupportedBrowsersToTargets(supportedBrowsers) {
     }
     return transformed;
 }
-const SUPPORTED_NODE_VERSIONS = '^20.11.1 || >=22.11.0';
+const SUPPORTED_NODE_VERSIONS = '^20.11.1 || ^22.11.0 || >=24.0.0';
 /**
  * Transform supported Node.js versions to esbuild target.
  * @see https://esbuild.github.io/api/#target

package/src/tools/vite/middlewares/chrome-devtools-middleware.js

@@ -27,7 +27,7 @@ function createChromeDevtoolsMiddleware(cacheDir, projectRoot) {
         if (!devtoolsConfig) {
             // We store the UUID and re-use it to ensure Chrome does not repeatedly ask for permissions when restarting the dev server.
             try {
-                const devtoolsConfig = (0, node_fs_1.readFileSync)(devtoolsConfigPath, 'utf-8');
+                devtoolsConfig = (0, node_fs_1.readFileSync)(devtoolsConfigPath, 'utf-8');
                 const devtoolsConfigJson = JSON.parse(devtoolsConfig);
                 node_assert_1.default.equal(projectRoot, devtoolsConfigJson?.workspace.root);
             }

package/src/utils/normalize-cache.js

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

package/src/utils/project-metadata.d.ts

@@ -0,0 +1,21 @@
+/**
+ * @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.dev/license
+ */
+/**
+ * Normalize a directory path string.
+ * Currently only removes a trailing slash if present.
+ * @param path A path string.
+ * @returns A normalized path string.
+ */
+export declare function normalizeDirectoryPath(path: string): string;
+export declare function getProjectRootPaths(workspaceRoot: string, projectMetadata: {
+    root?: string;
+    sourceRoot?: string;
+}): {
+    projectRoot: string;
+    projectSourceRoot: string;
+};

package/src/utils/project-metadata.js

@@ -0,0 +1,31 @@
+"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.dev/license
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.normalizeDirectoryPath = normalizeDirectoryPath;
+exports.getProjectRootPaths = getProjectRootPaths;
+const node_path_1 = require("node:path");
+/**
+ * Normalize a directory path string.
+ * Currently only removes a trailing slash if present.
+ * @param path A path string.
+ * @returns A normalized path string.
+ */
+function normalizeDirectoryPath(path) {
+    const last = path[path.length - 1];
+    if (last === '/' || last === '\\') {
+        return path.slice(0, -1);
+    }
+    return path;
+}
+function getProjectRootPaths(workspaceRoot, projectMetadata) {
+    const projectRoot = normalizeDirectoryPath((0, node_path_1.join)(workspaceRoot, projectMetadata.root ?? ''));
+    const rawSourceRoot = projectMetadata.sourceRoot;
+    const projectSourceRoot = normalizeDirectoryPath(rawSourceRoot === undefined ? (0, node_path_1.join)(projectRoot, 'src') : (0, node_path_1.join)(workspaceRoot, rawSourceRoot));
+    return { projectRoot, projectSourceRoot };
+}

package/src/utils/worker-pool.js

@@ -17,7 +17,7 @@ class WorkerPool extends piscina_1.Piscina {
             idleTimeout: 1000,
             // Web containers do not support transferable objects with receiveOnMessagePort which
             // is used when the Atomics based wait loop is enable.
-            useAtomics: !process.versions.webcontainer,
+            atomics: process.versions.webcontainer ? 'disabled' : 'sync',
             recordTiming: false,
             ...options,
         };