@angular-devkit/build-angular 17.1.0-next.1 → 17.1.0-next.3

package/src/builders/browser-esbuild/builder-status-warnings.js

@@ -30,9 +30,7 @@ function logBuilderStatusWarnings(options, { logger }) {
         if (typeof value === 'object' && Object.keys(value).length === 0) {
             continue;
         }
-        if (unsupportedOption === 'vendorChunk' ||
-            unsupportedOption === 'resourcesOutputPath' ||
-            unsupportedOption === 'deployUrl') {
+        if (unsupportedOption === 'vendorChunk' || unsupportedOption === 'resourcesOutputPath') {
             logger.warn(`The '${unsupportedOption}' option is not used by this builder and will be ignored.`);
             continue;
         }

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

@@ -31,13 +31,13 @@ async function* buildEsbuildBrowser(userOptions, context, infrastructureSettings
     (0, builder_status_warnings_1.logBuilderStatusWarnings)(userOptions, context);
     const normalizedOptions = normalizeOptions(userOptions);
     const { deleteOutputPath, outputPath } = normalizedOptions;
-    const fullOutputPath = node_path_1.default.join(context.workspaceRoot, outputPath);
+    const fullOutputPath = node_path_1.default.join(context.workspaceRoot, outputPath.base);
     if (deleteOutputPath && infrastructureSettings?.write !== false) {
-        await (0, utils_2.deleteOutputDir)(context.workspaceRoot, outputPath);
+        await (0, utils_2.deleteOutputDir)(context.workspaceRoot, outputPath.base);
     }
     for await (const result of (0, application_1.buildApplicationInternal)(normalizedOptions, context, {
         write: false,
-    }, plugins)) {
+    }, plugins && { codePlugins: plugins })) {
         if (infrastructureSettings?.write !== false && result.outputFiles) {
             // Write output files
             await writeResultFiles(result.outputFiles, result.assetFiles, fullOutputPath);
@@ -55,11 +55,15 @@ async function* buildEsbuildBrowser(userOptions, context, infrastructureSettings
 }
 exports.buildEsbuildBrowser = buildEsbuildBrowser;
 function normalizeOptions(options) {
-    const { main: browser, ngswConfigPath, serviceWorker, polyfills, ...otherOptions } = options;
+    const { main: browser, outputPath, ngswConfigPath, serviceWorker, polyfills, ...otherOptions } = options;
     return {
         browser,
         serviceWorker: serviceWorker ? ngswConfigPath : false,
         polyfills: typeof polyfills === 'string' ? [polyfills] : polyfills,
+        outputPath: {
+            base: outputPath,
+            browser: '',
+        },
         ...otherOptions,
     };
 }

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

@@ -65,6 +65,11 @@ function execute(options, context, transforms = {}, extensions) {
             if (transforms?.logging || transforms?.webpackConfiguration) {
                 throw new Error('The `application` and `browser-esbuild` builders do not support Webpack transforms.');
             }
+            if (normalizedOptions.forceEsbuild &&
+                builderName === '@angular-devkit/build-angular:browser') {
+                // The compatibility builder should be used if esbuild is force enabled with the official Webpack-based builder.
+                builderName = '@angular-devkit/build-angular:browser-esbuild';
+            }
             return (0, rxjs_1.defer)(() => Promise.resolve().then(() => __importStar(require('./vite-server')))).pipe((0, rxjs_1.switchMap)(({ serveWithVite }) => serveWithVite(normalizedOptions, builderName, context, transforms, extensions)));
         }
         if (extensions?.buildPlugins?.length) {

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

@@ -51,7 +51,6 @@ const supported_browsers_1 = require("../../utils/supported-browsers");
 const webpack_browser_config_1 = require("../../utils/webpack-browser-config");
 const application_1 = require("../application");
 const browser_esbuild_1 = require("../browser-esbuild");
-const load_proxy_config_1 = require("./load-proxy-config");
 // eslint-disable-next-line max-lines-per-function
 async function* serveWithVite(serverOptions, builderName, context, transformers, extensions) {
     // Get the browser configuration from the target name.
@@ -74,8 +73,11 @@ async function* serveWithVite(serverOptions, builderName, context, transformers,
     }
     // Set all packages as external to support Vite's prebundle caching
     browserOptions.externalPackages = serverOptions.cacheOptions.enabled;
-    if (serverOptions.servePath === undefined && browserOptions.baseHref !== undefined) {
-        serverOptions.servePath = browserOptions.baseHref;
+    const baseHref = browserOptions.baseHref;
+    if (serverOptions.servePath === undefined && baseHref !== undefined) {
+        // Remove trailing slash
+        serverOptions.servePath =
+            baseHref[baseHref.length - 1] === '/' ? baseHref.slice(0, -1) : baseHref;
     }
     // The development server currently only supports a single locale when localizing.
     // This matches the behavior of the Webpack-based development server but could be expanded in the future.
@@ -119,14 +121,10 @@ async function* serveWithVite(serverOptions, builderName, context, transformers,
         deferred?.();
     });
     const build = builderName === '@angular-devkit/build-angular:browser-esbuild'
-        ? browser_esbuild_1.buildEsbuildBrowser
-        : application_1.buildApplicationInternal;
+        ? browser_esbuild_1.buildEsbuildBrowser.bind(undefined, browserOptions, context, { write: false }, extensions?.buildPlugins)
+        : application_1.buildApplicationInternal.bind(undefined, browserOptions, context, { write: false }, { codePlugins: extensions?.buildPlugins });
     // TODO: Switch this to an architect schedule call when infrastructure settings are supported
-    for await (const result of build(
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    browserOptions, context, {
-        write: false,
-    }, extensions?.buildPlugins)) {
+    for await (const result of build()) {
         (0, node_assert_1.default)(result.outputFiles, 'Builder did not provide result files.');
         // If build failed, nothing to serve
         if (!result.success) {
@@ -179,7 +177,7 @@ async function* serveWithVite(serverOptions, builderName, context, transformers,
         if (server) {
             // Update fs allow list to include any new assets from the build option.
             server.config.server.fs.allow = [
-                ...new Set(...server.config.server.fs.allow, ...assetFiles.values()),
+                ...new Set([...server.config.server.fs.allow, ...assetFiles.values()]),
             ];
             handleUpdate(normalizePath, generatedFiles, server, serverOptions, context.logger);
         }
@@ -328,7 +326,7 @@ function analyzeResultFiles(normalizePath, htmlIndexPath, resultFiles, generated
 }
 // eslint-disable-next-line max-lines-per-function
 async function setupServer(serverOptions, outputFiles, assets, preserveSymlinks, externalMetadata, ssr, prebundleTransformer, target, prebundleLoaderExtensions, extensionMiddleware, indexHtmlTransformer, thirdPartySourcemaps = false) {
-    const proxy = await (0, load_proxy_config_1.loadProxyConfiguration)(serverOptions.workspaceRoot, serverOptions.proxyConfig, true);
+    const proxy = await (0, utils_2.loadProxyConfiguration)(serverOptions.workspaceRoot, serverOptions.proxyConfig, true);
     // dynamically import Vite for ESM compatibility
     const { normalizePath } = await (0, load_esm_1.loadEsmModule)('vite');
     // Path will not exist on disk and only used to provide separate path for Vite requests
@@ -350,7 +348,7 @@ async function setupServer(serverOptions, outputFiles, assets, preserveSymlinks,
         css: {
             devSourcemap: true,
         },
-        // Vite will normalize the `base` option by adding a leading and trailing forward slash.
+        // Vite will normalize the `base` option by adding a leading slash.
         base: serverOptions.servePath,
         resolve: {
             mainFields: ['es2020', 'browser', 'module', 'main'],
@@ -476,6 +474,10 @@ async function setupServer(serverOptions, outputFiles, assets, preserveSymlinks,
                         // Rewrite all build assets to a vite raw fs URL
                         const assetSourcePath = assets.get(pathname);
                         if (assetSourcePath !== undefined) {
+                            // Workaround to disable Vite transformer middleware.
+                            // See: https://github.com/vitejs/vite/blob/746a1daab0395f98f0afbdee8f364cb6cf2f3b3f/packages/vite/src/node/server/middlewares/transform.ts#L201 and
+                            // https://github.com/vitejs/vite/blob/746a1daab0395f98f0afbdee8f364cb6cf2f3b3f/packages/vite/src/node/server/transformRequest.ts#L204-L206
+                            req.headers.accept = 'text/html';
                             // The encoding needs to match what happens in the vite static middleware.
                             // ref: https://github.com/vitejs/vite/blob/d4f13bd81468961c8c926438e815ab6b1c82735e/packages/vite/src/node/server/middlewares/static.ts#L163
                             req.url = `${server.config.base}@fs/${encodeURI(assetSourcePath)}`;
@@ -525,11 +527,9 @@ async function setupServer(serverOptions, outputFiles, assets, preserveSymlinks,
                                 return;
                             }
                             transformIndexHtmlAndAddHeaders(url, rawHtml, res, next, async (html) => {
-                                const protocol = serverOptions.ssl ? 'https' : 'http';
-                                const route = `${protocol}://${req.headers.host}${req.originalUrl}`;
                                 const { content } = await (0, render_page_1.renderPage)({
                                     document: html,
-                                    route,
+                                    route: new URL(req.originalUrl ?? '/', server.resolvedUrls?.local[0]).toString(),
                                     serverContext: 'ssr',
                                     loadBundle: (uri) => 
                                     // eslint-disable-next-line @typescript-eslint/no-explicit-any

package/src/builders/karma/index.js

@@ -90,9 +90,12 @@ function execute(options, context, transforms = {}) {
             : getBuiltInKarmaConfig(context.workspaceRoot, projectName);
         karmaOptions.singleRun = singleRun;
         // Convert browsers from a string to an array
-        if (options.browsers) {
+        if (typeof options.browsers === 'string' && options.browsers) {
             karmaOptions.browsers = options.browsers.split(',');
         }
+        else if (options.browsers === false) {
+            karmaOptions.browsers = [];
+        }
         if (options.reporters) {
             // Split along commas to make it more natural, and remove empty strings.
             const reporters = options.reporters

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

@@ -7,9 +7,9 @@ export interface Schema {
      */
     assets?: AssetPattern[];
     /**
-     * Override which browsers tests are run against.
+     * Override which browsers tests are run against. Set to `false` to not use any browser.
      */
-    browsers?: string;
+    browsers?: Browsers;
     /**
      * Output a code coverage report.
      */
@@ -117,6 +117,10 @@ export interface AssetPatternClass {
      */
     output: string;
 }
+/**
+ * Override which browsers tests are run against. Set to `false` to not use any browser.
+ */
+export type Browsers = boolean | string;
 export interface FileReplacement {
     replace?: string;
     replaceWith?: string;

package/src/builders/karma/schema.json

@@ -199,8 +199,18 @@
       "description": "Do not use the real path when resolving modules. If unset then will default to `true` if NodeJS option --preserve-symlinks is set."
     },
     "browsers": {
-      "type": "string",
-      "description": "Override which browsers tests are run against."
+      "description": "Override which browsers tests are run against. Set to `false` to not use any browser.",
+      "oneOf": [
+        {
+          "type": "string",
+          "description": "A comma seperate list of browsers to run tests against."
+        },
+        {
+          "const": false,
+          "type": "boolean",
+          "description": "Does use run tests against a browser."
+        }
+      ]
     },
     "codeCoverage": {
       "type": "boolean",

package/src/builders/ssr-dev-server/index.js

@@ -36,8 +36,8 @@ const core_1 = require("@angular-devkit/core");
 const path_1 = require("path");
 const rxjs_1 = require("rxjs");
 const url = __importStar(require("url"));
-const error_1 = require("../../utils/error");
-const utils_1 = require("./utils");
+const utils_1 = require("../../utils");
+const utils_2 = require("./utils");
 /** Log messages to ignore and not rely to the logger */
 const IGNORED_STDOUT_MESSAGES = [
     'server listening on',
@@ -78,7 +78,7 @@ function execute(options, context) {
   DON'T USE IT FOR PRODUCTION!
   ****************************************************************************************
  `);
-    return (0, rxjs_1.zip)(browserTargetRun, serverTargetRun, (0, utils_1.getAvailablePort)()).pipe((0, rxjs_1.switchMap)(([br, sr, nodeServerPort]) => {
+    return (0, rxjs_1.zip)(browserTargetRun, serverTargetRun, (0, utils_2.getAvailablePort)()).pipe((0, rxjs_1.switchMap)(([br, sr, nodeServerPort]) => {
         return (0, rxjs_1.combineLatest)([br.output, sr.output]).pipe(
         // This is needed so that if both server and browser emit close to each other
         // we only emit once. This typically happens on the first build.
@@ -101,7 +101,7 @@ function execute(options, context) {
                 context.logger.info('\nCompiled successfully.');
             }
         }), (0, rxjs_1.debounce)(([builderOutput]) => builderOutput.success && !options.inspect
-            ? (0, utils_1.waitUntilServerIsListening)(nodeServerPort)
+            ? (0, utils_2.waitUntilServerIsListening)(nodeServerPort)
             : rxjs_1.EMPTY), (0, rxjs_1.finalize)(() => {
             void br.stop();
             void sr.stop();
@@ -162,7 +162,7 @@ function startNodeServer(serverOutput, port, logger, inspectMode = false) {
         args.unshift('--inspect-brk');
     }
     return (0, rxjs_1.of)(null).pipe((0, rxjs_1.delay)(0), // Avoid EADDRINUSE error since it will cause the kill event to be finish.
-    (0, rxjs_1.switchMap)(() => (0, utils_1.spawnAsObservable)('node', args, { env, shell: true })), (0, rxjs_1.tap)((res) => log({ stderr: res.stderr, stdout: res.stdout }, logger)), (0, rxjs_1.ignoreElements)(), 
+    (0, rxjs_1.switchMap)(() => (0, utils_2.spawnAsObservable)('node', args, { env, shell: true })), (0, rxjs_1.tap)((res) => log({ stderr: res.stderr, stdout: res.stdout }, logger)), (0, rxjs_1.ignoreElements)(), 
     // Emit a signal after the process has been started
     (0, rxjs_1.startWith)(undefined));
 }
@@ -171,7 +171,7 @@ async function initBrowserSync(browserSyncInstance, nodeServerPort, options, con
         return browserSyncInstance;
     }
     const { port: browserSyncPort, open, host, publicHost, proxyConfig } = options;
-    const bsPort = browserSyncPort || (await (0, utils_1.getAvailablePort)());
+    const bsPort = browserSyncPort || (await (0, utils_2.getAvailablePort)());
     const bsOptions = {
         proxy: {
             target: `localhost:${nodeServerPort}`,
@@ -283,33 +283,19 @@ function getSslConfig(root, options) {
     return ssl;
 }
 async function getProxyConfig(root, proxyConfig) {
-    const proxyPath = (0, path_1.resolve)(root, proxyConfig);
-    let proxySettings;
-    try {
-        proxySettings = require(proxyPath);
-    }
-    catch (error) {
-        (0, error_1.assertIsError)(error);
-        if (error.code === 'MODULE_NOT_FOUND') {
-            throw new Error(`Proxy config file ${proxyPath} does not exist.`);
-        }
-        throw error;
-    }
-    const proxies = Array.isArray(proxySettings) ? proxySettings : [proxySettings];
+    const proxy = await (0, utils_1.loadProxyConfiguration)(root, proxyConfig, false);
     const createdProxies = [];
     const { createProxyMiddleware } = await Promise.resolve().then(() => __importStar(require('http-proxy-middleware')));
-    for (const proxy of proxies) {
-        for (const [key, context] of Object.entries(proxy)) {
-            if (typeof key === 'string') {
-                createdProxies.push(createProxyMiddleware(key.replace(/^\*$/, '**').replace(/\/\*$/, ''), 
-                // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                context));
-            }
-            else {
-                createdProxies.push(
-                // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                createProxyMiddleware(key, context));
-            }
+    for (const [key, context] of Object.entries(proxy)) {
+        if (typeof key === 'string') {
+            createdProxies.push(createProxyMiddleware(key.replace(/^\*$/, '**').replace(/\/\*$/, ''), 
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            context));
+        }
+        else {
+            createdProxies.push(
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            createProxyMiddleware(key, context));
         }
     }
     return createdProxies;

package/src/tools/esbuild/angular/angular-host.js

@@ -28,6 +28,12 @@ exports.ensureSourceFileVersions = ensureSourceFileVersions;
 function createAngularCompilerHost(compilerOptions, hostOptions) {
     // Create TypeScript compiler host
     const host = typescript_1.default.createIncrementalCompilerHost(compilerOptions);
+    // Set the parsing mode to the same as TS 5.3 default for tsc. This provides a parse
+    // performance improvement by skipping non-type related JSDoc parsing.
+    // NOTE: The check for this enum can be removed when TS 5.3 support is the minimum.
+    if (typescript_1.default.JSDocParsingMode) {
+        host.jsDocParsingMode = typescript_1.default.JSDocParsingMode.ParseForTypeErrors;
+    }
     // The AOT compiler currently requires this hook to allow for a transformResource hook.
     // Once the AOT compiler allows only a transformResource hook, this can be reevaluated.
     host.readResource = async function (filename) {
@@ -40,7 +46,7 @@ function createAngularCompilerHost(compilerOptions, hostOptions) {
             return null;
         }
         const result = await hostOptions.transformStylesheet(data, context.containingFile, context.resourceFile ?? undefined);
-        return result ? { content: result } : null;
+        return typeof result === 'string' ? { content: result } : null;
     };
     // Allow the AOT compiler to request the set of changed templates and styles
     host.getModifiedResourceFiles = function () {

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

@@ -35,7 +35,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.createCompilerPlugin = void 0;
 const node_assert_1 = __importDefault(require("node:assert"));
-const node_fs_1 = require("node:fs");
 const path = __importStar(require("node:path"));
 const environment_options_1 = require("../../../utils/environment-options");
 const javascript_transformer_1 = require("../javascript-transformer");
@@ -54,18 +53,6 @@ function createCompilerPlugin(pluginOptions, styleOptions) {
         async setup(build) {
             let setupWarnings = [];
             const preserveSymlinks = build.initialOptions.preserveSymlinks;
-            let tsconfigPath = pluginOptions.tsconfig;
-            if (!preserveSymlinks) {
-                // Use the real path of the tsconfig if not preserving symlinks.
-                // This ensures the TS source file paths are based on the real path of the configuration.
-                // NOTE: promises.realpath should not be used here since it uses realpath.native which
-                // can cause case conversion and other undesirable behavior on Windows systems.
-                // ref: https://github.com/nodejs/node/issues/7726
-                try {
-                    tsconfigPath = (0, node_fs_1.realpathSync)(tsconfigPath);
-                }
-                catch { }
-            }
             // Initialize a worker pool for JavaScript transformations
             const javascriptTransformer = new javascript_transformer_1.JavaScriptTransformer(pluginOptions, environment_options_1.maxWorkers);
             // Setup defines based on the values used by the Angular compiler-cli
@@ -132,14 +119,14 @@ function createCompilerPlugin(pluginOptions, styleOptions) {
                         else {
                             stylesheetResult = await stylesheetBundler.bundleInline(data, containingFile, styleOptions.inlineStyleLanguage);
                         }
-                        const { contents, resourceFiles, referencedFiles, errors, warnings } = stylesheetResult;
+                        const { contents, outputFiles, metafile, referencedFiles, errors, warnings } = stylesheetResult;
                         if (errors) {
                             (result.errors ??= []).push(...errors);
                         }
                         (result.warnings ??= []).push(...warnings);
                         additionalResults.set(stylesheetFile ?? containingFile, {
-                            outputFiles: resourceFiles,
-                            metafile: stylesheetResult.metafile,
+                            outputFiles,
+                            metafile,
                         });
                         if (referencedFiles) {
                             referencedFileTracker.add(containingFile, referencedFiles);
@@ -185,7 +172,7 @@ function createCompilerPlugin(pluginOptions, styleOptions) {
                 // In watch mode, previous build state will be reused.
                 let referencedFiles;
                 try {
-                    const initializationResult = await compilation.initialize(tsconfigPath, hostOptions, createCompilerOptionsTransformer(setupWarnings, pluginOptions, preserveSymlinks));
+                    const initializationResult = await compilation.initialize(pluginOptions.tsconfig, hostOptions, createCompilerOptionsTransformer(setupWarnings, pluginOptions, preserveSymlinks));
                     shouldTsIgnoreJs = !initializationResult.compilerOptions.allowJs;
                     referencedFiles = initializationResult.referencedFiles;
                 }
@@ -308,7 +295,7 @@ function createCompilerPlugin(pluginOptions, styleOptions) {
             }));
             // Setup bundling of component templates and stylesheets when in JIT mode
             if (pluginOptions.jit) {
-                (0, jit_plugin_callbacks_1.setupJitPluginCallbacks)(build, stylesheetBundler, additionalResults, styleOptions.inlineStyleLanguage);
+                (0, jit_plugin_callbacks_1.setupJitPluginCallbacks)(build, stylesheetBundler, additionalResults, styleOptions.inlineStyleLanguage, pluginOptions.loadResultCache);
             }
             build.onEnd((result) => {
                 // Ensure other compilations are unblocked if the main compilation throws during start
@@ -401,22 +388,19 @@ function createCompilerOptionsTransformer(setupWarnings, pluginOptions, preserve
 function bundleWebWorker(build, pluginOptions, workerFile) {
     try {
         return build.esbuild.buildSync({
+            ...build.initialOptions,
             platform: 'browser',
             write: false,
             bundle: true,
             metafile: true,
             format: 'esm',
-            mainFields: ['es2020', 'es2015', 'browser', 'module', 'main'],
-            logLevel: 'silent',
-            sourcemap: pluginOptions.sourcemap,
             entryNames: 'worker-[hash]',
             entryPoints: [workerFile],
-            absWorkingDir: build.initialOptions.absWorkingDir,
-            outdir: build.initialOptions.outdir,
-            minifyIdentifiers: build.initialOptions.minifyIdentifiers,
-            minifySyntax: build.initialOptions.minifySyntax,
-            minifyWhitespace: build.initialOptions.minifyWhitespace,
-            target: build.initialOptions.target,
+            sourcemap: pluginOptions.sourcemap,
+            // Zone.js is not used in Web workers so no need to disable
+            supported: undefined,
+            // Plugins are not supported in sync esbuild calls
+            plugins: undefined,
         });
     }
     catch (error) {

package/src/tools/esbuild/angular/component-stylesheets.d.ts

@@ -26,9 +26,7 @@ export declare class ComponentStylesheetBundler {
         errors: import("esbuild").Message[] | undefined;
         warnings: import("esbuild").Message[];
         contents: string;
-        map: string | undefined;
-        path: string | undefined;
-        resourceFiles: OutputFile[];
+        outputFiles: OutputFile[];
         metafile: import("esbuild").Metafile | undefined;
         referencedFiles: Set<string> | undefined;
     }>;
@@ -36,12 +34,11 @@ export declare class ComponentStylesheetBundler {
         errors: import("esbuild").Message[] | undefined;
         warnings: import("esbuild").Message[];
         contents: string;
-        map: string | undefined;
-        path: string | undefined;
-        resourceFiles: OutputFile[];
+        outputFiles: OutputFile[];
         metafile: import("esbuild").Metafile | undefined;
         referencedFiles: Set<string> | undefined;
     }>;
     invalidate(files: Iterable<string>): void;
     dispose(): Promise<void>;
+    private extractResult;
 }

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

@@ -52,7 +52,7 @@ class ComponentStylesheetBundler {
                 return buildOptions;
             });
         });
-        return extractResult(await bundlerContext.bundle(), bundlerContext.watchFiles);
+        return this.extractResult(await bundlerContext.bundle(), bundlerContext.watchFiles);
     }
     async bundleInline(data, filename, language) {
         // Use a hash of the inline stylesheet content to ensure a consistent identifier. External stylesheets will resolve
@@ -79,7 +79,7 @@ class ComponentStylesheetBundler {
                                 namespace,
                             };
                         });
-                        build.onLoad({ filter: /^css;/, namespace }, async () => {
+                        build.onLoad({ filter: /^css;/, namespace }, () => {
                             return {
                                 contents: data,
                                 loader: 'css',
@@ -92,7 +92,7 @@ class ComponentStylesheetBundler {
             });
         });
         // Extract the result of the bundling from the output files
-        return extractResult(await bundlerContext.bundle(), bundlerContext.watchFiles);
+        return this.extractResult(await bundlerContext.bundle(), bundlerContext.watchFiles);
     }
     invalidate(files) {
         if (!this.incremental) {
@@ -112,51 +112,46 @@ class ComponentStylesheetBundler {
         this.#inlineContexts.clear();
         await Promise.allSettled(contexts.map((context) => context.dispose()));
     }
-}
-exports.ComponentStylesheetBundler = ComponentStylesheetBundler;
-function extractResult(result, referencedFiles) {
-    let contents = '';
-    let map;
-    let outputPath;
-    const resourceFiles = [];
-    if (!result.errors) {
-        for (const outputFile of result.outputFiles) {
-            const filename = node_path_1.default.basename(outputFile.path);
-            if (outputFile.type === bundler_context_1.BuildOutputFileType.Media) {
-                // The output files could also contain resources (images/fonts/etc.) that were referenced
-                resourceFiles.push(outputFile);
-            }
-            else if (filename.endsWith('.css')) {
-                outputPath = outputFile.path;
-                contents = outputFile.text;
-            }
-            else if (filename.endsWith('.css.map')) {
-                map = outputFile.text;
-            }
-            else {
-                throw new Error(`Unexpected non CSS/Media file "${filename}" outputted during component stylesheet processing.`);
+    extractResult(result, referencedFiles) {
+        let contents = '';
+        let metafile;
+        const outputFiles = [];
+        if (!result.errors) {
+            for (const outputFile of result.outputFiles) {
+                const filename = node_path_1.default.basename(outputFile.path);
+                // Needed for Bazel as otherwise the files will not be written in the correct place.
+                outputFile.path = node_path_1.default.join(this.options.workspaceRoot, outputFile.path);
+                if (outputFile.type === bundler_context_1.BuildOutputFileType.Media) {
+                    // The output files could also contain resources (images/fonts/etc.) that were referenced
+                    outputFiles.push(outputFile);
+                }
+                else if (filename.endsWith('.css')) {
+                    contents = outputFile.text;
+                }
+                else if (filename.endsWith('.css.map')) {
+                    outputFiles.push(outputFile);
+                }
+                else {
+                    throw new Error(`Unexpected non CSS/Media file "${filename}" outputted during component stylesheet processing.`);
+                }
             }
+            metafile = result.metafile;
+            // Remove entryPoint fields from outputs to prevent the internal component styles from being
+            // treated as initial files. Also mark the entry as a component resource for stat reporting.
+            Object.values(metafile.outputs).forEach((output) => {
+                delete output.entryPoint;
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                output['ng-component'] = true;
+            });
         }
+        return {
+            errors: result.errors,
+            warnings: result.warnings,
+            contents,
+            outputFiles,
+            metafile,
+            referencedFiles,
+        };
     }
-    let metafile;
-    if (!result.errors) {
-        metafile = result.metafile;
-        // Remove entryPoint fields from outputs to prevent the internal component styles from being
-        // treated as initial files. Also mark the entry as a component resource for stat reporting.
-        Object.values(metafile.outputs).forEach((output) => {
-            delete output.entryPoint;
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            output['ng-component'] = true;
-        });
-    }
-    return {
-        errors: result.errors,
-        warnings: result.warnings,
-        contents,
-        map,
-        path: outputPath,
-        resourceFiles,
-        metafile,
-        referencedFiles,
-    };
 }
+exports.ComponentStylesheetBundler = ComponentStylesheetBundler;

package/src/tools/esbuild/angular/jit-plugin-callbacks.d.ts

@@ -6,6 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 import type { Metafile, OutputFile, PluginBuild } from 'esbuild';
+import { LoadResultCache } from '../load-result-cache';
 import { ComponentStylesheetBundler } from './component-stylesheets';
 /**
  * Sets up esbuild resolve and load callbacks to support Angular JIT mode processing
@@ -19,4 +20,4 @@ import { ComponentStylesheetBundler } from './component-stylesheets';
 export declare function setupJitPluginCallbacks(build: PluginBuild, stylesheetBundler: ComponentStylesheetBundler, additionalResultFiles: Map<string, {
     outputFiles?: OutputFile[];
     metafile?: Metafile;
-}>, inlineStyleLanguage: string): void;
+}>, inlineStyleLanguage: string, loadCache?: LoadResultCache): void;