@angular-devkit/build-angular 21.0.0-next.4 → 21.0.0-next.6

package/package.json

@@ -1,16 +1,16 @@
 {
   "name": "@angular-devkit/build-angular",
-  "version": "21.0.0-next.4",
+  "version": "21.0.0-next.6",
   "description": "Angular Webpack Build Facade",
   "main": "src/index.js",
   "typings": "src/index.d.ts",
   "builders": "builders.json",
   "dependencies": {
     "@ampproject/remapping": "2.3.0",
-    "@angular-devkit/architect": "0.2100.0-next.4",
-    "@angular-devkit/build-webpack": "0.2100.0-next.4",
-    "@angular-devkit/core": "21.0.0-next.4",
-    "@angular/build": "21.0.0-next.4",
+    "@angular-devkit/architect": "0.2100.0-next.6",
+    "@angular-devkit/build-webpack": "0.2100.0-next.6",
+    "@angular-devkit/core": "21.0.0-next.6",
+    "@angular/build": "21.0.0-next.6",
     "@babel/core": "7.28.4",
     "@babel/generator": "7.28.3",
     "@babel/helper-annotate-as-pure": "7.27.3",
@@ -21,14 +21,14 @@
     "@babel/preset-env": "7.28.3",
     "@babel/runtime": "7.28.4",
     "@discoveryjs/json-ext": "0.6.3",
-    "@ngtools/webpack": "21.0.0-next.4",
+    "@ngtools/webpack": "21.0.0-next.6",
     "ansi-colors": "4.1.3",
     "autoprefixer": "10.4.21",
     "babel-loader": "10.0.0",
     "browserslist": "^4.26.0",
     "copy-webpack-plugin": "13.0.1",
     "css-loader": "7.1.2",
-    "esbuild-wasm": "0.25.9",
+    "esbuild-wasm": "0.25.10",
     "http-proxy-middleware": "3.0.5",
     "istanbul-lib-instrument": "6.0.3",
     "jsonc-parser": "3.3.1",
@@ -46,7 +46,7 @@
     "postcss-loader": "8.2.0",
     "resolve-url-loader": "5.0.0",
     "rxjs": "7.8.2",
-    "sass": "1.92.1",
+    "sass": "1.93.2",
     "sass-loader": "16.0.5",
     "semver": "7.7.2",
     "source-map-loader": "5.0.0",
@@ -55,14 +55,14 @@
     "tinyglobby": "0.2.15",
     "tree-kill": "1.2.2",
     "tslib": "2.8.1",
-    "webpack": "5.101.3",
-    "webpack-dev-middleware": "7.4.3",
+    "webpack": "5.102.0",
+    "webpack-dev-middleware": "7.4.5",
     "webpack-dev-server": "5.2.2",
     "webpack-merge": "6.0.1",
     "webpack-subresource-integrity": "5.1.0"
   },
   "optionalDependencies": {
-    "esbuild": "0.25.9"
+    "esbuild": "0.25.10"
   },
   "peerDependencies": {
     "@angular/core": "^21.0.0-next.0",
@@ -71,7 +71,7 @@
     "@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.4",
+    "@angular/ssr": "^21.0.0-next.6",
     "@web/test-runner": "^0.20.0",
     "browser-sync": "^3.0.2",
     "jest": "^29.5.0",
@@ -137,7 +137,7 @@
     "type": "git",
     "url": "https://github.com/angular/angular-cli.git"
   },
-  "packageManager": "pnpm@10.17.0",
+  "packageManager": "pnpm@10.17.1",
   "engines": {
     "node": "^20.19.0 || ^22.12.0 || >=24.0.0",
     "npm": "^6.11.0 || ^7.5.6 || >=8.0.0",

package/src/builders/app-shell/index.js

@@ -59,7 +59,11 @@ async function _renderUniversal(options, context, browserResult, serverResult, s
     const browserOptions = await context.validateOptions(rawBrowserOptions, browserBuilderName);
     // Locate zone.js to load in the render worker
     const root = context.workspaceRoot;
-    const zonePackage = require.resolve('zone.js', { paths: [root] });
+    let zonePackage;
+    try {
+        zonePackage = require.resolve('zone.js', { paths: [root] });
+    }
+    catch { }
     const projectName = context.target && context.target.project;
     if (!projectName) {
         throw new Error('The builder requires a target.');

package/src/builders/app-shell/render-worker.js

@@ -101,8 +101,9 @@ function isBootstrapFn(value) {
  * @returns A promise resolving to the render function of the worker.
  */
 async function initialize() {
-    // Setup Zone.js
-    await Promise.resolve(`${zonePackage}`).then(s => __importStar(require(s)));
+    if (zonePackage) {
+        await Promise.resolve(`${zonePackage}`).then(s => __importStar(require(s)));
+    }
     // Return the render function for use
     return render;
 }

package/src/builders/jest/index.js

@@ -141,7 +141,7 @@ exports.default = (0, architect_1.createBuilder)(async (schema, context) => {
         // the environment for fake async to work correctly.
         // Third, we initialize `TestBed`. This is dependent on fake async being set up correctly beforehand.
         `--setupFilesAfterEnv="<rootDir>/jest-global.mjs"`,
-        ...(options.polyfills ? [`--setupFilesAfterEnv="<rootDir>/polyfills.mjs"`] : []),
+        ...(options.polyfills?.length ? [`--setupFilesAfterEnv="<rootDir>/polyfills.mjs"`] : []),
         `--setupFilesAfterEnv="<rootDir>/init-test-bed.mjs"`,
         // Don't run any infrastructure files as tests, they are manually loaded where needed.
         `--testPathIgnorePatterns="<rootDir>/jest-global\\.mjs"`,

package/src/builders/jest/init-test-bed.mjs

@@ -9,10 +9,16 @@
 // TODO(dgp1130): These imports likely don't resolve in stricter package environments like `pnpm`, since they are resolved relative to
 // `@angular-devkit/build-angular` rather than the user's workspace. Should look into virtual modules to support those use cases.
 
+import { NgModule, provideZoneChangeDetection } from '@angular/core';
 import { getTestBed } from '@angular/core/testing';
 import { BrowserTestingModule, platformBrowserTesting } from '@angular/platform-browser/testing';
 
-getTestBed().initTestEnvironment(BrowserTestingModule, platformBrowserTesting(), {
+@NgModule({
+  providers: [typeof window.Zone !== 'undefined' ? provideZoneChangeDetection() : []],
+})
+class TestModule {}
+
+getTestBed().initTestEnvironment([BrowserTestingModule, TestModule], platformBrowserTesting(), {
   errorOnUnknownElements: true,
   errorOnUnknownProperties: true,
 });

package/src/builders/karma/browser_builder.js

@@ -129,13 +129,17 @@ async function initializeBrowser(options, context, webpackConfigurationTransform
     }, context, (wco) => [(0, configs_1.getCommonConfig)(wco), (0, configs_1.getStylesConfig)(wco)]);
     return [karma, (await webpackConfigurationTransformer?.(config)) ?? config];
 }
-function getBuiltInMainFile() {
+function getBuiltInMainFile(includeZoneProvider = false) {
     const content = Buffer.from(`
+  import { provideZoneChangeDetection, ɵcompileNgModuleDefs as compileNgModuleDefs } from '@angular/core';
   import { getTestBed } from '@angular/core/testing';
   import { BrowserTestingModule, platformBrowserTesting } from '@angular/platform-browser/testing';
 
+  export class TestModule {}
+  compileNgModuleDefs(TestModule, {providers: [${includeZoneProvider ? 'provideZoneChangeDetection()' : ''}]});
+
   // Initialize the Angular testing environment.
-  getTestBed().initTestEnvironment(BrowserTestingModule, platformBrowserTesting(), {
+  getTestBed().initTestEnvironment([BrowserTestingModule, TestModule], platformBrowserTesting(), {
     errorOnUnknownElements: true,
     errorOnUnknownProperties: true
   });

package/src/builders/prerender/index.js

@@ -69,6 +69,11 @@ async function getRoutes(indexFile, outputPath, serverBundlePath, options, works
             routes.add(route);
         }
     }
+    let zonePackage;
+    try {
+        zonePackage = require.resolve('zone.js/node', { paths: [workspaceRoot] });
+    }
+    catch { }
     if (discoverRoutes) {
         const renderWorker = new piscina_1.default({
             filename: require.resolve('./routes-extractor-worker'),
@@ -77,7 +82,7 @@ async function getRoutes(indexFile, outputPath, serverBundlePath, options, works
                 indexFile,
                 outputPath,
                 serverBundlePath,
-                zonePackage: require.resolve('zone.js', { paths: [workspaceRoot] }),
+                zonePackage,
             },
             recordTiming: false,
         });
@@ -145,7 +150,11 @@ async function _renderUniversal(options, context, browserResult, serverResult, b
     // Users can specify a different base html file e.g. "src/home.html"
     const indexFile = (0, webpack_browser_config_1.getIndexOutputFile)(browserOptions.index);
     const { styles: normalizedStylesOptimization } = (0, utils_1.normalizeOptimization)(browserOptions.optimization);
-    const zonePackage = require.resolve('zone.js', { paths: [context.workspaceRoot] });
+    let zonePackage;
+    try {
+        zonePackage = require.resolve('zone.js/node', { paths: [context.workspaceRoot] });
+    }
+    catch { }
     const { baseOutputPath = '' } = serverResult;
     const worker = new piscina_1.default({
         filename: path.join(__dirname, 'render-worker.js'),

package/src/builders/prerender/render-worker.js

@@ -126,8 +126,10 @@ function isBootstrapFn(value) {
  * @returns A promise resolving to the render function of the worker.
  */
 async function initialize() {
-    // Setup Zone.js
-    await Promise.resolve(`${zonePackage}`).then(s => __importStar(require(s)));
+    if (zonePackage) {
+        // Setup Zone.js
+        await Promise.resolve(`${zonePackage}`).then(s => __importStar(require(s)));
+    }
     // Return the render function for use
     return render;
 }

package/src/builders/prerender/routes-extractor-worker.d.ts

@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.dev/license
  */
 export interface RoutesExtractorWorkerData {
-    zonePackage: string;
+    zonePackage: string | undefined;
     indexFile: string;
     outputPath: string;
     serverBundlePath: string;

package/src/builders/prerender/routes-extractor-worker.js

@@ -70,8 +70,10 @@ async function extract() {
  * @returns A promise resolving to the extract function of the worker.
  */
 async function initialize() {
-    // Setup Zone.js
-    await Promise.resolve(`${zonePackage}`).then(s => __importStar(require(s)));
+    if (zonePackage) {
+        // Setup Zone.js
+        await Promise.resolve(`${zonePackage}`).then(s => __importStar(require(s)));
+    }
     return extract;
 }
 /**

package/src/builders/server/index.js

@@ -206,22 +206,18 @@ async function checkTsConfigForPreserveWhitespacesSetting(context, tsConfigPath)
 function getPlatformServerExportsConfig(wco) {
     // Add `@angular/platform-server` exports.
     // This is needed so that DI tokens can be referenced and set at runtime outside of the bundle.
-    // Only add `@angular/platform-server` exports when it is installed.
-    // In some cases this builder is used when `@angular/platform-server` is not installed.
-    // Example: when using `@nguniversal/common/clover` which does not need `@angular/platform-server`.
-    return (0, helpers_1.isPackageInstalled)(wco.root, '@angular/platform-server')
-        ? {
-            module: {
-                rules: [
-                    {
-                        loader: require.resolve('./platform-server-exports-loader'),
-                        include: [path.resolve(wco.root, wco.buildOptions.main)],
-                        options: {
-                            angularSSRInstalled: (0, helpers_1.isPackageInstalled)(wco.root, '@angular/ssr'),
-                        },
+    return {
+        module: {
+            rules: [
+                {
+                    loader: require.resolve('./platform-server-exports-loader'),
+                    include: [path.resolve(wco.root, wco.buildOptions.main)],
+                    options: {
+                        angularSSRInstalled: (0, helpers_1.isPackageInstalled)(wco.root, '@angular/ssr'),
+                        isZoneJsInstalled: (0, helpers_1.isPackageInstalled)(wco.root, 'zone.js'),
                     },
-                ],
-            },
-        }
-        : {};
+                },
+            ],
+        },
+    };
 }

package/src/builders/server/platform-server-exports-loader.d.ts

@@ -12,4 +12,5 @@
  */
 export default function (this: import('webpack').LoaderContext<{
     angularSSRInstalled: boolean;
+    isZoneJsInstalled: boolean;
 }>, content: string, map: Parameters<import('webpack').LoaderDefinitionFunction>[1]): void;

package/src/builders/server/platform-server-exports-loader.js

@@ -14,7 +14,7 @@ exports.default = default_1;
  * @see https://github.com/webpack/webpack/issues/15936.
  */
 function default_1(content, map) {
-    const { angularSSRInstalled } = this.getOptions();
+    const { angularSSRInstalled, isZoneJsInstalled } = this.getOptions();
     let source = `${content}
 
   // EXPORTS added by @angular-devkit/build-angular
@@ -25,6 +25,10 @@ function default_1(content, map) {
       export { ɵgetRoutesFromAngularRouterConfig } from '@angular/ssr';
     `;
     }
+    if (isZoneJsInstalled) {
+        source = `import 'zone.js/node';
+    ${source}`;
+    }
     this.callback(null, source, map);
     return;
 }

package/src/builders/web-test-runner/jasmine_runner.js

@@ -6,6 +6,7 @@
  * found in the LICENSE file at https://angular.dev/license
  */
 
+import { NgModule } from '@angular/core';
 import { getTestBed } from '@angular/core/testing';
 import { BrowserTestingModule, platformBrowserTesting } from '@angular/platform-browser/testing';
 import {
@@ -63,8 +64,13 @@ export async function runJasmineTests(jasmineEnv) {
   // eslint-disable-next-line no-undef
   jasmine.DEFAULT_TIMEOUT_INTERVAL = config.defaultTimeoutInterval;
 
+  @NgModule({
+    providers: [typeof window.Zone !== 'undefined' ? provideZoneChangeDetection() : []],
+  })
+  class TestModule {}
+
   // Initialize `TestBed` automatically for users. This assumes we already evaluated `zone.js/testing`.
-  getTestBed().initTestEnvironment(BrowserTestingModule, platformBrowserTesting(), {
+  getTestBed().initTestEnvironment([BrowserTestingModule, TestModule], platformBrowserTesting(), {
     errorOnUnknownElements: true,
     errorOnUnknownProperties: true,
   });

package/src/tools/babel/presets/application.d.ts

@@ -37,7 +37,7 @@ export interface ApplicationPresetOptions {
         inputSourceMap: unknown;
     };
     optimize?: {
-        pureTopLevel: boolean;
+        topLevelSafeMode: boolean;
         wrapDecorators: boolean;
     };
     supportedBrowsers?: string[];

package/src/tools/babel/presets/application.js

@@ -124,13 +124,7 @@ function default_1(api, options) {
     }
     if (options.optimize) {
         const { adjustStaticMembers, adjustTypeScriptEnums, elideAngularMetadata, markTopLevelPure, } = require('@angular/build/private');
-        if (options.optimize.pureTopLevel) {
-            plugins.push(markTopLevelPure);
-        }
-        plugins.push(elideAngularMetadata, adjustTypeScriptEnums, [
-            adjustStaticMembers,
-            { wrapDecorators: options.optimize.wrapDecorators },
-        ]);
+        plugins.push([markTopLevelPure, { topLevelSafeMode: options.optimize.topLevelSafeMode }], elideAngularMetadata, adjustTypeScriptEnums, [adjustStaticMembers, { wrapDecorators: options.optimize.wrapDecorators }]);
     }
     if (options.instrumentCode) {
         plugins.push(require('../plugins/add-code-coverage').default);

package/src/tools/babel/webpack-loader.js

@@ -99,7 +99,7 @@ exports.default = (0, babel_loader_1.custom)(() => {
                 customOptions.optimize = {
                     // Angular packages provide additional tested side effects guarantees and can use
                     // otherwise unsafe optimizations. (@angular/platform-server/init) however has side-effects.
-                    pureTopLevel: AngularPackage && sideEffectFree,
+                    topLevelSafeMode: !(AngularPackage && sideEffectFree),
                     // JavaScript modules that are marked as side effect free are considered to have
                     // no decorators that contain non-local effects.
                     wrapDecorators: sideEffectFree,

package/src/tools/webpack/configs/styles.js

@@ -91,7 +91,8 @@ async function getStylesConfig(wco) {
     if (postcssConfig) {
         const postCssPluginRequire = (0, node_module_1.createRequire)(path.dirname(postcssConfig.configPath) + '/');
         for (const [pluginName, pluginOptions] of postcssConfig.config.plugins) {
-            const plugin = postCssPluginRequire(pluginName);
+            const pluginMod = postCssPluginRequire(pluginName);
+            const plugin = pluginMod.__esModule ? pluginMod['default'] : pluginMod;
             if (typeof plugin !== 'function' || plugin.postcss !== true) {
                 throw new Error(`Attempted to load invalid Postcss plugin: "${pluginName}"`);
             }

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