@angular/build 19.0.0-next.1 → 19.0.0-next.3

package/src/tools/esbuild/application-code-bundle.js

@@ -12,12 +12,13 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.createBrowserCodeBundleOptions = createBrowserCodeBundleOptions;
 exports.createBrowserPolyfillBundleOptions = createBrowserPolyfillBundleOptions;
-exports.createServerCodeBundleOptions = createServerCodeBundleOptions;
 exports.createServerPolyfillBundleOptions = createServerPolyfillBundleOptions;
+exports.createServerMainCodeBundleOptions = createServerMainCodeBundleOptions;
 const node_assert_1 = __importDefault(require("node:assert"));
 const node_crypto_1 = require("node:crypto");
 const node_path_1 = require("node:path");
 const environment_options_1 = require("../../utils/environment-options");
+const manifest_1 = require("../../utils/server-rendering/manifest");
 const compiler_plugin_1 = require("./angular/compiler-plugin");
 const compiler_plugin_options_1 = require("./compiler-plugin-options");
 const external_packages_plugin_1 = require("./external-packages-plugin");
@@ -110,29 +111,28 @@ function createBrowserPolyfillBundleOptions(options, target, sourceFileCache) {
     // cannot be used with fully incremental bundling yet.
     return hasTypeScriptEntries ? buildOptions : () => buildOptions;
 }
