@angular/build 20.0.4 → 20.1.0-next.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@angular/build",
-  "version": "20.0.4",
+  "version": "20.1.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.2000.4",
-    "@babel/core": "7.27.1",
-    "@babel/helper-annotate-as-pure": "7.27.1",
+    "@angular-devkit/architect": "0.2001.0-next.1",
+    "@babel/core": "7.27.4",
+    "@babel/helper-annotate-as-pure": "7.27.3",
     "@babel/helper-split-export-declaration": "7.24.7",
-    "@inquirer/confirm": "5.1.10",
+    "@inquirer/confirm": "5.1.12",
     "@vitejs/plugin-basic-ssl": "2.0.0",
     "beasties": "0.3.4",
     "browserslist": "^4.23.0",
@@ -40,30 +40,30 @@
     "mrmime": "2.0.1",
     "parse5-html-rewriting-stream": "7.1.0",
     "picomatch": "4.0.2",
-    "piscina": "5.1.1",
-    "rollup": "4.40.2",
-    "sass": "1.88.0",
+    "piscina": "5.0.0",
+    "rollup": "4.43.0",
+    "sass": "1.89.2",
     "semver": "7.7.2",
     "source-map-support": "0.5.21",
-    "tinyglobby": "0.2.13",
+    "tinyglobby": "0.2.14",
     "vite": "6.3.5",
-    "watchpack": "2.4.2"
+    "watchpack": "2.4.4"
   },
   "optionalDependencies": {
-    "lmdb": "3.3.0"
+    "lmdb": "3.4.0"
   },
   "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.0.4",
+    "@angular/core": "^20.0.0 || ^20.1.0-next.0",
+    "@angular/compiler": "^20.0.0 || ^20.1.0-next.0",
+    "@angular/compiler-cli": "^20.0.0 || ^20.1.0-next.0",
+    "@angular/localize": "^20.0.0 || ^20.1.0-next.0",
+    "@angular/platform-browser": "^20.0.0 || ^20.1.0-next.0",
+    "@angular/platform-server": "^20.0.0 || ^20.1.0-next.0",
+    "@angular/service-worker": "^20.0.0 || ^20.1.0-next.0",
+    "@angular/ssr": "^20.1.0-next.1",
     "karma": "^6.4.0",
     "less": "^4.2.0",
-    "ng-packagr": "^20.0.0",
+    "ng-packagr": "^20.0.0 || ^20.1.0-next.0",
     "postcss": "^8.4.0",
     "tailwindcss": "^2.0.0 || ^3.0.0 || ^4.0.0",
     "tslib": "^2.3.0",

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

