@angular/build 20.2.2 → 21.0.0-next.1

package/.browserslistrc

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@angular/build",
-  "version": "20.2.2",
+  "version": "21.0.0-next.1",
   "description": "Official build system for Angular",
   "keywords": [
     "Angular CLI",
@@ -23,11 +23,11 @@
   "builders": "builders.json",
   "dependencies": {
     "@ampproject/remapping": "2.3.0",
-    "@angular-devkit/architect": "0.2002.2",
+    "@angular-devkit/architect": "0.2100.0-next.1",
     "@babel/core": "7.28.3",
     "@babel/helper-annotate-as-pure": "7.27.3",
     "@babel/helper-split-export-declaration": "7.24.7",
-    "@inquirer/confirm": "5.1.14",
+    "@inquirer/confirm": "5.1.16",
     "@vitejs/plugin-basic-ssl": "2.1.0",
     "beasties": "0.3.5",
     "browserslist": "^4.23.0",
@@ -35,35 +35,35 @@
     "https-proxy-agent": "7.0.6",
     "istanbul-lib-instrument": "6.0.3",
     "jsonc-parser": "3.3.1",
-    "listr2": "9.0.1",
-    "magic-string": "0.30.17",
+    "listr2": "9.0.2",
+    "magic-string": "0.30.18",
     "mrmime": "2.0.1",
     "parse5-html-rewriting-stream": "8.0.0",
     "picomatch": "4.0.3",
     "piscina": "5.1.3",
-    "rolldown": "1.0.0-beta.32",
-    "sass": "1.90.0",
+    "rolldown": "1.0.0-beta.34",
+    "sass": "1.91.0",
     "semver": "7.7.2",
     "source-map-support": "0.5.21",
     "tinyglobby": "0.2.14",
-    "vite": "7.1.2",
+    "vite": "7.1.3",
     "watchpack": "2.4.4"
   },
   "optionalDependencies": {
     "lmdb": "3.4.2"
   },
   "peerDependencies": {
-    "@angular/core": "^20.0.0",
-    "@angular/compiler": "^20.0.0",
-    "@angular/compiler-cli": "^20.0.0",
-    "@angular/localize": "^20.0.0",
-    "@angular/platform-browser": "^20.0.0",
-    "@angular/platform-server": "^20.0.0",
-    "@angular/service-worker": "^20.0.0",
-    "@angular/ssr": "^20.2.2",
+    "@angular/core": "^21.0.0-next.0",
+    "@angular/compiler": "^21.0.0-next.0",
+    "@angular/compiler-cli": "^21.0.0-next.0",
+    "@angular/localize": "^21.0.0-next.0",
+    "@angular/platform-browser": "^21.0.0-next.0",
+    "@angular/platform-server": "^21.0.0-next.0",
+    "@angular/service-worker": "^21.0.0-next.0",
+    "@angular/ssr": "^21.0.0-next.1",
     "karma": "^6.4.0",
     "less": "^4.2.0",
-    "ng-packagr": "^20.0.0",
+    "ng-packagr": "^21.0.0-next.0",
     "postcss": "^8.4.0",
     "tailwindcss": "^2.0.0 || ^3.0.0 || ^4.0.0",
     "tslib": "^2.3.0",
@@ -112,7 +112,7 @@
     "type": "git",
     "url": "https://github.com/angular/angular-cli.git"
   },
-  "packageManager": "pnpm@10.15.1",
+  "packageManager": "pnpm@10.15.0",
   "engines": {
     "node": "^20.19.0 || ^22.12.0 || >=24.0.0",
     "npm": "^6.11.0 || ^7.5.6 || >=8.0.0",

package/src/builders/application/chunk-optimizer.js

@@ -198,7 +198,8 @@ async function optimizeChunks(original, sourcemap) {
             ],
         });
         const result = await bundle.generate({
-            minify: { mangle: false, compress: false, removeWhitespace: true },
+            minify: { mangle: false, compress: false },
+            advancedChunks: { minSize: 8192 },
             sourcemap,
             chunkFileNames: (chunkInfo) => `${chunkInfo.name.replace(/-[a-zA-Z0-9]{8}$/, '')}-[hash].js`,
         });

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

@@ -11,7 +11,7 @@ exports.execute = execute;
 const check_port_1 = require("../../utils/check-port");
 const internal_1 = require("./internal");
 const options_1 = require("./options");
-const vite_server_1 = require("./vite-server");
+const vite_1 = require("./vite");
 /**
  * A Builder that executes a development server based on the provided browser target option.
  *
@@ -33,7 +33,7 @@ async function* execute(options, context, extensions) {
         return;
     }
     const { builderName, normalizedOptions } = await initialize(options, projectName, context);
-    yield* (0, vite_server_1.serveWithVite)(normalizedOptions, builderName, (options, context, plugins) => (0, internal_1.buildApplicationInternal)(options, context, { codePlugins: plugins }), context, { indexHtml: extensions?.indexHtmlTransformer }, extensions);
+    yield* (0, vite_1.serveWithVite)(normalizedOptions, builderName, (options, context, plugins) => (0, internal_1.buildApplicationInternal)(options, context, { codePlugins: plugins }), context, { indexHtml: extensions?.indexHtmlTransformer }, extensions);
 }
 async function initialize(initialOptions, projectName, context) {
     // Purge old build disk cache.

package/src/builders/dev-server/vite/hmr.d.ts

@@ -0,0 +1,25 @@
+/**
+ * @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 } from '@angular-devkit/architect';
+import type { ViteDevServer } from 'vite';
+import type { ComponentStyleRecord } from '../../../tools/vite/middlewares';
+import type { NormalizedDevServerOptions } from '../options';
+import type { OutputAssetRecord, OutputFileRecord } from './utils';
+/**
+ * Invalidates any updated asset or generated files and resets their `updated` state.
+ * This function also clears the server application cache when necessary.
+ *
+ * @returns A list of files that were updated and invalidated.
+ */
+export declare function invalidateUpdatedFiles(normalizePath: (id: string) => string, generatedFiles: Map<string, OutputFileRecord>, assetFiles: Map<string, OutputAssetRecord>, server: ViteDevServer): Promise<string[]>;
+/**
+ * Handles updates for the client by sending HMR or full page reload commands
+ * based on the updated files. It also ensures proper tracking of component styles and determines if
+ * a full reload is needed.
+ */
+export declare function handleUpdate(server: ViteDevServer, serverOptions: NormalizedDevServerOptions, logger: BuilderContext['logger'], componentStyles: Map<string, ComponentStyleRecord>, updatedFiles: string[]): void;

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