-/**
- * Create an esbuild 'build' options object for the server bundle.
- * @param options The builder's user-provider normalized options.
- * @returns An esbuild BuildOptions object.
- */
-function createServerCodeBundleOptions(options, target, sourceFileCache) {
-    const { serverEntryPoint, workspaceRoot, ssrOptions, watch, externalPackages, prerenderOptions, polyfills, } = options;
-    (0, node_assert_1.default)(serverEntryPoint, 'createServerCodeBundleOptions should not be called without a defined serverEntryPoint.');
-    const { pluginOptions, styleOptions } = (0, compiler_plugin_options_1.createCompilerPluginOptions)(options, target, sourceFileCache);
-    const mainServerNamespace = 'angular:server-render-utils';
-    const entryPoints = {
-        'render-utils.server': mainServerNamespace,
-        'main.server': serverEntryPoint,
-    };
-    const ssrEntryPoint = ssrOptions?.entry;
-    if (ssrEntryPoint) {
-        entryPoints['server'] = ssrEntryPoint;
+function createServerPolyfillBundleOptions(options, target, sourceFileCache) {
+    const serverPolyfills = [];
+    const polyfillsFromConfig = new Set(options.polyfills);
+    if (!(0, utils_1.isZonelessApp)(options.polyfills)) {
+        serverPolyfills.push('zone.js/node');
+    }
+    if (polyfillsFromConfig.has('@angular/localize') ||
+        polyfillsFromConfig.has('@angular/localize/init')) {
+        serverPolyfills.push('@angular/localize/init');
+    }
+    serverPolyfills.push('@angular/platform-server/init');
+    const namespace = 'angular:polyfills-server';
+    const polyfillBundleOptions = getEsBuildCommonPolyfillsOptions({
+        ...options,
+        polyfills: serverPolyfills,
+    }, namespace, false, sourceFileCache);
+    if (!polyfillBundleOptions) {
+        return;
     }
-    const zoneless = (0, utils_1.isZonelessApp)(polyfills);
     const buildOptions = {
-        ...getEsBuildCommonOptions(options),
+        ...polyfillBundleOptions,
         platform: 'node',
-        splitting: true,
         outExtension: { '.js': '.mjs' },
         // Note: `es2015` is needed for RxJS v6. If not specified, `module` would
         // match and the ES5 distribution would be bundled and ends up breaking at
@@ -140,14 +140,45 @@ function createServerCodeBundleOptions(options, target, sourceFileCache) {
         // More details: https://github.com/angular/angular-cli/issues/25405.
         mainFields: ['es2020', 'es2015', 'module', 'main'],
         entryNames: '[name]',
-        target,
         banner: {
-            js: `import './polyfills.server.mjs';`,
+            js: [
+                // Note: Needed as esbuild does not provide require shims / proxy from ESModules.
+                // See: https://github.com/evanw/esbuild/issues/1921.
+                `import { createRequire } from 'node:module';`,
+                `globalThis['require'] ??= createRequire(import.meta.url);`,
+            ].join('\n'),
+        },
+        target,
+        entryPoints: {
+            'polyfills.server': namespace,
         },
+    };
+    return () => buildOptions;
+}
+function createServerMainCodeBundleOptions(options, target, sourceFileCache) {
+    const { serverEntryPoint: mainServerEntryPoint, workspaceRoot, externalPackages, ssrOptions, polyfills, } = options;
+    (0, node_assert_1.default)(mainServerEntryPoint, 'createServerCodeBundleOptions should not be called without a defined serverEntryPoint.');
+    const { pluginOptions, styleOptions } = (0, compiler_plugin_options_1.createCompilerPluginOptions)(options, target, sourceFileCache);
+    const mainServerNamespace = 'angular:main-server';
+    const mainServerInjectPolyfillsNamespace = 'angular:main-server-inject-polyfills';
+    const mainServerInjectManifestNamespace = 'angular:main-server-inject-manifest';
+    const zoneless = (0, utils_1.isZonelessApp)(polyfills);
+    const entryPoints = {
+        'main.server': mainServerNamespace,
+    };
+    const ssrEntryPoint = ssrOptions?.entry;
+    if (ssrEntryPoint) {
+        // Old behavior: 'server.ts' was bundled together with the SSR (Server-Side Rendering) code.
+        // This approach combined server-side logic and rendering into a single bundle.
+        entryPoints['server'] = ssrEntryPoint;
+    }
+    const buildOptions = {
+        ...getEsBuildServerCommonOptions(options),
+        target,
+        inject: [mainServerInjectPolyfillsNamespace, mainServerInjectManifestNamespace],
         entryPoints,
         supported: (0, utils_1.getFeatureSupport)(target, zoneless),
         plugins: [
-            (0, loader_import_attribute_plugin_1.createLoaderImportAttributePlugin)(),
             (0, wasm_plugin_1.createWasmPlugin)({ allowAsync: zoneless, cache: sourceFileCache?.loadResultCache }),
             (0, sourcemap_ignorelist_plugin_1.createSourcemapIgnorelistPlugin)(),
             (0, compiler_plugin_1.createCompilerPlugin)(
@@ -164,20 +195,49 @@ function createServerCodeBundleOptions(options, target, sourceFileCache) {
     else {
         buildOptions.plugins.push((0, rxjs_esm_resolution_plugin_1.createRxjsEsmResolutionPlugin)());
     }
+    // Mark manifest and polyfills file as external as these are generated by a different bundle step.
+    (buildOptions.external ??= []).push(...utils_1.SERVER_GENERATED_EXTERNALS);
     buildOptions.plugins.push((0, virtual_module_plugin_1.createVirtualModulePlugin)({
+        namespace: mainServerInjectPolyfillsNamespace,
+        cache: sourceFileCache?.loadResultCache,
+        loadContent: () => ({
+            contents: `import './polyfills.server.mjs';`,
+            loader: 'js',
+            resolveDir: workspaceRoot,
+        }),
+    }), (0, virtual_module_plugin_1.createVirtualModulePlugin)({
+        namespace: mainServerInjectManifestNamespace,
+        cache: sourceFileCache?.loadResultCache,
+        loadContent: async () => {
+            const contents = [
+                // Configure `@angular/ssr` manifest.
+                `import manifest from './${manifest_1.SERVER_APP_MANIFEST_FILENAME}';`,
+                `import { ɵsetAngularAppManifest } from '@angular/ssr';`,
+                `ɵsetAngularAppManifest(manifest);`,
+            ];
+            return {
+                contents: contents.join('\n'),
+                loader: 'js',
+                resolveDir: workspaceRoot,
+            };
+        },
+    }), (0, virtual_module_plugin_1.createVirtualModulePlugin)({
         namespace: mainServerNamespace,
         cache: sourceFileCache?.loadResultCache,
         loadContent: async () => {
+            const mainServerEntryPointJsImport = entryFileToWorkspaceRelative(workspaceRoot, mainServerEntryPoint);
             const contents = [
-                `export { ɵConsole } from '@angular/core';`,
-                `export { renderApplication, renderModule, ɵSERVER_CONTEXT } from '@angular/platform-server';`,
+                // Re-export all symbols including default export from 'main.server.ts'
+                `export { default } from '${mainServerEntryPointJsImport}';`,
+                `export * from '${mainServerEntryPointJsImport}';`,
+                // Add @angular/ssr exports
+                `export {
+            ɵServerRenderContext,
+            ɵdestroyAngularServerApp,
+            ɵextractRoutesAndCreateRouteTree,
+            ɵgetOrCreateAngularServerApp,
+          } from '@angular/ssr';`,
             ];
-            if (watch) {
-                contents.push(`export { ɵresetCompiledComponents } from '@angular/core';`);
-            }
-            if (prerenderOptions?.discoverRoutes) {
-                contents.push(`export { ɵgetRoutesFromAngularRouterConfig } from '@angular/ssr';`);
-            }
             return {
                 contents: contents.join('\n'),
                 loader: 'js',
@@ -190,27 +250,9 @@ function createServerCodeBundleOptions(options, target, sourceFileCache) {
     }
     return buildOptions;
 }
-function createServerPolyfillBundleOptions(options, target, sourceFileCache) {
-    const serverPolyfills = [];
-    const polyfillsFromConfig = new Set(options.polyfills);
-    if (!(0, utils_1.isZonelessApp)(options.polyfills)) {
-        serverPolyfills.push('zone.js/node');
-    }
-    if (polyfillsFromConfig.has('@angular/localize') ||
-        polyfillsFromConfig.has('@angular/localize/init')) {
-        serverPolyfills.push('@angular/localize/init');
-    }
-    serverPolyfills.push('@angular/platform-server/init');
-    const namespace = 'angular:polyfills-server';
-    const polyfillBundleOptions = getEsBuildCommonPolyfillsOptions({
-        ...options,
-        polyfills: serverPolyfills,
-    }, namespace, false, sourceFileCache);
-    if (!polyfillBundleOptions) {
-        return;
-    }
-    const buildOptions = {
-        ...polyfillBundleOptions,
+function getEsBuildServerCommonOptions(options) {
+    return {
+        ...getEsBuildCommonOptions(options),
         platform: 'node',
         outExtension: { '.js': '.mjs' },
         // Note: `es2015` is needed for RxJS v6. If not specified, `module` would
@@ -219,31 +261,18 @@ function createServerPolyfillBundleOptions(options, target, sourceFileCache) {
         // More details: https://github.com/angular/angular-cli/issues/25405.
         mainFields: ['es2020', 'es2015', 'module', 'main'],
         entryNames: '[name]',
-        banner: {
-            js: [
-                // Note: Needed as esbuild does not provide require shims / proxy from ESModules.
-                // See: https://github.com/evanw/esbuild/issues/1921.
-                `import { createRequire } from 'node:module';`,
-                `globalThis['require'] ??= createRequire(import.meta.url);`,
-            ].join('\n'),
-        },
-        target,
-        entryPoints: {
-            'polyfills.server': namespace,
-        },
     };
-    return () => buildOptions;
 }
 function getEsBuildCommonOptions(options) {
-    const { workspaceRoot, outExtension, optimizationOptions, sourcemapOptions, tsconfig, externalDependencies, outputNames, preserveSymlinks, jit, loaderExtensions, jsonLogs, } = options;
+    const { workspaceRoot, outExtension, optimizationOptions, sourcemapOptions, tsconfig, externalDependencies, outputNames, preserveSymlinks, jit, loaderExtensions, jsonLogs, i18nOptions, } = options;
     // Ensure unique hashes for i18n translation changes when using post-process inlining.
     // This hash value is added as a footer to each file and ensures that the output file names (with hashes)
     // change when translation files have changed. If this is not done the post processed files may have
     // different content but would retain identical production file names which would lead to browser caching problems.
     let footer;
-    if (options.i18nOptions.shouldInline) {
+    if (i18nOptions.shouldInline) {
         // Update file hashes to include translation file content
-        const i18nHash = Object.values(options.i18nOptions.locales).reduce((data, locale) => data + locale.files.map((file) => file.integrity || '').join('|'), '');
+        const i18nHash = Object.values(i18nOptions.locales).reduce((data, locale) => data + locale.files.map((file) => file.integrity || '').join('|'), '');
         footer = { js: `/**i18n:${(0, node_crypto_1.createHash)('sha256').update(i18nHash).digest('hex')}*/` };
     }
     return {
@@ -267,7 +296,7 @@ function getEsBuildCommonOptions(options) {
         splitting: true,
         chunkNames: options.namedChunks ? '[name]-[hash]' : 'chunk-[hash]',
         tsconfig,
-        external: externalDependencies,
+        external: externalDependencies ? [...externalDependencies] : undefined,
         write: false,
         preserveSymlinks,
         define: {
@@ -360,3 +389,9 @@ function getEsBuildCommonPolyfillsOptions(options, namespace, tryToResolvePolyfi
     }));
     return buildOptions;
 }
+function entryFileToWorkspaceRelative(workspaceRoot, entryFile) {
+    return ('./' +
+        (0, node_path_1.relative)(workspaceRoot, entryFile)
+            .replace(/.[mc]?ts$/, '')
+            .replace(/\\/g, '/'));
+}

package/src/tools/esbuild/bundler-context.js

@@ -138,6 +138,7 @@ class BundlerContext {
         }
         return result;
     }
+    // eslint-disable-next-line max-lines-per-function
     async #performBundle() {
         // Create esbuild options if not present
         if (this.#esbuildOptions === undefined) {
@@ -165,12 +166,6 @@ class BundlerContext {
                 // For non-incremental builds, perform a single build
                 result = await (0, esbuild_1.build)(this.#esbuildOptions);
             }
-            if (this.#platformIsServer) {
-                for (const entry of Object.values(result.metafile.outputs)) {
-                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                    entry['ng-platform-server'] = true;
-                }
-            }
         }
         catch (failure) {
             // Build failures will throw an exception which contains errors/warnings
@@ -280,6 +275,7 @@ class BundlerContext {
         for (const { imports } of Object.values(result.metafile.outputs)) {
             for (const importData of imports) {
                 if (!importData.external ||
+                    utils_1.SERVER_GENERATED_EXTERNALS.has(importData.path) ||
                     (importData.kind !== 'import-statement' &&
                         importData.kind !== 'dynamic-import' &&
                         importData.kind !== 'require-call')) {
@@ -295,13 +291,21 @@ class BundlerContext {
             if (!/\.([cm]?js|css|wasm)(\.map)?$/i.test(file.path)) {
                 fileType = BuildOutputFileType.Media;
             }
+            else if (this.#platformIsServer) {
+                fileType = BuildOutputFileType.Server;
+            }
             else {
-                fileType = this.#platformIsServer
-                    ? BuildOutputFileType.Server
-                    : BuildOutputFileType.Browser;
+                fileType = BuildOutputFileType.Browser;
             }
             return (0, utils_1.convertOutputFile)(file, fileType);
         });
+        let externalConfiguration = this.#esbuildOptions.external;
+        if (this.#platformIsServer && externalConfiguration) {
+            externalConfiguration = externalConfiguration.filter((dep) => !utils_1.SERVER_GENERATED_EXTERNALS.has(dep));
+            if (!externalConfiguration.length) {
+                externalConfiguration = undefined;
+            }
+        }
         // Return the successful build results
         return {
             ...result,
@@ -310,7 +314,7 @@ class BundlerContext {
             externalImports: {
                 [this.#platformIsServer ? 'server' : 'browser']: externalImports,
             },
-            externalConfiguration: this.#esbuildOptions.external,
+            externalConfiguration,
             errors: undefined,
         };
     }

package/src/tools/esbuild/cache.d.ts

@@ -84,5 +84,5 @@ export declare class MemoryCache<V> extends Cache<V, Map<string, V>> {
      * Provides all the values currently present in the cache instance.
      * @returns An iterable of all values in the cache.
      */
-    values(): IterableIterator<V>;
+    values(): MapIterator<V>;
 }

package/src/tools/esbuild/utils.d.ts

@@ -47,3 +47,12 @@ export declare function logMessages(logger: BuilderContext['logger'], executionR
  */
 export declare function isZonelessApp(polyfills: string[] | undefined): boolean;
 export declare function getEntryPointName(entryPoint: string): string;
+/**
+ * A set of server-generated dependencies that are treated as external.
+ *
+ * These dependencies are marked as external because they are produced by a
+ * separate bundling process and are not included in the primary bundle. This
+ * ensures that these generated files are resolved from an external source rather
+ * than being part of the main bundle.
+ */
+export declare const SERVER_GENERATED_EXTERNALS: Set<string>;

package/src/tools/esbuild/utils.js

@@ -7,6 +7,7 @@
  * found in the LICENSE file at https://angular.dev/license
  */
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.SERVER_GENERATED_EXTERNALS = void 0;
 exports.logBuildStats = logBuildStats;
 exports.getChunkNameFromMetafile = getChunkNameFromMetafile;
 exports.calculateEstimatedTransferSizes = calculateEstimatedTransferSizes;
@@ -29,6 +30,7 @@ const node_path_1 = require("node:path");
 const node_url_1 = require("node:url");
 const node_zlib_1 = require("node:zlib");
 const semver_1 = require("semver");
+const manifest_1 = require("../../utils/server-rendering/manifest");
 const stats_table_1 = require("../../utils/stats-table");
 const bundler_context_1 = require("./bundler-context");
 function logBuildStats(metafile, outputFiles, initial, budgetFailures, colors, changedFiles, estimatedTransferSizes, ssrOutputEnabled, verbose) {
@@ -385,3 +387,15 @@ function getEntryPointName(entryPoint) {
         .replace(/\.[cm]?[jt]s$/, '')
         .replace(/[\\/.]/g, '-');
 }
+/**
+ * A set of server-generated dependencies that are treated as external.
+ *
+ * These dependencies are marked as external because they are produced by a
+ * separate bundling process and are not included in the primary bundle. This
+ * ensures that these generated files are resolved from an external source rather
+ * than being part of the main bundle.
+ */
+exports.SERVER_GENERATED_EXTERNALS = new Set([
+    './polyfills.server.mjs',
+    './' + manifest_1.SERVER_APP_MANIFEST_FILENAME,
+]);

package/src/tools/sass/sass-service.js

@@ -34,17 +34,22 @@ var __disposeResources = (this && this.__disposeResources) || (function (Suppres
             env.error = env.hasError ? new SuppressedError(e, env.error, "An error was suppressed during disposal.") : e;
             env.hasError = true;
         }
+        var r, s = 0;
         function next() {
-            while (env.stack.length) {
-                var rec = env.stack.pop();
+            while (r = env.stack.pop()) {
                 try {
-                    var result = rec.dispose && rec.dispose.call(rec.value);
-                    if (rec.async) return Promise.resolve(result).then(next, function(e) { fail(e); return next(); });
+                    if (!r.async && s === 1) return s = 0, env.stack.push(r), Promise.resolve().then(next);
+                    if (r.dispose) {
+                        var result = r.dispose.call(r.value);
+                        if (r.async) return s |= 2, Promise.resolve(result).then(next, function(e) { fail(e); return next(); });
+                    }
+                    else s |= 1;
                 }
                 catch (e) {
                     fail(e);
                 }
             }
+            if (s === 1) return env.hasError ? Promise.reject(env.error) : Promise.resolve();
             if (env.hasError) throw env.error;
         }
         return next();

package/src/tools/vite/angular-memory-plugin.js

@@ -82,10 +82,10 @@ function createAngularMemoryPlugin(options) {
             // Returning a function, installs middleware after the main transform middleware but
             // before the built-in HTML middleware
             return () => {
-                server.middlewares.use(middlewares_1.angularHtmlFallbackMiddleware);
                 if (ssr) {
-                    server.middlewares.use((0, middlewares_1.createAngularSSRMiddleware)(server, outputFiles, indexHtmlTransformer));
+                    server.middlewares.use((0, middlewares_1.createAngularSSRMiddleware)(server, indexHtmlTransformer));
                 }
+                server.middlewares.use(middlewares_1.angularHtmlFallbackMiddleware);
                 server.middlewares.use((0, middlewares_1.createAngularIndexHtmlMiddleware)(server, outputFiles, indexHtmlTransformer));
             };
         },

package/src/tools/vite/middlewares/ssr-middleware.d.ts

@@ -6,7 +6,4 @@
  * found in the LICENSE file at https://angular.dev/license
  */
 import type { Connect, ViteDevServer } from 'vite';
-export declare function createAngularSSRMiddleware(server: ViteDevServer, outputFiles: Map<string, {
-    contents: Uint8Array;
-    servable: boolean;
-}>, indexHtmlTransformer?: (content: string) => Promise<string>): Connect.NextHandleFunction;
+export declare function createAngularSSRMiddleware(server: ViteDevServer, indexHtmlTransformer?: (content: string) => Promise<string>): Connect.NextHandleFunction;

package/src/tools/vite/middlewares/ssr-middleware.js

@@ -8,49 +8,36 @@
  */
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.createAngularSSRMiddleware = createAngularSSRMiddleware;
-const render_page_1 = require("../../../utils/server-rendering/render-page");
 const utils_1 = require("../utils");
-function createAngularSSRMiddleware(server, outputFiles, indexHtmlTransformer) {
+function createAngularSSRMiddleware(server, indexHtmlTransformer) {
+    let cachedAngularServerApp;
     return function (req, res, next) {
-        const url = req.originalUrl;
-        if (!req.url ||
-            // Skip if path is not defined.
-            !url ||
-            // Skip if path is like a file.
-            // NOTE: We use a mime type lookup to mitigate against matching requests like: /browse/pl.0ef59752c0cd457dbf1391f08cbd936f
-            (0, utils_1.lookupMimeTypeFromRequest)(url)) {
-            next();
-            return;
+        if (req.url === undefined) {
+            return next();
         }
-        const rawHtml = outputFiles.get('/index.server.html')?.contents;
-        if (!rawHtml) {
-            next();
-            return;
-        }
-        server
-            .transformIndexHtml(req.url, Buffer.from(rawHtml).toString('utf-8'))
-            .then(async (processedHtml) => {
-            const resolvedUrls = server.resolvedUrls;
-            const baseUrl = resolvedUrls?.local[0] ?? resolvedUrls?.network[0];
-            if (indexHtmlTransformer) {
-                processedHtml = await indexHtmlTransformer(processedHtml);
+        const resolvedUrls = server.resolvedUrls;
+        const baseUrl = resolvedUrls?.local[0] ?? resolvedUrls?.network[0];
+        const url = new URL(req.url, baseUrl);
+        (async () => {
+            const { ɵgetOrCreateAngularServerApp } = (await server.ssrLoadModule('/main.server.mjs'));
+            const angularServerApp = ɵgetOrCreateAngularServerApp();
+            // Only Add the transform hook only if it's a different instance.
+            if (cachedAngularServerApp !== angularServerApp) {
+                angularServerApp.hooks.on('html:transform:pre', async ({ html }) => {
+                    const processedHtml = await server.transformIndexHtml(url.pathname, html);
+                    return indexHtmlTransformer?.(processedHtml) ?? processedHtml;
+                });
+                cachedAngularServerApp = angularServerApp;
+            }
+            const response = await angularServerApp.render(new Request(url, { signal: AbortSignal.timeout(30_000) }), undefined);
+            return response?.text();
+        })()
+            .then((content) => {
+            if (typeof content !== 'string') {
+                return next();
             }
-            const { content: ssrContent } = await (0, render_page_1.renderPage)({
-                document: processedHtml,
-                route: new URL(req.originalUrl ?? '/', baseUrl).toString(),
-                serverContext: 'ssr',
-                loadBundle: (uri) => 
-                // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                server.ssrLoadModule(uri.slice(1)),
-                // Files here are only needed for critical CSS inlining.
-                outputFiles: {},
-                // TODO: add support for critical css inlining.
-                inlineCriticalCss: false,
-            });
-            res.setHeader('Content-Type', 'text/html');
-            res.setHeader('Cache-Control', 'no-cache');
             (0, utils_1.appendServerConfiguredHeaders)(server, res);
-            res.end(ssrContent);
+            res.end(content);
         })
             .catch((error) => next(error));
     };

package/src/typings.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
+ */
+
+// The `bundled_critters` causes issues with module mappings in Bazel,
+// leading to unexpected behavior with esbuild. Specifically, the problem occurs
+// when esbuild resolves to a different module or version than expected, due to
+// how Bazel handles module mappings.
+//
+// This change aims to resolve esbuild types correctly and maintain consistency
+// in the Bazel build process.
+
+declare module 'esbuild' {
+  export * from 'esbuild-wasm';
+}

package/src/utils/index-file/inline-critical-css.js

@@ -22,38 +22,53 @@ const MEDIA_SET_HANDLER_PATTERN = /^this\.media=["'](.*)["'];?$/;
  */
 const CSP_MEDIA_ATTR = 'ngCspMedia';
 /**
- * Script text used to change the media value of the link tags.
+ * Script that dynamically updates the `media` attribute of `<link>` tags based on a custom attribute (`CSP_MEDIA_ATTR`).
  *
  * NOTE:
  * We do not use `document.querySelectorAll('link').forEach((s) => s.addEventListener('load', ...)`
- * because this does not always fire on Chome.
+ * because load events are not always triggered reliably on Chrome.
  * See: https://github.com/angular/angular-cli/issues/26932 and https://crbug.com/1521256
+ *
+ * The script:
+ * - Ensures the event target is a `<link>` tag with the `CSP_MEDIA_ATTR` attribute.
+ * - Updates the `media` attribute with the value of `CSP_MEDIA_ATTR` and then removes the attribute.
+ * - Removes the event listener when all relevant `<link>` tags have been processed.
+ * - Uses event capturing (the `true` parameter) since load events do not bubble up the DOM.
  */
-const LINK_LOAD_SCRIPT_CONTENT = [
-    '(() => {',
-    `  const CSP_MEDIA_ATTR = '${CSP_MEDIA_ATTR}';`,
-    '  const documentElement = document.documentElement;',
-    '  const listener = (e) => {',
-    '    const target = e.target;',
-    `    if (!target || target.tagName !== 'LINK' || !target.hasAttribute(CSP_MEDIA_ATTR)) {`,
-    '     return;',
-    '    }',
-    '    target.media = target.getAttribute(CSP_MEDIA_ATTR);',
-    '    target.removeAttribute(CSP_MEDIA_ATTR);',
-    // Remove onload listener when there are no longer styles that need to be loaded.
-    '    if (!document.head.querySelector(`link[${CSP_MEDIA_ATTR}]`)) {',
-    `      documentElement.removeEventListener('load', listener);`,
-    '    }',
-    '  };',
-    //  We use an event with capturing (the true parameter) because load events don't bubble.
-    `  documentElement.addEventListener('load', listener, true);`,
-    '})();',
-].join('\n');
-class CrittersExtended extends critters_1.default {
+const LINK_LOAD_SCRIPT_CONTENT = `
+(() => {
+  const CSP_MEDIA_ATTR = '${CSP_MEDIA_ATTR}';
+  const documentElement = document.documentElement;
+
+  // Listener for load events on link tags.
+  const listener = (e) => {
+    const target = e.target;
+    if (
+      !target ||
+      target.tagName !== 'LINK' ||
+      !target.hasAttribute(CSP_MEDIA_ATTR)
+    ) {
+      return;
+    }
+
+    target.media = target.getAttribute(CSP_MEDIA_ATTR);
+    target.removeAttribute(CSP_MEDIA_ATTR);
+
+    if (!document.head.querySelector(\`link[\${CSP_MEDIA_ATTR}]\`)) {
+      documentElement.removeEventListener('load', listener);
+    }
+  };
+
+  documentElement.addEventListener('load', listener, true);
+})();
+`.trim();
+class CrittersBase extends critters_1.default {
+}
+/* eslint-enable @typescript-eslint/no-unsafe-declaration-merging */
+class CrittersExtended extends CrittersBase {
     optionsExtended;
     warnings = [];
     errors = [];
-    initialEmbedLinkedStylesheet;
     addedCspScriptsDocuments = new WeakSet();
     documentNonces = new WeakMap();
     constructor(optionsExtended) {
@@ -71,17 +86,12 @@ class CrittersExtended extends critters_1.default {
             reduceInlineStyles: false,
             mergeStylesheets: false,
             // Note: if `preload` changes to anything other than `media`, the logic in
-            // `embedLinkedStylesheetOverride` will have to be updated.
+            // `embedLinkedStylesheet` will have to be updated.
             preload: 'media',
             noscriptFallback: true,
             inlineFonts: true,
         });
         this.optionsExtended = optionsExtended;
-        // We can't use inheritance to override `embedLinkedStylesheet`, because it's not declared in
-        // the `Critters` .d.ts which means that we can't call the `super` implementation. TS doesn't
-        // allow for `super` to be cast to a different type.
-        this.initialEmbedLinkedStylesheet = this.embedLinkedStylesheet;
-        this.embedLinkedStylesheet = this.embedLinkedStylesheetOverride;
     }
     readFile(path) {
         const readAsset = this.optionsExtended.readAsset;
@@ -91,7 +101,7 @@ class CrittersExtended extends critters_1.default {
      * Override of the Critters `embedLinkedStylesheet` method
      * that makes it work with Angular's CSP APIs.
      */
-    embedLinkedStylesheetOverride = async (link, document) => {
+    async embedLinkedStylesheet(link, document) {
         if (link.getAttribute('media') === 'print' && link.next?.name === 'noscript') {
             // Workaround for https://github.com/GoogleChromeLabs/critters/issues/64
             // NB: this is only needed for the webpack based builders.
@@ -102,7 +112,7 @@ class CrittersExtended extends critters_1.default {
                 link?.next?.remove();
             }
         }
-        const returnValue = await this.initialEmbedLinkedStylesheet(link, document);
+        const returnValue = await super.embedLinkedStylesheet(link, document);
         const cspNonce = this.findCspNonce(document);
         if (cspNonce) {
             const crittersMedia = link.getAttribute('onload')?.match(MEDIA_SET_HANDLER_PATTERN);
@@ -126,7 +136,7 @@ class CrittersExtended extends critters_1.default {
             });
         }
         return returnValue;
-    };
+    }
     /**
      * Finds the CSP nonce for a specific document.
      */