@angular-devkit/build-angular 19.0.0-next.0 → 19.0.0-next.10

package/LICENSE

@@ -1,6 +1,6 @@
 The MIT License
 
-Copyright (c) 2017 Google, Inc.
+Copyright (c) 2010-2024 Google LLC. https://angular.dev/license
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
@@ -9,13 +9,13 @@ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 copies of the Software, and to permit persons to whom the Software is
 furnished to do so, subject to the following conditions:
 
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
 
 THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

package/package.json

@@ -1,38 +1,38 @@
 {
   "name": "@angular-devkit/build-angular",
-  "version": "19.0.0-next.0",
+  "version": "19.0.0-next.10",
   "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.1900.0-next.0",
-    "@angular-devkit/build-webpack": "0.1900.0-next.0",
-    "@angular-devkit/core": "19.0.0-next.0",
-    "@angular/build": "19.0.0-next.0",
-    "@babel/core": "7.25.2",
-    "@babel/generator": "7.25.0",
-    "@babel/helper-annotate-as-pure": "7.24.7",
+    "@angular-devkit/architect": "0.1900.0-next.10",
+    "@angular-devkit/build-webpack": "0.1900.0-next.10",
+    "@angular-devkit/core": "19.0.0-next.10",
+    "@angular/build": "19.0.0-next.10",
+    "@babel/core": "7.25.7",
+    "@babel/generator": "7.25.7",
+    "@babel/helper-annotate-as-pure": "7.25.7",
     "@babel/helper-split-export-declaration": "7.24.7",
-    "@babel/plugin-transform-async-generator-functions": "7.25.0",
-    "@babel/plugin-transform-async-to-generator": "7.24.7",
-    "@babel/plugin-transform-runtime": "7.24.7",
-    "@babel/preset-env": "7.25.3",
-    "@babel/runtime": "7.25.0",
+    "@babel/plugin-transform-async-generator-functions": "7.25.7",
+    "@babel/plugin-transform-async-to-generator": "7.25.7",
+    "@babel/plugin-transform-runtime": "7.25.7",
+    "@babel/preset-env": "7.25.7",
+    "@babel/runtime": "7.25.7",
     "@discoveryjs/json-ext": "0.6.1",
-    "@ngtools/webpack": "19.0.0-next.0",
+    "@ngtools/webpack": "19.0.0-next.10",
     "@vitejs/plugin-basic-ssl": "1.1.0",
     "ansi-colors": "4.1.3",
     "autoprefixer": "10.4.20",
-    "babel-loader": "9.1.3",
+    "babel-loader": "9.2.1",
     "browserslist": "^4.21.5",
     "copy-webpack-plugin": "12.0.2",
     "critters": "0.0.24",
     "css-loader": "7.1.2",
-    "esbuild-wasm": "0.23.0",
+    "esbuild-wasm": "0.24.0",
     "fast-glob": "3.3.2",
-    "http-proxy-middleware": "3.0.0",
+    "http-proxy-middleware": "3.0.3",
     "https-proxy-agent": "7.0.5",
     "istanbul-lib-instrument": "6.0.3",
     "jsonc-parser": "3.3.1",
@@ -42,43 +42,43 @@
     "license-webpack-plugin": "4.0.2",
     "loader-utils": "3.3.1",
     "magic-string": "0.30.11",
-    "mini-css-extract-plugin": "2.9.0",
+    "mini-css-extract-plugin": "2.9.1",
     "mrmime": "2.0.0",
     "open": "10.1.0",
     "ora": "5.4.1",
     "parse5-html-rewriting-stream": "7.0.0",
     "picomatch": "4.0.2",
-    "piscina": "4.6.1",
-    "postcss": "8.4.41",
+    "piscina": "4.7.0",
+    "postcss": "8.4.47",
     "postcss-loader": "8.1.1",
     "resolve-url-loader": "5.0.0",
     "rxjs": "7.8.1",
-    "sass": "1.77.8",
-    "sass-loader": "16.0.0",
+    "sass": "1.79.4",
+    "sass-loader": "16.0.2",
     "semver": "7.6.3",
     "source-map-loader": "5.0.0",
     "source-map-support": "0.5.21",
-    "terser": "5.31.6",
+    "terser": "5.34.1",
     "tree-kill": "1.2.2",
-    "tslib": "2.6.3",
-    "vite": "5.4.0",
+    "tslib": "2.7.0",
+    "vite": "5.4.8",
     "watchpack": "2.4.2",
-    "webpack": "5.93.0",
-    "webpack-dev-middleware": "7.3.0",
-    "webpack-dev-server": "5.0.4",
+    "webpack": "5.95.0",
+    "webpack-dev-middleware": "7.4.2",
+    "webpack-dev-server": "5.1.0",
     "webpack-merge": "6.0.1",
     "webpack-subresource-integrity": "5.1.0"
   },
   "optionalDependencies": {
-    "esbuild": "0.23.0"
+    "esbuild": "0.24.0"
   },
   "peerDependencies": {
     "@angular/compiler-cli": "^19.0.0-next.0",
     "@angular/localize": "^19.0.0-next.0",
     "@angular/platform-server": "^19.0.0-next.0",
     "@angular/service-worker": "^19.0.0-next.0",
-    "@angular/ssr": "^19.0.0-next.0",
-    "@web/test-runner": "^0.18.0",
+    "@angular/ssr": "^19.0.0-next.10",
+    "@web/test-runner": "^0.19.0",
     "browser-sync": "^3.0.2",
     "jest": "^29.5.0",
     "jest-environment-jsdom": "^29.5.0",
@@ -86,7 +86,7 @@
     "ng-packagr": "^19.0.0-next.0",
     "protractor": "^7.0.0",
     "tailwindcss": "^2.0.0 || ^3.0.0",
-    "typescript": ">=5.4 <5.6"
+    "typescript": ">=5.5 <5.7"
   },
   "peerDependenciesMeta": {
     "@angular/localize": {
@@ -133,7 +133,7 @@
     "devkit",
     "sdk"
   ],
-  "packageManager": "yarn@4.4.0",
+  "packageManager": "yarn@4.5.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/angular/angular-cli.git"

package/src/builders/browser-esbuild/index.js

@@ -11,7 +11,6 @@ exports.buildEsbuildBrowser = buildEsbuildBrowser;
 exports.convertBrowserOptions = convertBrowserOptions;
 const build_1 = require("@angular/build");
 const architect_1 = require("@angular-devkit/architect");
-const builder_status_warnings_1 = require("./builder-status-warnings");
 /**
  * Main execution function for the esbuild-based application builder.
  * The options are compatible with the Webpack-based builder.
@@ -20,9 +19,19 @@ const builder_status_warnings_1 = require("./builder-status-warnings");
  * @returns An async iterable with the builder result output
  */
 async function* buildEsbuildBrowser(userOptions, context, infrastructureSettings, plugins) {
-    // Inform user of status of builder and options
-    (0, builder_status_warnings_1.logBuilderStatusWarnings)(userOptions, context);
+    // Warn about any unsupported options
+    if (userOptions['vendorChunk']) {
+        context.logger.warn(`The 'vendorChunk' option is not used by this builder and will be ignored.`);
+    }
+    if (userOptions['commonChunk'] === false) {
+        context.logger.warn(`The 'commonChunk' option is always enabled by this builder and will be ignored.`);
+    }
+    if (userOptions['webWorkerTsConfig']) {
+        context.logger.warn(`The 'webWorkerTsConfig' option is not yet supported by this builder.`);
+    }
+    // Convert browser builder options to application builder options
     const normalizedOptions = convertBrowserOptions(userOptions);
+    // Execute the application builder
     yield* (0, build_1.buildApplication)(normalizedOptions, context, { codePlugins: plugins });
 }
 function convertBrowserOptions(options) {

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

@@ -32,7 +32,7 @@ async function normalizeOptions(context, projectName, options) {
     const projectRoot = node_path_1.default.join(workspaceRoot, projectMetadata.root ?? '');
     const cacheOptions = (0, normalize_cache_1.normalizeCacheOptions)(projectMetadata, workspaceRoot);
     // Target specifier defaults to the current project's build target using a development configuration
-    const buildTargetSpecifier = options.buildTarget ?? options.browserTarget ?? `::development`;
+    const buildTargetSpecifier = options.buildTarget ?? `::development`;
     const buildTarget = (0, architect_1.targetFromTargetString)(buildTargetSpecifier, projectName, 'build');
     // Get the application builder options.
     const browserBuilderName = await context.getBuilderNameForTarget(buildTarget);

package/src/builders/dev-server/schema.d.ts

@@ -7,19 +7,12 @@ export interface Schema {
      * using the 'application' or other esbuild-based builders.
      */
     allowedHosts?: string[];
-    /**
-     * A browser 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:
-     * `project:target:production,staging`.
-     * @deprecated Use 'buildTarget' instead.
-     */
-    browserTarget?: 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:
      * `project:target:production,staging`.
      */
-    buildTarget?: string;
+    buildTarget: string;
     /**
      * Don't verify connected clients are part of allowed hosts. This option has no effect when
      * using the 'application' or other esbuild-based builders.

package/src/builders/dev-server/schema.json

@@ -4,12 +4,6 @@
   "description": "Dev Server target options for Build Facade.",
   "type": "object",
   "properties": {
-    "browserTarget": {
-      "type": "string",
-      "description": "A browser 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: `project:target:production,staging`.",
-      "pattern": "^[^:\\s]+:[^:\\s]+(:[^\\s]+)?$",
-      "x-deprecated": "Use 'buildTarget' instead."
-    },
     "buildTarget": {
       "type": "string",
       "description": "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: `project:target:production,staging`.",
@@ -138,5 +132,5 @@
     }
   },
   "additionalProperties": false,
-  "anyOf": [{ "required": ["buildTarget"] }, { "required": ["browserTarget"] }]
+  "required": ["buildTarget"]
 }

package/src/builders/extract-i18n/application-extraction.js

@@ -12,6 +12,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.extractMessages = extractMessages;
 const private_1 = require("@angular/build/private");
+const node_fs_1 = require("node:fs");
 const node_path_1 = __importDefault(require("node:path"));
 const browser_esbuild_1 = require("../browser-esbuild");
 async function extractMessages(options, builderName, context, extractorConstructor) {
@@ -30,6 +31,7 @@ async function extractMessages(options, builderName, context, extractorConstruct
     buildOptions.budgets = undefined;
     buildOptions.index = false;
     buildOptions.serviceWorker = false;
+    buildOptions.server = undefined;
     buildOptions.ssr = false;
     buildOptions.appShell = false;
     buildOptions.prerender = false;
@@ -77,6 +79,9 @@ function setupLocalizeExtractor(extractorConstructor, files, context) {
             if (file?.origin === 'memory') {
                 content = textDecoder.decode(file.contents);
             }
+            else if (file?.origin === 'disk') {
+                content = (0, node_fs_1.readFileSync)(file.inputPath, 'utf-8');
+            }
             if (content === undefined) {
                 throw new Error('Unknown file requested: ' + requestedPath);
             }

package/src/builders/extract-i18n/options.js

@@ -31,7 +31,7 @@ async function normalizeOptions(context, projectName, options) {
     const projectMetadata = await context.getProjectMetadata(projectName);
     const projectRoot = node_path_1.default.join(workspaceRoot, projectMetadata.root ?? '');
     // Target specifier defaults to the current project's build target with no specified configuration
-    const buildTargetSpecifier = options.buildTarget ?? options.browserTarget ?? ':';
+    const buildTargetSpecifier = options.buildTarget ?? ':';
     const buildTarget = (0, architect_1.targetFromTargetString)(buildTargetSpecifier, projectName, 'build');
     const i18nOptions = (0, private_1.createI18nOptions)(projectMetadata);
     // Normalize xliff format extensions

package/src/builders/extract-i18n/schema.d.ts

@@ -2,13 +2,6 @@
  * Extract i18n target options for Build Facade.
  */
 export interface Schema {
-    /**
-     * A browser builder target to extract i18n messages in the format of
-     * `project:target[:configuration]`. You can also pass in more than one configuration name
-     * as a comma-separated list. Example: `project:target:production,staging`.
-     * @deprecated Use 'buildTarget' instead.
-     */
-    browserTarget?: string;
     /**
      * A builder target to extract i18n messages in the format of
      * `project:target[:configuration]`. You can also pass in more than one configuration name

package/src/builders/extract-i18n/schema.json

@@ -4,12 +4,6 @@
   "description": "Extract i18n target options for Build Facade.",
   "type": "object",
   "properties": {
-    "browserTarget": {
-      "type": "string",
-      "description": "A browser builder target to extract i18n messages in the format of `project:target[:configuration]`. You can also pass in more than one configuration name as a comma-separated list. Example: `project:target:production,staging`.",
-      "pattern": "^[^:\\s]+:[^:\\s]+(:[^\\s]+)?$",
-      "x-deprecated": "Use 'buildTarget' instead."
-    },
     "buildTarget": {
       "type": "string",
       "description": "A builder target to extract i18n messages in the format of `project:target[:configuration]`. You can also pass in more than one configuration name as a comma-separated list. Example: `project:target:production,staging`.",

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

@@ -0,0 +1,19 @@
+/**
+ * @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 { ResultFile } from '@angular/build/private';
+import { BuilderContext, BuilderOutput } from '@angular-devkit/architect';
+import type { ConfigOptions } from 'karma';
+import { Observable } from 'rxjs';
+import { Configuration } from 'webpack';
+import { ExecutionTransformer } from '../../transforms';
+import { Schema as KarmaBuilderOptions } from './schema';
+export declare function execute(options: KarmaBuilderOptions, context: BuilderContext, karmaOptions: ConfigOptions, transforms?: {
+    webpackConfiguration?: ExecutionTransformer<Configuration>;
+    karmaOptions?: (options: ConfigOptions) => ConfigOptions;
+}): Observable<BuilderOutput>;
+export declare function writeTestFiles(files: Record<string, ResultFile>, testDir: string): Promise<void>;

package/src/builders/karma/application_builder.js

@@ -0,0 +1,285 @@
+"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 (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.execute = execute;
+exports.writeTestFiles = writeTestFiles;
+const build_1 = require("@angular/build");
+const private_1 = require("@angular/build/private");
+const crypto_1 = require("crypto");
+const fast_glob_1 = __importDefault(require("fast-glob"));
+const fs = __importStar(require("fs/promises"));
+const path = __importStar(require("path"));
+const rxjs_1 = require("rxjs");
+const schema_1 = require("../browser-esbuild/schema");
+const find_tests_1 = require("./find-tests");
+class ApplicationBuildError extends Error {
+    constructor(message) {
+        super(message);
+        this.name = 'ApplicationBuildError';
+    }
+}
+function injectKarmaReporter(context, buildOptions, karmaConfig, subscriber) {
+    const reporterName = 'angular-progress-notifier';
+    class ProgressNotifierReporter {
+        emitter;
+        static $inject = ['emitter'];
+        constructor(emitter) {
+            this.emitter = emitter;
+            this.startWatchingBuild();
+        }
+        startWatchingBuild() {
+            void (async () => {
+                for await (const buildOutput of (0, private_1.buildApplicationInternal)({
+                    ...buildOptions,
+                    watch: true,
+                }, context)) {
+                    if (buildOutput.kind === private_1.ResultKind.Failure) {
+                        subscriber.next({ success: false, message: 'Build failed' });
+                    }
+                    else if (buildOutput.kind === private_1.ResultKind.Incremental ||
+                        buildOutput.kind === private_1.ResultKind.Full) {
+                        await writeTestFiles(buildOutput.files, buildOptions.outputPath);
+                        this.emitter.refreshFiles();
+                    }
+                }
+            })();
+        }
+        onRunComplete = function (_browsers, results) {
+            if (results.exitCode === 0) {
+                subscriber.next({ success: true });
+            }
+            else {
+                subscriber.next({ success: false });
+            }
+        };
+    }
+    karmaConfig.reporters ??= [];
+    karmaConfig.reporters.push(reporterName);
+    karmaConfig.plugins ??= [];
+    karmaConfig.plugins.push({
+        [`reporter:${reporterName}`]: [
+            'factory',
+            Object.assign((...args) => new ProgressNotifierReporter(...args), ProgressNotifierReporter),
+        ],
+    });
+}
+function execute(options, context, karmaOptions, transforms = {}) {
+    return (0, rxjs_1.from)(initializeApplication(options, context, karmaOptions, transforms)).pipe((0, rxjs_1.switchMap)(([karma, karmaConfig, buildOptions]) => new rxjs_1.Observable((subscriber) => {
+        if (options.watch) {
+            injectKarmaReporter(context, buildOptions, karmaConfig, subscriber);
+        }
+        // Complete the observable once the Karma server returns.
+        const karmaServer = new karma.Server(karmaConfig, (exitCode) => {
+            subscriber.next({ success: exitCode === 0 });
+            subscriber.complete();
+        });
+        const karmaStart = karmaServer.start();
+        // Cleanup, signal Karma to exit.
+        return () => {
+            void karmaStart.then(() => karmaServer.stop());
+        };
+    })), (0, rxjs_1.catchError)((err) => {
+        if (err instanceof ApplicationBuildError) {
+            return (0, rxjs_1.of)({ success: false, message: err.message });
+        }
+        throw err;
+    }), (0, rxjs_1.defaultIfEmpty)({ success: false }));
+}
+async function getProjectSourceRoot(context) {
+    // We have already validated that the project name is set before calling this function.
+    const projectName = context.target?.project;
+    if (!projectName) {
+        return context.workspaceRoot;
+    }
+    const projectMetadata = await context.getProjectMetadata(projectName);
+    const sourceRoot = (projectMetadata.sourceRoot ?? projectMetadata.root ?? '');
+    return path.join(context.workspaceRoot, sourceRoot);
+}
+function normalizePolyfills(polyfills) {
+    if (typeof polyfills === 'string') {
+        return [polyfills];
+    }
+    return polyfills ?? [];
+}
+async function collectEntrypoints(options, context, projectSourceRoot) {
+    // Glob for files to test.
+    const testFiles = await (0, find_tests_1.findTests)(options.include ?? [], options.exclude ?? [], context.workspaceRoot, projectSourceRoot);
+    return new Set(testFiles);
+}
+async function initializeApplication(options, context, karmaOptions, transforms = {}) {
+    if (transforms.webpackConfiguration) {
+        context.logger.warn(`This build is using the application builder but transforms.webpackConfiguration was provided. The transform will be ignored.`);
+    }
+    const outputPath = path.join(context.workspaceRoot, 'dist/test-out', (0, crypto_1.randomUUID)());
+    const projectSourceRoot = await getProjectSourceRoot(context);
+    const [karma, entryPoints] = await Promise.all([
+        Promise.resolve().then(() => __importStar(require('karma'))),
+        collectEntrypoints(options, context, projectSourceRoot),
+        fs.rm(outputPath, { recursive: true, force: true }),
+    ]);
+    let mainName = 'init_test_bed';
+    if (options.main) {
+        entryPoints.add(options.main);
+        mainName = path.basename(options.main, path.extname(options.main));
+    }
+    else {
+        entryPoints.add('@angular-devkit/build-angular/src/builders/karma/init_test_bed.js');
+    }
+    const instrumentForCoverage = options.codeCoverage
+        ? createInstrumentationFilter(projectSourceRoot, getInstrumentationExcludedPaths(context.workspaceRoot, options.codeCoverageExclude ?? []))
+        : undefined;
+    const buildOptions = {
+        entryPoints,
+        tsConfig: options.tsConfig,
+        outputPath,
+        aot: false,
+        index: false,
+        outputHashing: schema_1.OutputHashing.None,
+        optimization: false,
+        sourceMap: {
+            scripts: true,
+            styles: true,
+            vendor: true,
+        },
+        instrumentForCoverage,
+        styles: options.styles,
+        polyfills: normalizePolyfills(options.polyfills),
+        webWorkerTsConfig: options.webWorkerTsConfig,
+    };
+    // Build tests with `application` builder, using test files as entry points.
+    const buildOutput = await first((0, private_1.buildApplicationInternal)(buildOptions, context));
+    if (buildOutput.kind === private_1.ResultKind.Failure) {
+        throw new ApplicationBuildError('Build failed');
+    }
+    else if (buildOutput.kind !== private_1.ResultKind.Full) {
+        throw new ApplicationBuildError('A full build result is required from the application builder.');
+    }
+    // Write test files
+    await writeTestFiles(buildOutput.files, buildOptions.outputPath);
+    karmaOptions.files ??= [];
+    karmaOptions.files.push(
+    // Serve polyfills first.
+    { pattern: `${outputPath}/polyfills.js`, type: 'module' }, 
+    // Serve global setup script.
+    { pattern: `${outputPath}/${mainName}.js`, type: 'module' }, 
+    // Serve all source maps.
+    { pattern: `${outputPath}/*.map`, included: false });
+    if (hasChunkOrWorkerFiles(buildOutput.files)) {
+        karmaOptions.files.push(
+        // Allow loading of chunk-* files but don't include them all on load.
+        { pattern: `${outputPath}/{chunk,worker}-*.js`, type: 'module', included: false });
+    }
+    karmaOptions.files.push(
+    // Serve remaining JS on page load, these are the test entrypoints.
+    { pattern: `${outputPath}/*.js`, type: 'module' });
+    if (options.styles?.length) {
+        // Serve CSS outputs on page load, these are the global styles.
+        karmaOptions.files.push({ pattern: `${outputPath}/*.css`, type: 'css' });
+    }
+    const parsedKarmaConfig = await karma.config.parseConfig(options.karmaConfig && path.resolve(context.workspaceRoot, options.karmaConfig), transforms.karmaOptions ? transforms.karmaOptions(karmaOptions) : karmaOptions, { promiseConfig: true, throwErrors: true });
+    // Remove the webpack plugin/framework:
+    // Alternative would be to make the Karma plugin "smart" but that's a tall order
+    // with managing unneeded imports etc..
+    const pluginLengthBefore = (parsedKarmaConfig.plugins ?? []).length;
+    parsedKarmaConfig.plugins = (parsedKarmaConfig.plugins ?? []).filter((plugin) => {
+        if (typeof plugin === 'string') {
+            return plugin !== 'framework:@angular-devkit/build-angular';
+        }
+        return !plugin['framework:@angular-devkit/build-angular'];
+    });
+    parsedKarmaConfig.frameworks = parsedKarmaConfig.frameworks?.filter((framework) => framework !== '@angular-devkit/build-angular');
+    const pluginLengthAfter = (parsedKarmaConfig.plugins ?? []).length;
+    if (pluginLengthBefore !== pluginLengthAfter) {
+        context.logger.warn(`Ignoring framework "@angular-devkit/build-angular" from karma config file because it's not compatible with the application builder.`);
+    }
+    // When using code-coverage, auto-add karma-coverage.
+    // This was done as part of the karma plugin for webpack.
+    if (options.codeCoverage &&
+        !parsedKarmaConfig.reporters?.some((r) => r === 'coverage' || r === 'coverage-istanbul')) {
+        parsedKarmaConfig.reporters = (parsedKarmaConfig.reporters ?? []).concat(['coverage']);
+    }
+    return [karma, parsedKarmaConfig, buildOptions];
+}
+function hasChunkOrWorkerFiles(files) {
+    return Object.keys(files).some((filename) => {
+        return /(?:^|\/)(?:worker|chunk)[^/]+\.js$/.test(filename);
+    });
+}
+async function writeTestFiles(files, testDir) {
+    const directoryExists = new Set();
+    // Writes the test related output files to disk and ensures the containing directories are present
+    await (0, private_1.emitFilesToDisk)(Object.entries(files), async ([filePath, file]) => {
+        if (file.type !== build_1.BuildOutputFileType.Browser && file.type !== build_1.BuildOutputFileType.Media) {
+            return;
+        }
+        const fullFilePath = path.join(testDir, filePath);
+        // Ensure output subdirectories exist
+        const fileBasePath = path.dirname(fullFilePath);
+        if (fileBasePath && !directoryExists.has(fileBasePath)) {
+            await fs.mkdir(fileBasePath, { recursive: true });
+            directoryExists.add(fileBasePath);
+        }
+        if (file.origin === 'memory') {
+            // Write file contents
+            await fs.writeFile(fullFilePath, file.contents);
+        }
+        else {
+            // Copy file contents
+            await fs.copyFile(file.inputPath, fullFilePath, fs.constants.COPYFILE_FICLONE);
+        }
+    });
+}
+/** Returns the first item yielded by the given generator and cancels the execution. */
+async function first(generator) {
+    for await (const value of generator) {
+        return value;
+    }
+    throw new Error('Expected generator to emit at least once.');
+}
+function createInstrumentationFilter(includedBasePath, excludedPaths) {
+    return (request) => {
+        return (!excludedPaths.has(request) &&
+            !/\.(e2e|spec)\.tsx?$|[\\/]node_modules[\\/]/.test(request) &&
+            request.startsWith(includedBasePath));
+    };
+}
+function getInstrumentationExcludedPaths(root, excludedPaths) {
+    const excluded = new Set();
+    for (const excludeGlob of excludedPaths) {
+        const excludePath = excludeGlob[0] === '/' ? excludeGlob.slice(1) : excludeGlob;
+        fast_glob_1.default.sync(excludePath, { cwd: root }).forEach((p) => excluded.add(path.join(root, p)));
+    }
+    return excluded;
+}

package/src/builders/karma/browser_builder.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 { BuilderContext, BuilderOutput } from '@angular-devkit/architect';
+import type { ConfigOptions } from 'karma';
+import { Observable } from 'rxjs';
+import { Configuration } from 'webpack';
+import { ExecutionTransformer } from '../../transforms';
+import { Schema as KarmaBuilderOptions } from './schema';
+export type KarmaConfigOptions = ConfigOptions & {
+    buildWebpack?: unknown;
+    configFile?: string;
+};
+export declare function execute(options: KarmaBuilderOptions, context: BuilderContext, karmaOptions: KarmaConfigOptions, transforms?: {
+    webpackConfiguration?: ExecutionTransformer<Configuration>;
+    karmaOptions?: (options: KarmaConfigOptions) => KarmaConfigOptions;
+}): Observable<BuilderOutput>;