@angular/build 20.0.0-next.5 → 20.0.0-next.7

package/.browserslistrc

@@ -0,0 +1,7 @@
+Chrome >= 105
+ChromeAndroid >= 105
+Edge >= 105
+Firefox >= 104
+FirefoxAndroid >= 104
+Safari >= 16
+iOS >= 16

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@angular/build",
-  "version": "20.0.0-next.5",
+  "version": "20.0.0-next.7",
   "description": "Official build system for Angular",
   "keywords": [
     "Angular CLI",
@@ -23,30 +23,30 @@
   "builders": "builders.json",
   "dependencies": {
     "@ampproject/remapping": "2.3.0",
-    "@angular-devkit/architect": "0.2000.0-next.5",
+    "@angular-devkit/architect": "0.2000.0-next.7",
     "@babel/core": "7.26.10",
     "@babel/helper-annotate-as-pure": "7.25.9",
     "@babel/helper-split-export-declaration": "7.24.7",
     "@inquirer/confirm": "5.1.9",
     "@vitejs/plugin-basic-ssl": "2.0.0",
-    "beasties": "0.3.2",
+    "beasties": "0.3.3",
     "browserslist": "^4.23.0",
-    "esbuild": "0.25.2",
+    "esbuild": "0.25.3",
     "https-proxy-agent": "7.0.6",
     "istanbul-lib-instrument": "6.0.3",
     "jsonc-parser": "3.3.1",
-    "listr2": "8.2.5",
+    "listr2": "8.3.2",
     "magic-string": "0.30.17",
     "mrmime": "2.0.1",
-    "parse5-html-rewriting-stream": "7.0.0",
+    "parse5-html-rewriting-stream": "7.1.0",
     "picomatch": "4.0.2",
     "piscina": "4.9.2",
-    "rollup": "4.39.0",
-    "sass": "1.86.3",
+    "rollup": "4.40.0",
+    "sass": "1.87.0",
     "semver": "7.7.1",
     "source-map-support": "0.5.21",
-    "tinyglobby": "0.2.12",
-    "vite": "6.2.5",
+    "tinyglobby": "0.2.13",
+    "vite": "6.3.2",
     "watchpack": "2.4.2"
   },
   "optionalDependencies": {
@@ -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.5",
+    "@angular/ssr": "^20.0.0-next.7",
     "karma": "^6.4.0",
     "less": "^4.2.0",
     "ng-packagr": "^20.0.0 || ^20.0.0-next.0",

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

@@ -247,8 +247,9 @@ async function* serveWithVite(serverOptions, builderName, builderAction, context
             externalMetadata.explicitServer.length = 0;
             externalMetadata.implicitServer.length = 0;
             externalMetadata.implicitBrowser.length = 0;
-            externalMetadata.explicitBrowser.push(...explicit);
-            externalMetadata.explicitServer.push(...explicit, ...node_module_1.builtinModules);
+            const externalDeps = browserOptions.externalDependencies ?? [];
+            externalMetadata.explicitBrowser.push(...explicit, ...externalDeps);
+            externalMetadata.explicitServer.push(...explicit, ...externalDeps, ...node_module_1.builtinModules);
             externalMetadata.implicitServer.push(...implicitServerFiltered);
             externalMetadata.implicitBrowser.push(...implicitBrowserFiltered);
             // The below needs to be sorted as Vite uses these options are part of the hashing invalidation algorithm.
@@ -307,7 +308,10 @@ async function* serveWithVite(serverOptions, builderName, builderAction, context
                 });
             }
             // Setup server and start listening
-            const serverConfiguration = await setupServer(serverOptions, generatedFiles, assetFiles, browserOptions.preserveSymlinks, externalMetadata, ssrMode, prebundleTransformer, target, (0, internal_1.isZonelessApp)(polyfills), componentStyles, templateUpdates, browserOptions.loader, browserOptions.define, extensions?.middleware, transformers?.indexHtml, thirdPartySourcemaps);
+            const serverConfiguration = await setupServer(serverOptions, generatedFiles, assetFiles, browserOptions.preserveSymlinks, externalMetadata, ssrMode, prebundleTransformer, target, (0, internal_1.isZonelessApp)(polyfills), componentStyles, templateUpdates, browserOptions.loader, {
+                ...browserOptions.define,
+                'ngHmrMode': browserOptions.templateUpdates ? 'true' : 'false',
+            }, extensions?.middleware, transformers?.indexHtml, thirdPartySourcemaps);
             server = await createServer(serverConfiguration);
             await server.listen();
             // Setup builder context logging for browser clients

package/src/builders/karma/application_builder.js

@@ -49,6 +49,7 @@ const path = __importStar(require("node:path"));
 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 index_1 = require("../application/index");
 const results_1 = require("../application/results");
 const schema_1 = require("../application/schema");
@@ -72,30 +73,27 @@ class AngularAssetsMiddleware {
         this.latestBuildFiles = latestBuildFiles;
     }
     handle(req, res, next) {
-        let err = null;
-        try {
-            const url = new URL(`http://${req.headers['host']}${req.url}`);
-            // Remove the leading slash from the URL path and convert to platform specific.
-            // The latest build files will use the platform path separator.
-            let pathname = url.pathname.slice(1);
-            if (isWindows) {
-                pathname = pathname.replaceAll(path.posix.sep, path.win32.sep);
-            }
-            const file = this.latestBuildFiles.files[pathname];
-            if (file?.origin === 'disk') {
+        const url = new URL(`http://${req.headers['host']}${req.url}`);
+        // Remove the leading slash from the URL path and convert to platform specific.
+        // The latest build files will use the platform path separator.
+        let pathname = url.pathname.slice(1);
+        if (isWindows) {
+            pathname = pathname.replaceAll(path.posix.sep, path.win32.sep);
+        }
+        const file = this.latestBuildFiles.files[pathname];
+        if (!file) {
+            next();
+            return;
+        }
+        switch (file.origin) {
+            case 'disk':
                 this.serveFile(file.inputPath, undefined, res);
-                return;
-            }
-            else if (file?.origin === 'memory') {
+                break;
+            case 'memory':
                 // Include pathname to help with Content-Type headers.
                 this.serveFile(`/unused/${url.pathname}`, undefined, res, undefined, file.contents, true);
-                return;
-            }
-        }
-        catch (e) {
-            err = e;
+                break;
         }
-        next(err);
     }
     static createPlugin(initialFiles) {
         return {
@@ -309,7 +307,7 @@ async function initializeApplication(options, context, karmaOptions, transforms
         entryPoints.set(mainName, options.main);
     }
     else {
-        entryPoints.set(mainName, localResolve('./polyfills/init_test_bed.js'));
+        entryPoints.set(mainName, 'angular:test-bed-init');
     }
     const instrumentForCoverage = options.codeCoverage
         ? createInstrumentationFilter(projectSourceRoot, getInstrumentationExcludedPaths(context.workspaceRoot, options.codeCoverageExclude ?? []))
@@ -323,6 +321,7 @@ async function initializeApplication(options, context, karmaOptions, transforms
         entryPoints,
         tsConfig: options.tsConfig,
         outputPath,
+        preserveSymlinks: options.preserveSymlinks,
         aot: options.aot,
         index: false,
         outputHashing: schema_1.OutputHashing.None,
@@ -347,8 +346,27 @@ async function initializeApplication(options, context, karmaOptions, transforms
         loader: options.loader,
         externalDependencies: options.externalDependencies,
     };
+    const virtualTestBedInit = (0, virtual_module_plugin_1.createVirtualModulePlugin)({
+        namespace: 'angular:test-bed-init',
+        loadContent: async () => {
+            const contents = [
+                // Initialize the Angular testing environment
+                `import { getTestBed } from '@angular/core/testing';`,
+                `import { BrowserTestingModule, platformBrowserTesting } from '@angular/platform-browser/testing';`,
+                `getTestBed().initTestEnvironment(BrowserTestingModule, platformBrowserTesting(), {`,
+                `  errorOnUnknownElements: true,`,
+                `  errorOnUnknownProperties: true,`,
+                '});',
+            ];
+            return {
+                contents: contents.join('\n'),
+                loader: 'js',
+                resolveDir: projectSourceRoot,
+            };
+        },
+    });
     // Build tests with `application` builder, using test files as entry points.
-    const [buildOutput, buildIterator] = await first((0, index_1.buildApplicationInternal)(buildOptions, context), { cancel: !buildOptions.watch });
+    const [buildOutput, buildIterator] = await first((0, index_1.buildApplicationInternal)(buildOptions, context, { codePlugins: [virtualTestBedInit] }), { cancel: !buildOptions.watch });
     if (buildOutput.kind === results_1.ResultKind.Failure) {
         throw new ApplicationBuildError('Build failed');
     }

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

@@ -536,7 +536,8 @@ function createCompilerOptionsTransformer(setupWarnings, pluginOptions, preserve
         }
         // Synchronize custom resolve conditions.
         // Set if using the supported bundler resolution mode (bundler is the default in new projects)
-        if (compilerOptions.moduleResolution === 100 /* ModuleResolutionKind.Bundler */) {
+        if (compilerOptions.moduleResolution === 100 /* ModuleResolutionKind.Bundler */ ||
+            compilerOptions.module === 200 /** ModuleKind.Preserve */) {
             compilerOptions.customConditions = customConditions;
         }
         return {

package/src/tools/esbuild/angular/component-stylesheets.js

@@ -58,6 +58,10 @@ class ComponentStylesheetBundler {
                 else {
                     buildOptions.entryPoints = [entry];
                 }
+                // Angular encapsulation does not support nesting
+                // See: https://github.com/angular/angular/issues/58996
+                buildOptions.supported ??= {};
+                buildOptions.supported['nesting'] = false;
                 return buildOptions;
             });
         });
@@ -89,6 +93,10 @@ class ComponentStylesheetBundler {
                 else {
                     buildOptions.entryPoints = [`${namespace};${entry}`];
                 }
+                // Angular encapsulation does not support nesting
+                // See: https://github.com/angular/angular/issues/58996
+                buildOptions.supported ??= {};
+                buildOptions.supported['nesting'] = false;
                 buildOptions.plugins.push({
                     name: 'angular-component-styles',
                     setup(build) {

package/src/tools/vite/plugins/angular-memory-plugin.js

@@ -108,7 +108,7 @@ async function loadViteClientCode(file, disableViteTransport = false) {
     (0, node_assert_1.default)(originalContents !== updatedContents, 'Failed to update Vite client error overlay text.');
     if (disableViteTransport) {
         const previousUpdatedContents = updatedContents;
-        updatedContents = updatedContents.replace('transport.connect(handleMessage)', '');
+        updatedContents = updatedContents.replace('transport.connect(createHMRHandler(handleMessage));', '');
         (0, node_assert_1.default)(previousUpdatedContents !== updatedContents, 'Failed to update Vite client WebSocket disable.');
         updatedContents = updatedContents.replace('console.debug("[vite] connecting...")', '');
     }

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.5';
+const VERSION = '20.0.0-next.7';
 function hasCacheMetadata(value) {
     return (!!value &&
         typeof value === 'object' &&

package/src/utils/supported-browsers.js

@@ -13,30 +13,40 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.getSupportedBrowsers = getSupportedBrowsers;
 const browserslist_1 = __importDefault(require("browserslist"));
 function getSupportedBrowsers(projectRoot, logger) {
-    browserslist_1.default.defaults = [
-        'last 2 Chrome versions',
-        'last 1 Firefox version',
-        'last 2 Edge major versions',
-        'last 2 Safari major versions',
-        'last 2 iOS major versions',
-        'last 2 Android major versions',
-        'Firefox ESR',
-    ];
+    // Read the browserslist configuration containing Angular's browser support policy.
+    const angularBrowserslist = (0, browserslist_1.default)(undefined, {
+        path: require.resolve('../../.browserslistrc'),
+    });
+    // Use Angular's configuration as the default.
+    browserslist_1.default.defaults = angularBrowserslist;
+    // Get the minimum set of browser versions supported by Angular.
+    const minimumBrowsers = new Set(angularBrowserslist);
     // Get browsers from config or default.
     const browsersFromConfigOrDefault = new Set((0, browserslist_1.default)(undefined, { path: projectRoot }));
     // Get browsers that support ES6 modules.
     const browsersThatSupportEs6 = new Set((0, browserslist_1.default)('supports es6-module'));
+    const nonEs6Browsers = [];
     const unsupportedBrowsers = [];
     for (const browser of browsersFromConfigOrDefault) {
         if (!browsersThatSupportEs6.has(browser)) {
+            // Any browser which does not support ES6 is explicitly ignored, as Angular will not build successfully.
             browsersFromConfigOrDefault.delete(browser);
+            nonEs6Browsers.push(browser);
+        }
+        else if (!minimumBrowsers.has(browser)) {
+            // Any other unsupported browser we will attempt to use, but provide no support for.
             unsupportedBrowsers.push(browser);
         }
     }
-    if (unsupportedBrowsers.length) {
+    if (nonEs6Browsers.length) {
         logger.warn(`One or more browsers which are configured in the project's Browserslist configuration ` +
             'will be ignored as ES5 output is not supported by the Angular CLI.\n' +
-            `Ignored browsers: ${unsupportedBrowsers.join(', ')}`);
+            `Ignored browsers:\n${nonEs6Browsers.join(', ')}`);
+    }
+    if (unsupportedBrowsers.length) {
+        logger.warn(`One or more browsers which are configured in the project's Browserslist configuration ` +
+            "fall outside Angular's browser support for this version.\n" +
+            `Unsupported browsers:\n${unsupportedBrowsers.join(', ')}`);
     }
     return Array.from(browsersFromConfigOrDefault);
 }

package/src/builders/karma/polyfills/init_test_bed.js

@@ -1,16 +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.dev/license
- */
-
-import { getTestBed } from '@angular/core/testing';
-import { BrowserTestingModule, platformBrowserTesting } from '@angular/platform-browser/testing';
-
-// Initialize the Angular testing environment.
-getTestBed().initTestEnvironment(BrowserTestingModule, platformBrowserTesting(), {
-  errorOnUnknownElements: true,
-  errorOnUnknownProperties: true,
-});