@@ -186,7 +186,7 @@ export declare function normalizeOptions(context: BuilderContext, projectName: s
     budgets: import("./schema").Budget[] | undefined;
     publicPath: string | undefined;
     plugins: Plugin[] | undefined;
-    loaderExtensions: Record<string, "file" | "binary" | "text"> | undefined;
+    loaderExtensions: Record<string, "file" | "base64" | "binary" | "text" | "dataurl"> | undefined;
     jsonLogs: boolean;
     colors: boolean;
     clearScreen: boolean | undefined;

package/src/builders/application/options.js

@@ -96,7 +96,12 @@ async function normalizeOptions(context, projectName, options, extensions) {
             if (extension[0] !== '.' || /\.[cm]?[jt]sx?$/.test(extension)) {
                 continue;
             }
-            if (value !== 'text' && value !== 'binary' && value !== 'file' && value !== 'empty') {
+            if (value !== 'text' &&
+                value !== 'binary' &&
+                value !== 'file' &&
+                value !== 'dataurl' &&
+                value !== 'base64' &&
+                value !== 'empty') {
                 continue;
             }
             loaderExtensions ??= {};

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

@@ -102,7 +102,9 @@ export type Schema = {
      * Defines the type of loader to use with a specified file extension when used with a
      * JavaScript `import`. `text` inlines the content as a string; `binary` inlines the content
      * as a Uint8Array; `file` emits the file and provides the runtime location of the file;
-     * `empty` considers the content to be empty and not include it in bundles.
+     * `dataurl` inlines the content as a data URL with best guess of MIME type; `base64`
+     * inlines the content as a Base64-encoded string; `empty` considers the content to be empty
+     * and not include it in bundles.
      */
     loader?: {
         [key: string]: any;

package/src/builders/application/schema.json

@@ -279,10 +279,10 @@
       ]
     },
     "loader": {
-      "description": "Defines the type of loader to use with a specified file extension when used with a JavaScript `import`. `text` inlines the content as a string; `binary` inlines the content as a Uint8Array; `file` emits the file and provides the runtime location of the file; `empty` considers the content to be empty and not include it in bundles.",
+      "description": "Defines the type of loader to use with a specified file extension when used with a JavaScript `import`. `text` inlines the content as a string; `binary` inlines the content as a Uint8Array; `file` emits the file and provides the runtime location of the file; `dataurl` inlines the content as a data URL with best guess of MIME type; `base64` inlines the content as a Base64-encoded string; `empty` considers the content to be empty and not include it in bundles.",
       "type": "object",
       "patternProperties": {
-        "^\\.\\S+$": { "enum": ["text", "binary", "file", "empty"] }
+        "^\\.\\S+$": { "enum": ["text", "binary", "file", "dataurl", "base64", "empty"] }
       }
     },
     "define": {

package/src/builders/karma/application_builder.js

@@ -112,7 +112,7 @@ class AngularAssetsMiddleware {
 class AngularPolyfillsPlugin {
     static $inject = ['config.files'];
     static NAME = 'angular-polyfills';
-    static createPlugin(polyfillsFile, jasmineCleanupFiles, scriptsFiles) {
+    static createPlugin(polyfillsFile, jasmineCleanupFiles) {
         return {
             // This has to be a "reporter" because reporters run _after_ frameworks
             // and karma-jasmine-html-reporter injects additional scripts that may
@@ -155,8 +155,6 @@ class AngularPolyfillsPlugin {
                             f.type = 'module';
                         }
                     }
-                    // Add "scripts" option files as classic scripts
-                    files.unshift(...scriptsFiles);
                     // Add browser sourcemap support as a classic script
                     files.unshift({
                         pattern: localResolve('source-map-support/browser-source-map-support.js'),
@@ -396,25 +394,16 @@ async function initializeApplication(options, context, karmaOptions, transforms
         watched: false,
     };
     karmaOptions.basePath = outputPath;
-    const scriptsFiles = [];
+    karmaOptions.files ??= [];
     if (options.scripts?.length) {
-        const outputScripts = new Set();
-        for (const scriptEntry of options.scripts) {
-            const outputName = typeof scriptEntry === 'string'
-                ? 'scripts.js'
-                : `${scriptEntry.bundleName ?? 'scripts'}.js`;
-            if (outputScripts.has(outputName)) {
-                continue;
-            }
-            outputScripts.add(outputName);
-            scriptsFiles.push({
-                pattern: `${outputPath}/${outputName}`,
-                watched: false,
-                type: 'js',
-            });
-        }
+        // This should be more granular to support named bundles.
+        // However, it replicates the behavior of the Karma Webpack-based builder.
+        karmaOptions.files.push({
+            pattern: `scripts.js`,
+            watched: false,
+            type: 'js',
+        });
     }
-    karmaOptions.files ??= [];
     karmaOptions.files.push(
     // Serve global setup script.
     { pattern: `${mainName}.js`, type: 'module', watched: false }, 
@@ -465,7 +454,7 @@ async function initializeApplication(options, context, karmaOptions, transforms
     parsedKarmaConfig.plugins.push(AngularAssetsMiddleware.createPlugin(buildOutput));
     parsedKarmaConfig.middleware ??= [];
     parsedKarmaConfig.middleware.push(AngularAssetsMiddleware.NAME);
-    parsedKarmaConfig.plugins.push(AngularPolyfillsPlugin.createPlugin(polyfillsFile, jasmineCleanupFiles, scriptsFiles));
+    parsedKarmaConfig.plugins.push(AngularPolyfillsPlugin.createPlugin(polyfillsFile, jasmineCleanupFiles));
     parsedKarmaConfig.reporters ??= [];
     parsedKarmaConfig.reporters.push(AngularPolyfillsPlugin.NAME);
     // Adjust karma junit reporter outDir location to maintain previous (devkit) behavior

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

@@ -65,7 +65,9 @@ export type Schema = {
      * Defines the type of loader to use with a specified file extension when used with a
      * JavaScript `import`. `text` inlines the content as a string; `binary` inlines the content
      * as a Uint8Array; `file` emits the file and provides the runtime location of the file;
-     * `empty` considers the content to be empty and not include it in bundles.
+     * `dataurl` inlines the content as a data URL with best guess of MIME type; `base64`
+     * inlines the content as a Base64-encoded string; `empty` considers the content to be empty
+     * and not include it in bundles.
      */
     loader?: {
         [key: string]: any;

package/src/builders/karma/schema.json

@@ -163,10 +163,10 @@
       "default": []
     },
     "loader": {
-      "description": "Defines the type of loader to use with a specified file extension when used with a JavaScript `import`. `text` inlines the content as a string; `binary` inlines the content as a Uint8Array; `file` emits the file and provides the runtime location of the file; `empty` considers the content to be empty and not include it in bundles.",
+      "description": "Defines the type of loader to use with a specified file extension when used with a JavaScript `import`. `text` inlines the content as a string; `binary` inlines the content as a Uint8Array; `file` emits the file and provides the runtime location of the file; `dataurl` inlines the content as a data URL with best guess of MIME type; `base64` inlines the content as a Base64-encoded string; `empty` considers the content to be empty and not include it in bundles.",
       "type": "object",
       "patternProperties": {
-        "^\\.\\S+$": { "enum": ["text", "binary", "file", "empty"] }
+        "^\\.\\S+$": { "enum": ["text", "binary", "file", "dataurl", "base64", "empty"] }
       }
     },
     "define": {

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

@@ -75,7 +75,7 @@ async function* execute(options, context, extensions = {}) {
     if (buildTargetOptions.polyfills?.includes('zone.js')) {
         buildTargetOptions.polyfills.push('zone.js/testing');
     }
-    const outputPath = node_path_1.default.join(context.workspaceRoot, 'dist/test-out', (0, node_crypto_1.randomUUID)());
+    const outputPath = node_path_1.default.join(context.workspaceRoot, generateOutputPath());
     const buildOptions = {
         ...buildTargetOptions,
         watch: normalizedOptions.watch,
@@ -170,35 +170,61 @@ async function* execute(options, context, extensions = {}) {
             instance ??= await startVitest('test', undefined /* cliFilters */, {
                 // Disable configuration file resolution/loading
                 config: false,
-            }, {
-                test: {
-                    root: outputPath,
-                    globals: true,
-                    setupFiles,
-                    // 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,
-                        excludeAfterRemap: true,
-                    },
-                    ...debugOptions,
+                root: workspaceRoot,
+                project: ['base', projectName],
+                name: 'base',
+                include: [],
+                reporters: normalizedOptions.reporters ?? ['default'],
+                watch: normalizedOptions.watch,
+                coverage: {
+                    enabled: !!normalizedOptions.codeCoverage,
+                    excludeAfterRemap: true,
+                    exclude: normalizedOptions.codeCoverage?.exclude,
+                    // Special handling for `reporter` due to an undefined value causing upstream failures
+                    ...(normalizedOptions.codeCoverage?.reporters
+                        ? { reporters: normalizedOptions.codeCoverage.reporters }
+                        : {}),
                 },
+                ...debugOptions,
+            }, {
                 plugins: [
                     {
-                        name: 'angular-coverage-exclude',
-                        configureVitest(context) {
-                            // Adjust coverage excludes to not include the otherwise automatically inserted included unit tests.
-                            // Vite does this as a convenience but is problematic for the bundling strategy employed by the
-                            // builder's test setup. To workaround this, the excludes are adjusted here to only automatically
-                            // exclude the TypeScript source test files.
-                            context.project.config.coverage.exclude = [
-                                ...(normalizedOptions.codeCoverageExclude ?? []),
-                                '**/*.{test,spec}.?(c|m)ts',
-                            ];
+                        name: 'angular:project-init',
+                        async configureVitest(context) {
+                            // Create a subproject that can be configured with plugins for browser mode.
+                            // Plugins defined directly in the vite overrides will not be present in the
+                            // browser specific Vite instance.
+                            await context.injectTestProjects({
+                                test: {
+                                    name: projectName,
+                                    root: outputPath,
+                                    globals: true,
+                                    setupFiles,
+                                    // Use `jsdom` if no browsers are explicitly configured.
+                                    // `node` is effectively no "environment" and the default.
+                                    environment: browser ? 'node' : 'jsdom',
+                                    browser,
+                                },
+                                plugins: [
+                                    {
+                                        name: 'angular:html-index',
+                                        transformIndexHtml() {
+                                            // Add all global stylesheets
+                                            return (Object.entries(result.files)
+                                                // TODO: Expand this to all configured global stylesheets
+                                                .filter(([file]) => file === 'styles.css')
+                                                .map(([styleUrl]) => ({
+                                                tag: 'link',
+                                                attrs: {
+                                                    'href': styleUrl,
+                                                    'rel': 'stylesheet',
+                                                },
+                                                injectTo: 'head',
+                                            })));
+                                        },
+                                    },
+                                ],
+                            });
                         },
                     },
                 ],
@@ -264,3 +290,8 @@ function setupBrowserConfiguration(browsers, debug, projectSourceRoot) {
     };
     return { browser };
 }
+function generateOutputPath() {
+    const datePrefix = new Date().toISOString().replaceAll(/[-:.]/g, '');
+    const uuidSuffix = (0, node_crypto_1.randomUUID)().slice(0, 8);
+    return node_path_1.default.join('dist', 'test-out', `${datePrefix}-${uuidSuffix}`);
+}

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

@@ -65,8 +65,8 @@ async function useKarmaBuilder(context, unitTestOptions) {
         poll: buildTargetOptions.poll,
         preserveSymlinks: buildTargetOptions.preserveSymlinks,
         browsers: unitTestOptions.browsers?.join(','),
-        codeCoverage: unitTestOptions.codeCoverage,
-        codeCoverageExclude: unitTestOptions.codeCoverageExclude,
+        codeCoverage: !!unitTestOptions.codeCoverage,
+        codeCoverageExclude: unitTestOptions.codeCoverage?.exclude,
         fileReplacements: buildTargetOptions.fileReplacements,
         reporters: unitTestOptions.reporters,
         webWorkerTsConfig: buildTargetOptions.webWorkerTsConfig,

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

@@ -17,8 +17,10 @@ export declare function normalizeOptions(context: BuilderContext, projectName: s
     include: string[];
     exclude: string[];
     runnerName: import("./schema").Runner;
-    codeCoverage: boolean | undefined;
-    codeCoverageExclude: string[] | undefined;
+    codeCoverage: {
+        exclude: string[] | undefined;
+        reporters: [string, Record<string, unknown>][] | undefined;
+    } | undefined;
     tsConfig: string;
     reporters: string[] | undefined;
     browsers: string[] | undefined;

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

@@ -27,7 +27,7 @@ async function normalizeOptions(context, projectName, options) {
     // 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, browsers } = options;
+    const { tsConfig, runner, reporters, browsers } = options;
     return {
         // Project/workspace information
         workspaceRoot,
@@ -39,8 +39,14 @@ async function normalizeOptions(context, projectName, options) {
         include: options.include ?? ['**/*.spec.ts'],
         exclude: options.exclude ?? [],
         runnerName: runner,
-        codeCoverage,
-        codeCoverageExclude,
+        codeCoverage: options.codeCoverage
+            ? {
+                exclude: options.codeCoverageExclude,
+                reporters: options.codeCoverageReporters?.map((entry) => typeof entry === 'string'
+                    ? [entry, {}]
+                    : entry),
+            }
+            : undefined,
         tsConfig,
         reporters,
         browsers,

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

@@ -21,6 +21,10 @@ export type Schema = {
      * Globs to exclude from code coverage.
      */
     codeCoverageExclude?: string[];
+    /**
+     * Reporters to use for code coverage results.
+     */
+    codeCoverageReporters?: SchemaCodeCoverageReporter[];
     /**
      * Initialize the test runner to support using the Node Inspector for test debugging.
      */
@@ -60,6 +64,18 @@ export type Schema = {
      */
     watch?: boolean;
 };
+export type SchemaCodeCoverageReporter = CodeCoverageReporterCodeCoverageReporter[] | CoverageReporters;
+export type CodeCoverageReporterCodeCoverageReporter = CoverageReporters | {
+    [key: string]: any;
+};
+export declare enum CoverageReporters {
+    Cobertura = "cobertura",
+    Html = "html",
+    Lcov = "lcov",
+    Lcovonly = "lcovonly",
+    Text = "text",
+    TextSummary = "text-summary"
+}
 /**
  * The name of the test runner to use for test execution.
  */

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

@@ -2,7 +2,16 @@
 // THIS FILE IS AUTOMATICALLY GENERATED. TO UPDATE THIS FILE YOU NEED TO CHANGE THE
 // CORRESPONDING JSON SCHEMA FILE, THEN RUN devkit-admin build (or bazel build ...).
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Runner = void 0;
+exports.Runner = exports.CoverageReporters = void 0;
+var CoverageReporters;
+(function (CoverageReporters) {
+    CoverageReporters["Cobertura"] = "cobertura";
+    CoverageReporters["Html"] = "html";
+    CoverageReporters["Lcov"] = "lcov";
+    CoverageReporters["Lcovonly"] = "lcovonly";
+    CoverageReporters["Text"] = "text";
+    CoverageReporters["TextSummary"] = "text-summary";
+})(CoverageReporters || (exports.CoverageReporters = CoverageReporters = {}));
 /**
  * The name of the test runner to use for test execution.
  */

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

@@ -64,6 +64,23 @@
       },
       "default": []
     },
+    "codeCoverageReporters": {
+      "type": "array",
+      "description": "Reporters to use for code coverage results.",
+      "items": {
+        "oneOf": [
+          {
+            "$ref": "#/definitions/coverage-reporters"
+          },
+          {
+            "type": "array",
+            "minItems": 1,
+            "maxItems": 2,
+            "items": [{ "$ref": "#/definitions/coverage-reporters" }, { "type": "object" }]
+          }
+        ]
+      }
+    },
     "reporters": {
       "type": "array",
       "description": "Test runner reporters to use. Directly passed to the test runner.",
@@ -78,5 +95,10 @@
     }
   },
   "additionalProperties": false,
-  "required": ["buildTarget", "tsConfig", "runner"]
+  "required": ["buildTarget", "tsConfig", "runner"],
+  "definitions": {
+    "coverage-reporters": {
+      "enum": ["html", "lcov", "lcovonly", "text", "text-summary", "cobertura"]
+    }
+  }
 }

package/src/tools/esbuild/loader-import-attribute-plugin.js

@@ -9,7 +9,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.createLoaderImportAttributePlugin = createLoaderImportAttributePlugin;
 const promises_1 = require("node:fs/promises");
-const SUPPORTED_LOADERS = ['binary', 'file', 'text'];
+const SUPPORTED_LOADERS = ['base64', 'binary', 'dataurl', 'file', 'text'];
 function createLoaderImportAttributePlugin() {
     return {
         name: 'angular-loader-import-attributes',

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

package/src/utils/server-rendering/manifest.js

@@ -161,12 +161,22 @@ function generateLazyLoadedFilesMappings(metafile, initialFiles, publicPath = ''
         if (!entryPoint || exports?.length < 1 || !fileName.endsWith('.js')) {
             continue;
         }
-        const importedPaths = [`${publicPath}${fileName}`];
+        const importedPaths = [
+            {
+                path: `${publicPath}${fileName}`,
+                dynamicImport: false,
+            },
+        ];
         for (const { kind, external, path } of imports) {
-            if (external || initialFiles.has(path) || kind !== 'import-statement') {
+            if (external ||
+                initialFiles.has(path) ||
+                (kind !== 'dynamic-import' && kind !== 'import-statement')) {
                 continue;
             }
-            importedPaths.push(`${publicPath}${path}`);
+            importedPaths.push({
+                path: `${publicPath}${path}`,
+                dynamicImport: kind === 'dynamic-import',
+            });
         }
         entryPointToBundles[entryPoint] = importedPaths;
     }

package/src/utils/version.js

@@ -28,7 +28,7 @@ function assertCompatibleAngularVersion(projectRoot) {
             'This likely indicates a corrupted local installation. Please try reinstalling your packages.');
         process.exit(2);
     }
-    const supportedAngularSemver = '^20.0.0';
+    const supportedAngularSemver = '^20.0.0 || ^20.1.0-next.0';
     if (angularPkgJson['version'] === '0.0.0' || supportedAngularSemver.startsWith('0.0.0')) {
         // Internal CLI and FW testing version.
         return;

package/src/utils/worker-pool.js

@@ -14,7 +14,7 @@ class WorkerPool extends piscina_1.Piscina {
     constructor(options) {
         const piscinaOptions = {
             minThreads: 1,
-            idleTimeout: 4_000,
+            idleTimeout: 1000,
             // Web containers do not support transferable objects with receiveOnMessagePort which
             // is used when the Atomics based wait loop is enable.
             atomics: process.versions.webcontainer ? 'disabled' : 'sync',