@@ -0,0 +1,113 @@
+"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.invalidateUpdatedFiles = invalidateUpdatedFiles;
+exports.handleUpdate = handleUpdate;
+const node_path_1 = require("node:path");
+const internal_1 = require("../internal");
+/**
+ * Invalidates any updated asset or generated files and resets their `updated` state.
+ * This function also clears the server application cache when necessary.
+ *
+ * @returns A list of files that were updated and invalidated.
+ */
+async function invalidateUpdatedFiles(normalizePath, generatedFiles, assetFiles, server) {
+    const updatedFiles = [];
+    // Invalidate any updated asset
+    for (const [file, record] of assetFiles) {
+        if (!record.updated) {
+            continue;
+        }
+        record.updated = false;
+        updatedFiles.push(file);
+    }
+    // Invalidate any updated files
+    let serverApplicationChanged = false;
+    for (const [file, record] of generatedFiles) {
+        if (!record.updated) {
+            continue;
+        }
+        record.updated = false;
+        updatedFiles.push(file);
+        serverApplicationChanged ||= record.type === internal_1.BuildOutputFileType.ServerApplication;
+        const updatedModules = server.moduleGraph.getModulesByFile(normalizePath((0, node_path_1.join)(server.config.root, file)));
+        updatedModules?.forEach((m) => server.moduleGraph.invalidateModule(m));
+    }
+    if (serverApplicationChanged) {
+        // Clear the server app cache and
+        // trigger module evaluation before reload to initiate dependency optimization.
+        const { ɵdestroyAngularServerApp } = (await server.ssrLoadModule('/main.server.mjs'));
+        ɵdestroyAngularServerApp();
+    }
+    return updatedFiles;
+}
+/**
+ * Handles updates for the client by sending HMR or full page reload commands
+ * based on the updated files. It also ensures proper tracking of component styles and determines if
+ * a full reload is needed.
+ */
+function handleUpdate(server, serverOptions, logger, componentStyles, updatedFiles) {
+    if (!updatedFiles.length) {
+        return;
+    }
+    if (serverOptions.hmr) {
+        if (updatedFiles.every((f) => f.endsWith('.css'))) {
+            let requiresReload = false;
+            const timestamp = Date.now();
+            const updates = updatedFiles.flatMap((filePath) => {
+                // For component styles, an HMR update must be sent for each one with the corresponding
+                // component identifier search parameter (`ngcomp`). The Vite client code will not keep
+                // the existing search parameters when it performs an update and each one must be
+                // specified explicitly. Typically, there is only one each though as specific style files
+                // are not typically reused across components.
+                const record = componentStyles.get(filePath);
+                if (record) {
+                    if (record.reload) {
+                        // Shadow DOM components currently require a full reload.
+                        // Vite's CSS hot replacement does not support shadow root searching.
+                        requiresReload = true;
+                        return [];
+                    }
+                    return Array.from(record.used ?? []).map((id) => {
+                        return {
+                            type: 'css-update',
+                            timestamp,
+                            path: `${filePath}?ngcomp` + (typeof id === 'string' ? `=${id}` : ''),
+                            acceptedPath: filePath,
+                        };
+                    });
+                }
+                return {
+                    type: 'css-update',
+                    timestamp,
+                    path: filePath,
+                    acceptedPath: filePath,
+                };
+            });
+            if (!requiresReload) {
+                server.ws.send({
+                    type: 'update',
+                    updates,
+                });
+                logger.info('Stylesheet update sent to client(s).');
+                return;
+            }
+        }
+    }
+    // Send reload command to clients
+    if (serverOptions.liveReload) {
+        // Clear used component tracking on full reload
+        componentStyles.forEach((record) => record.used?.clear());
+        server.ws.send({
+            type: 'full-reload',
+            path: '*',
+        });
+        logger.info('Page reload sent to client(s).');
+    }
+}

package/src/builders/dev-server/vite/index.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
+ */
+import type { BuilderContext } from '@angular-devkit/architect';
+import type { Plugin } from 'esbuild';
+import type { Connect } from 'vite';
+import { Result } from '../../application/results';
+import { type ApplicationBuilderInternalOptions } from '../internal';
+import type { NormalizedDevServerOptions } from '../options';
+import type { DevServerBuilderOutput } from '../output';
+export type BuilderAction = (options: ApplicationBuilderInternalOptions, context: BuilderContext, plugins?: Plugin[]) => AsyncIterable<Result>;
+export declare function serveWithVite(serverOptions: NormalizedDevServerOptions, builderName: string, builderAction: BuilderAction, context: BuilderContext, transformers?: {
+    indexHtml?: (content: string) => Promise<string>;
+}, extensions?: {
+    middleware?: Connect.NextHandleFunction[];
+    buildPlugins?: Plugin[];
+}): AsyncIterableIterator<DevServerBuilderOutput>;