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

package/package.json

@@ -1,26 +1,26 @@
 {
   "name": "@angular-devkit/build-angular",
-  "version": "18.0.0-next.1",
+  "version": "18.0.0-next.3",
   "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.1800.0-next.1",
-    "@angular-devkit/build-webpack": "0.1800.0-next.1",
-    "@angular-devkit/core": "18.0.0-next.1",
-    "@babel/core": "7.24.3",
-    "@babel/generator": "7.24.1",
+    "@angular-devkit/architect": "0.1800.0-next.3",
+    "@angular-devkit/build-webpack": "0.1800.0-next.3",
+    "@angular-devkit/core": "18.0.0-next.3",
+    "@babel/core": "7.24.4",
+    "@babel/generator": "7.24.4",
     "@babel/helper-annotate-as-pure": "7.22.5",
     "@babel/helper-split-export-declaration": "7.22.6",
     "@babel/plugin-transform-async-generator-functions": "7.24.3",
     "@babel/plugin-transform-async-to-generator": "7.24.1",
     "@babel/plugin-transform-runtime": "7.24.3",
-    "@babel/preset-env": "7.24.3",
-    "@babel/runtime": "7.24.1",
+    "@babel/preset-env": "7.24.4",
+    "@babel/runtime": "7.24.4",
     "@discoveryjs/json-ext": "0.5.7",
-    "@ngtools/webpack": "18.0.0-next.1",
+    "@ngtools/webpack": "18.0.0-next.3",
     "@vitejs/plugin-basic-ssl": "1.1.0",
     "ansi-colors": "4.1.3",
     "autoprefixer": "10.4.19",
@@ -29,43 +29,43 @@
     "browserslist": "^4.21.5",
     "copy-webpack-plugin": "11.0.0",
     "critters": "0.0.22",
-    "css-loader": "6.10.0",
+    "css-loader": "7.1.1",
     "esbuild-wasm": "0.20.2",
     "fast-glob": "3.3.2",
     "https-proxy-agent": "7.0.4",
-    "http-proxy-middleware": "2.0.6",
-    "inquirer": "9.2.16",
+    "http-proxy-middleware": "3.0.0",
+    "inquirer": "9.2.18",
     "jsonc-parser": "3.2.1",
     "karma-source-map-support": "1.4.0",
     "less": "4.2.0",
     "less-loader": "12.2.0",
     "license-webpack-plugin": "4.0.2",
     "loader-utils": "3.2.1",
-    "magic-string": "0.30.8",
+    "magic-string": "0.30.9",
     "mini-css-extract-plugin": "2.8.1",
     "mrmime": "2.0.0",
     "open": "8.4.2",
     "ora": "5.4.1",
     "parse5-html-rewriting-stream": "7.0.0",
-    "picomatch": "4.0.1",
+    "picomatch": "4.0.2",
     "piscina": "4.4.0",
     "postcss": "8.4.38",
     "postcss-loader": "8.1.1",
     "resolve-url-loader": "5.0.0",
     "rxjs": "7.8.1",
-    "sass": "1.72.0",
-    "sass-loader": "14.1.1",
+    "sass": "1.75.0",
+    "sass-loader": "14.2.0",
     "semver": "7.6.0",
     "source-map-loader": "5.0.0",
     "source-map-support": "0.5.21",
-    "terser": "5.29.2",
+    "terser": "5.30.3",
     "tree-kill": "1.2.2",
     "tslib": "2.6.2",
-    "undici": "6.10.1",
-    "vite": "5.2.6",
+    "undici": "6.13.0",
+    "vite": "5.2.9",
     "watchpack": "2.4.1",
     "webpack": "5.91.0",
-    "webpack-dev-middleware": "7.1.1",
+    "webpack-dev-middleware": "7.2.1",
     "webpack-dev-server": "5.0.4",
     "webpack-merge": "5.10.0",
     "webpack-subresource-integrity": "5.1.0"

package/src/builders/application/execute-build.js

@@ -16,7 +16,7 @@ const commonjs_checker_1 = require("../../tools/esbuild/commonjs-checker");
 const license_extractor_1 = require("../../tools/esbuild/license-extractor");
 const utils_1 = require("../../tools/esbuild/utils");
 const bundle_calculator_1 = require("../../utils/bundle-calculator");
-const copy_assets_1 = require("../../utils/copy-assets");
+const resolve_assets_1 = require("../../utils/resolve-assets");
 const supported_browsers_1 = require("../../utils/supported-browsers");
 const execute_post_bundle_1 = require("./execute-post-bundle");
 const i18n_1 = require("./i18n");
@@ -86,9 +86,7 @@ async function executeBuild(options, context, rebuildState) {
     }
     // Copy assets
     if (assets) {
-        // The webpack copy assets helper is used with no base paths defined. This prevents the helper
-        // from directly writing to disk. This should eventually be replaced with a more optimized helper.
-        executionResult.addAssets(await (0, copy_assets_1.copyAssets)(assets, [], workspaceRoot));
+        executionResult.addAssets(await (0, resolve_assets_1.resolveAssets)(assets, workspaceRoot));
     }
     // Extract and write licenses for used packages
     if (options.extractLicenses) {

package/src/builders/application/execute-post-bundle.js

@@ -32,37 +32,34 @@ async function executePostBundleSteps(options, outputFiles, assetFiles, initialF
     const allErrors = [];
     const allWarnings = [];
     const prerenderedRoutes = [];
-    const { serviceWorker, indexHtmlOptions, optimizationOptions, sourcemapOptions, ssrOptions, prerenderOptions, appShellOptions, workspaceRoot, verbose, } = options;
+    const { serviceWorker, indexHtmlOptions, optimizationOptions, sourcemapOptions, prerenderOptions, appShellOptions, workspaceRoot, verbose, } = options;
     /**
      * Index HTML content without CSS inlining to be used for server rendering (AppShell, SSG and SSR).
      *
      * NOTE: we don't perform critical CSS inlining as this will be done during server rendering.
      */
-    let indexContentOutputNoCssInlining;
+    let ssrIndexContent;
     // When using prerender/app-shell the index HTML file can be regenerated.
     // Thus, we use a Map so that we do not generate 2 files with the same filename.
     const additionalHtmlOutputFiles = new Map();
     // Generate index HTML file
     // If localization is enabled, index generation is handled in the inlining process.
     if (indexHtmlOptions) {
-        const { content, contentWithoutCriticalCssInlined, errors, warnings } = await (0, index_html_generator_1.generateIndexHtml)(initialFiles, outputFiles, {
-            ...options,
-            optimizationOptions,
-        }, locale);
-        indexContentOutputNoCssInlining = contentWithoutCriticalCssInlined;
+        const { csrContent, ssrContent, errors, warnings } = await (0, index_html_generator_1.generateIndexHtml)(initialFiles, outputFiles, options, locale);
         allErrors.push(...errors);
         allWarnings.push(...warnings);
-        additionalHtmlOutputFiles.set(indexHtmlOptions.output, (0, utils_1.createOutputFileFromText)(indexHtmlOptions.output, content, bundler_context_1.BuildOutputFileType.Browser));
-        if (ssrOptions) {
+        additionalHtmlOutputFiles.set(indexHtmlOptions.output, (0, utils_1.createOutputFileFromText)(indexHtmlOptions.output, csrContent, bundler_context_1.BuildOutputFileType.Browser));
+        if (ssrContent) {
             const serverIndexHtmlFilename = 'index.server.html';
-            additionalHtmlOutputFiles.set(serverIndexHtmlFilename, (0, utils_1.createOutputFileFromText)(serverIndexHtmlFilename, contentWithoutCriticalCssInlined, bundler_context_1.BuildOutputFileType.Server));
+            additionalHtmlOutputFiles.set(serverIndexHtmlFilename, (0, utils_1.createOutputFileFromText)(serverIndexHtmlFilename, ssrContent, bundler_context_1.BuildOutputFileType.Server));
+            ssrIndexContent = ssrContent;
         }
     }
     // Pre-render (SSG) and App-shell
     // If localization is enabled, prerendering is handled in the inlining process.
     if (prerenderOptions || appShellOptions) {
-        (0, node_assert_1.default)(indexContentOutputNoCssInlining, 'The "index" option is required when using the "ssg" or "appShell" options.');
-        const { output, warnings, errors, prerenderedRoutes: generatedRoutes, } = await (0, prerender_1.prerenderPages)(workspaceRoot, appShellOptions, prerenderOptions, outputFiles, assetFiles, indexContentOutputNoCssInlining, sourcemapOptions.scripts, optimizationOptions.styles.inlineCritical, environment_options_1.maxWorkers, verbose);
+        (0, node_assert_1.default)(ssrIndexContent, 'The "index" option is required when using the "ssg" or "appShell" options.');
+        const { output, warnings, errors, prerenderedRoutes: generatedRoutes, } = await (0, prerender_1.prerenderPages)(workspaceRoot, appShellOptions, prerenderOptions, outputFiles, assetFiles, ssrIndexContent, sourcemapOptions.scripts, optimizationOptions.styles.inlineCritical, environment_options_1.maxWorkers, verbose);
         allErrors.push(...errors);
         allWarnings.push(...warnings);
         prerenderedRoutes.push(...Array.from(generatedRoutes));

package/src/builders/application/options.js

@@ -21,7 +21,6 @@ const environment_options_1 = require("../../utils/environment-options");
 const i18n_options_1 = require("../../utils/i18n-options");
 const normalize_cache_1 = require("../../utils/normalize-cache");
 const postcss_configuration_1 = require("../../utils/postcss-configuration");
-const tailwind_1 = require("../../utils/tailwind");
 const schema_1 = require("./schema");
 /**
  * Normalize the user provided options by creating full paths for all path based options
@@ -108,34 +107,13 @@ async function normalizeOptions(context, projectName, options, extensions) {
             loaderExtensions[extension] = value;
         }
     }
-    const postcssConfiguration = await (0, postcss_configuration_1.loadPostcssConfiguration)(workspaceRoot, projectRoot);
+    // A configuration file can exist in the project or workspace root
+    const searchDirectories = await (0, postcss_configuration_1.generateSearchDirectories)([projectRoot, workspaceRoot]);
+    const postcssConfiguration = await (0, postcss_configuration_1.loadPostcssConfiguration)(searchDirectories);
     // Skip tailwind configuration if postcss is customized
     const tailwindConfiguration = postcssConfiguration
         ? undefined
-        : await getTailwindConfig(workspaceRoot, projectRoot, context);
-    const globalStyles = normalizeGlobalEntries(options.styles, 'styles');
-    const globalScripts = normalizeGlobalEntries(options.scripts, 'scripts');
-    let indexHtmlOptions;
-    // index can never have a value of `true` but in the schema it's of type `boolean`.
-    if (typeof options.index !== 'boolean') {
-        indexHtmlOptions = {
-            input: node_path_1.default.join(workspaceRoot, typeof options.index === 'string' ? options.index : options.index.input),
-            // The output file will be created within the configured output path
-            output: typeof options.index === 'string'
-                ? node_path_1.default.basename(options.index)
-                : options.index.output || 'index.html',
-            insertionOrder: [
-                ['polyfills', true],
-                ...globalStyles.filter((s) => s.initial).map((s) => [s.name, false]),
-                ...globalScripts.filter((s) => s.initial).map((s) => [s.name, false]),
-                ['main', true],
-                // [name, esm]
-            ],
-            transformer: extensions?.indexHtmlTransformer,
-            // Preload initial defaults to true
-            preloadInitial: typeof options.index !== 'object' || (options.index.preloadInitial ?? true),
-        };
-    }
+        : await getTailwindConfig(searchDirectories, workspaceRoot, context);
     let serverEntryPoint;
     if (options.server) {
         serverEntryPoint = node_path_1.default.join(workspaceRoot, options.server);
@@ -167,8 +145,48 @@ async function normalizeOptions(context, projectName, options, extensions) {
             route: 'shell',
         };
     }
-    if ((appShellOptions || ssrOptions || prerenderOptions) && !serverEntryPoint) {
-        throw new Error('The "server" option is required when enabling "ssr", "prerender" or "app-shell".');
+    const globalStyles = normalizeGlobalEntries(options.styles, 'styles');
+    const globalScripts = normalizeGlobalEntries(options.scripts, 'scripts');
+    let indexHtmlOptions;
+    // index can never have a value of `true` but in the schema it's of type `boolean`.
+    if (typeof options.index !== 'boolean') {
+        let indexOutput;
+        // The output file will be created within the configured output path
+        if (typeof options.index === 'string') {
+            /**
+             * If SSR is activated, create a distinct entry file for the `index.html`.
+             * This is necessary because numerous server/cloud providers automatically serve the `index.html` as a static file
+             * if it exists (handling SSG).
+             * For instance, accessing `foo.com/` would lead to `foo.com/index.html` being served instead of hitting the server.
+             */
+            const indexBaseName = node_path_1.default.basename(options.index);
+            indexOutput = ssrOptions && indexBaseName === 'index.html' ? 'index.csr.html' : indexBaseName;
+        }
+        else {
+            indexOutput = options.index.output || 'index.html';
+        }
+        indexHtmlOptions = {
+            input: node_path_1.default.join(workspaceRoot, typeof options.index === 'string' ? options.index : options.index.input),
+            output: indexOutput,
+            insertionOrder: [
+                ['polyfills', true],
+                ...globalStyles.filter((s) => s.initial).map((s) => [s.name, false]),
+                ...globalScripts.filter((s) => s.initial).map((s) => [s.name, false]),
+                ['main', true],
+                // [name, esm]
+            ],
+            transformer: extensions?.indexHtmlTransformer,
+            // Preload initial defaults to true
+            preloadInitial: typeof options.index !== 'object' || (options.index.preloadInitial ?? true),
+        };
+    }
+    if (appShellOptions || ssrOptions || prerenderOptions) {
+        if (!serverEntryPoint) {
+            throw new Error('The "server" option is required when enabling "ssr", "prerender" or "app-shell".');
+        }
+        if (!indexHtmlOptions) {
+            throw new Error('The "index" option cannot be set to false when enabling "ssr", "prerender" or "app-shell".');
+        }
     }
     // Initial options to keep
     const { allowedCommonJsDependencies, aot, baseHref, crossOrigin, externalDependencies, extractLicenses, inlineStyleLanguage = 'css', outExtension, serviceWorker, poll, polyfills, statsJson, stylePreprocessorOptions, subresourceIntegrity, verbose, watch, progress = true, externalPackages, deleteOutputPath, namedChunks, budgets, deployUrl, clearScreen, define, } = options;
@@ -230,13 +248,13 @@ async function normalizeOptions(context, projectName, options, extensions) {
     };
 }
 exports.normalizeOptions = normalizeOptions;
-async function getTailwindConfig(workspaceRoot, projectRoot, context) {
-    const tailwindConfigurationPath = await (0, tailwind_1.findTailwindConfigurationFile)(workspaceRoot, projectRoot);
+async function getTailwindConfig(searchDirectories, workspaceRoot, context) {
+    const tailwindConfigurationPath = (0, postcss_configuration_1.findTailwindConfiguration)(searchDirectories);
     if (!tailwindConfigurationPath) {
         return undefined;
     }
-    // Create a node resolver at the project root as a directory
-    const resolver = (0, node_module_1.createRequire)(projectRoot + '/');
+    // Create a node resolver from the configuration file
+    const resolver = (0, node_module_1.createRequire)(tailwindConfigurationPath);
     try {
         return {
             file: tailwindConfigurationPath,

package/src/builders/browser/index.js

@@ -229,7 +229,7 @@ function buildWebpackBrowser(options, context, transforms = {}) {
                         let hasErrors = false;
                         for (const [locale, outputPath] of outputPaths.entries()) {
                             try {
-                                const { content, warnings, errors } = await indexHtmlGenerator.process({
+                                const { csrContent: content, warnings, errors, } = await indexHtmlGenerator.process({
                                     baseHref: getLocaleBaseHref(i18n, locale) ?? options.baseHref,
                                     // i18nLocale is used when Ivy is disabled
                                     lang: locale || undefined,

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

@@ -260,7 +260,7 @@ function handleUpdate(normalizePath, generatedFiles, server, serverOptions, logg
     if (serverOptions.liveReload || serverOptions.hmr) {
         if (updatedFiles.every((f) => f.endsWith('.css'))) {
             const timestamp = Date.now();
-            server.ws.send({
+            server.hot.send({
                 type: 'update',
                 updates: updatedFiles.map((filePath) => {
                     return {
@@ -277,7 +277,7 @@ function handleUpdate(normalizePath, generatedFiles, server, serverOptions, logg
     }
     // Send reload command to clients
     if (serverOptions.liveReload) {
-        server.ws.send({
+        server.hot.send({
             type: 'full-reload',
             path: '*',
         });
@@ -332,7 +332,7 @@ function analyzeResultFiles(normalizePath, htmlIndexPath, resultFiles, generated
     }
 }
 async function setupServer(serverOptions, outputFiles, assets, preserveSymlinks, externalMetadata, ssr, prebundleTransformer, target, prebundleLoaderExtensions, extensionMiddleware, indexHtmlTransformer, thirdPartySourcemaps = false) {
-    const proxy = await (0, utils_2.loadProxyConfiguration)(serverOptions.workspaceRoot, serverOptions.proxyConfig, true);
+    const proxy = await (0, utils_2.loadProxyConfiguration)(serverOptions.workspaceRoot, serverOptions.proxyConfig);
     // 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

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

@@ -42,7 +42,7 @@ const service_worker_plugin_1 = require("../../tools/webpack/plugins/service-wor
 const stats_1 = require("../../tools/webpack/utils/stats");
 const utils_1 = require("../../utils");
 const color_1 = require("../../utils/color");
-const i18n_options_1 = require("../../utils/i18n-options");
+const i18n_webpack_1 = require("../../utils/i18n-webpack");
 const load_translations_1 = require("../../utils/load-translations");
 const package_chunk_sort_1 = require("../../utils/package-chunk-sort");
 const version_1 = require("../../utils/version");
@@ -266,7 +266,7 @@ async function setupLocalize(locale, i18n, browserOptions, webpackConfig, cacheO
             compiler.hooks.thisCompilation.tap('build-angular', (compilation) => {
                 if (i18n.shouldInline && i18nLoaderOptions.translation === undefined) {
                     // Reload translations
-                    (0, i18n_options_1.loadTranslations)(locale, localeDescription, context.workspaceRoot, loader, {
+                    (0, i18n_webpack_1.loadTranslations)(locale, localeDescription, context.workspaceRoot, loader, {
                         warn(message) {
                             (0, webpack_diagnostics_1.addWarning)(compilation, message);
                         },

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

@@ -156,7 +156,7 @@ exports.log = log;
 function startNodeServer(serverOutput, port, logger, inspectMode = false) {
     const outputPath = serverOutput.outputPath;
     const path = (0, path_1.join)(outputPath, 'main.js');
-    const env = { ...process.env, SSR_PORT: '' + port, PORT: '' + port };
+    const env = { ...process.env, PORT: '' + port };
     const args = ['--enable-source-maps', `"${path}"`];
     if (inspectMode) {
         args.unshift('--inspect-brk');
@@ -223,21 +223,24 @@ async function initBrowserSync(browserSyncInstance, nodeServerPort, options, con
         if (hasPathname) {
             const { createProxyMiddleware } = await Promise.resolve().then(() => __importStar(require('http-proxy-middleware')));
             // Remove leading slash
-            // eslint-disable-next-line @typescript-eslint/no-unused-expressions
-            (bsOptions.scriptPath = (p) => p.substring(1)),
-                (bsOptions.middleware = [
-                    createProxyMiddleware(defaultSocketIoPath, {
-                        target: url.format({
-                            protocol: 'http',
-                            hostname: host,
-                            port: bsPort,
-                            pathname: path,
-                        }),
-                        ws: true,
-                        logLevel: 'silent',
-                        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            bsOptions.scriptPath = (p) => p.substring(1);
+            bsOptions.middleware = [
+                createProxyMiddleware({
+                    pathFilter: defaultSocketIoPath,
+                    target: url.format({
+                        protocol: 'http',
+                        hostname: host,
+                        port: bsPort,
+                        pathname: path,
                     }),
-                ]);
+                    ws: true,
+                    logger: {
+                        info: () => { },
+                        warn: () => { },
+                        error: () => { },
+                    },
+                }),
+            ];
         }
     }
     if (proxyConfig) {
@@ -283,21 +286,18 @@ function getSslConfig(root, options) {
     return ssl;
 }
 async function getProxyConfig(root, proxyConfig) {
-    const proxy = await (0, utils_1.loadProxyConfiguration)(root, proxyConfig, false);
-    const createdProxies = [];
+    const proxy = await (0, utils_1.loadProxyConfiguration)(root, proxyConfig);
+    if (!proxy) {
+        return [];
+    }
     const { createProxyMiddleware } = await Promise.resolve().then(() => __importStar(require('http-proxy-middleware')));
-    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(
+    return Object.entries(proxy).map(([key, context]) => {
+        const filterRegExp = new RegExp(key);
+        return createProxyMiddleware({
+            pathFilter: (pathname) => filterRegExp.test(pathname),
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            createProxyMiddleware(key, context));
-        }
-    }
-    return createdProxies;
+            ...context,
+        });
+    });
 }
 exports.default = (0, architect_1.createBuilder)(execute);

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

@@ -341,16 +341,16 @@ exports.createCompilerPlugin = createCompilerPlugin;
 function createCompilerOptionsTransformer(setupWarnings, pluginOptions, preserveSymlinks) {
     return (compilerOptions) => {
         // target of 9 is ES2022 (using the number avoids an expensive import of typescript just for an enum)
-        if (compilerOptions.target === undefined || compilerOptions.target < 9) {
+        if (compilerOptions.target === undefined || compilerOptions.target < 9 /** ES2022 */) {
             // If 'useDefineForClassFields' is already defined in the users project leave the value as is.
             // Otherwise fallback to false due to https://github.com/microsoft/TypeScript/issues/45995
             // which breaks the deprecated `@Effects` NGRX decorator and potentially other existing code as well.
-            compilerOptions.target = 9;
+            compilerOptions.target = 9 /** ES2022 */;
             compilerOptions.useDefineForClassFields ??= false;
             // Only add the warning on the initial build
             setupWarnings?.push({
-                text: 'TypeScript compiler options "target" and "useDefineForClassFields" are set to "ES2022" and ' +
-                    '"false" respectively by the Angular CLI.',
+                text: `TypeScript compiler options 'target' and 'useDefineForClassFields' are set to 'ES2022' and ` +
+                    `'false' respectively by the Angular CLI.`,
                 location: { file: pluginOptions.tsconfig },
                 notes: [
                     {
@@ -377,6 +377,14 @@ function createCompilerOptionsTransformer(setupWarnings, pluginOptions, preserve
         else {
             compilerOptions.incremental = false;
         }
+        if (compilerOptions.module === undefined || compilerOptions.module < 5 /** ES2015 */) {
+            compilerOptions.module = 7; /** ES2022 */
+            setupWarnings?.push({
+                text: `TypeScript compiler options 'module' values 'CommonJS', 'UMD', 'System' and 'AMD' are not supported.`,
+                location: null,
+                notes: [{ text: `The 'module' option will be set to 'ES2022' instead.` }],
+            });
+        }
         return {
             ...compilerOptions,
             noEmitOnError: false,

package/src/tools/esbuild/index-html-generator.d.ts

@@ -8,8 +8,8 @@
 import { NormalizedApplicationBuildOptions } from '../../builders/application/options';
 import { BuildOutputFile, InitialFileRecord } from './bundler-context';
 export declare function generateIndexHtml(initialFiles: Map<string, InitialFileRecord>, outputFiles: BuildOutputFile[], buildOptions: NormalizedApplicationBuildOptions, lang?: string): Promise<{
-    content: string;
-    contentWithoutCriticalCssInlined: string;
+    csrContent: string;
+    ssrContent?: string;
     warnings: string[];
     errors: string[];
 }>;

package/src/tools/esbuild/index-html-generator.js

@@ -6,29 +6,6 @@
  * Use of this source code is governed by an MIT-style license that can be
  * found in the LICENSE file at https://angular.io/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 };
 };
@@ -78,19 +55,16 @@ async function generateIndexHtml(initialFiles, outputFiles, buildOptions, lang)
         indexPath: indexHtmlOptions.input,
         entrypoints: indexHtmlOptions.insertionOrder,
         sri: subresourceIntegrity,
-        optimization: {
-            ...optimizationOptions,
-            styles: {
-                ...optimizationOptions.styles,
-                inlineCritical: false, // Disable critical css inline as for SSR and SSG this will be done during rendering.
-            },
-        },
+        optimization: optimizationOptions,
         crossOrigin: crossOrigin,
         deployUrl: buildOptions.publicPath,
         postTransform: indexHtmlOptions.transformer,
+        generateDedicatedSSRContent: !!(buildOptions.ssrOptions ||
+            buildOptions.prerenderOptions ||
+            buildOptions.appShellOptions),
     });
     indexHtmlGenerator.readAsset = readAsset;
-    const transformResult = await indexHtmlGenerator.process({
+    return indexHtmlGenerator.process({
         baseHref,
         lang,
         outputPath: virtualOutputPath,
@@ -103,27 +77,5 @@ async function generateIndexHtml(initialFiles, outputFiles, buildOptions, lang)
         })),
         hints,
     });
-    const contentWithoutCriticalCssInlined = transformResult.content;
-    if (!optimizationOptions.styles.inlineCritical) {
-        return {
-            ...transformResult,
-            contentWithoutCriticalCssInlined,
-        };
-    }
-    const { InlineCriticalCssProcessor } = await Promise.resolve().then(() => __importStar(require('../../utils/index-file/inline-critical-css')));
-    const inlineCriticalCssProcessor = new InlineCriticalCssProcessor({
-        minify: false, // CSS has already been minified during the build.
-        deployUrl: buildOptions.publicPath,
-        readAsset,
-    });
-    const { content, errors, warnings } = await inlineCriticalCssProcessor.process(contentWithoutCriticalCssInlined, {
-        outputPath: virtualOutputPath,
-    });
-    return {
-        errors: [...transformResult.errors, ...errors],
-        warnings: [...transformResult.warnings, ...warnings],
-        content,
-        contentWithoutCriticalCssInlined,
-    };
 }
 exports.generateIndexHtml = generateIndexHtml;

package/src/tools/esbuild/javascript-transformer.js

@@ -87,7 +87,11 @@ class JavaScriptTransformer {
                 skipLinker,
                 sideEffects,
                 ...this.#commonOptions,
-            }, { transferList: [data.buffer] }));
+            }, {
+                // The below is disable as with Yarn PNP this causes build failures with the below message
+                // `Unable to deserialize cloned data`.
+                transferList: process.versions.pnp ? undefined : [data.buffer],
+            }));
             // If there is a cache then store the result
             if (this.cache && cacheKey) {
                 try {

package/src/tools/esbuild/stylesheets/css-resource-plugin.js

@@ -30,31 +30,38 @@ function createCssResourcePlugin(cache) {
         name: 'angular-css-resource',
         setup(build) {
             build.onResolve({ filter: /.*/ }, async (args) => {
+                const { importer, path, kind, resolveDir, namespace, pluginData = {} } = args;
                 // Only attempt to resolve url tokens which only exist inside CSS.
                 // Also, skip this plugin if already attempting to resolve the url-token.
-                if (args.kind !== 'url-token' || args.pluginData?.[CSS_RESOURCE_RESOLUTION]) {
+                if (kind !== 'url-token' || pluginData[CSS_RESOURCE_RESOLUTION]) {
                     return null;
                 }
+                let [containingDir, resourceUrl] = path.split('||file:', 2);
+                if (resourceUrl === undefined) {
+                    // This can happen due to early exit checks in rebasing-importer
+                    // logic such as when the url is an external URL.
+                    resourceUrl = containingDir;
+                    containingDir = '';
+                }
                 // If root-relative, absolute or protocol relative url, mark as external to leave the
                 // path/URL in place.
-                if (/^((?:\w+:)?\/\/|data:|chrome:|#|\/)/.test(args.path)) {
+                if (/^((?:\w+:)?\/\/|data:|chrome:|#|\/)/.test(resourceUrl)) {
                     return {
-                        path: args.path,
+                        path: resourceUrl,
                         external: true,
                     };
                 }
-                const { importer, kind, resolveDir, namespace, pluginData = {} } = args;
                 pluginData[CSS_RESOURCE_RESOLUTION] = true;
-                const result = await build.resolve(args.path, {
+                const result = await build.resolve(resourceUrl, {
                     importer,
                     kind,
                     namespace,
                     pluginData,
-                    resolveDir,
+                    resolveDir: (0, node_path_1.join)(resolveDir, containingDir),
                 });
                 if (result.errors.length) {
                     const error = result.errors[0];
-                    if (args.path[0] === '~') {
+                    if (resourceUrl[0] === '~') {
                         error.notes = [
                             {
                                 location: null,
@@ -62,7 +69,7 @@ function createCssResourcePlugin(cache) {
                             },
                         ];
                     }
-                    else if (args.path[0] === '^') {
+                    else if (resourceUrl[0] === '^') {
                         error.notes = [
                             {
                                 location: null,

package/src/tools/esbuild/utils.js

@@ -20,7 +20,7 @@ const node_url_1 = require("node:url");
 const node_zlib_1 = require("node:zlib");
 const semver_1 = require("semver");
 const spinner_1 = require("../../utils/spinner");
-const stats_1 = require("../webpack/utils/stats");
+const stats_table_1 = require("../../utils/stats-table");
 const bundler_context_1 = require("./bundler-context");
 function logBuildStats(metafile, initial, budgetFailures, colors, changedFiles, estimatedTransferSizes, ssrOutputEnabled, verbose) {
     const browserStats = [];
@@ -65,7 +65,7 @@ function logBuildStats(metafile, initial, budgetFailures, colors, changedFiles,
         }
     }
     if (browserStats.length > 0 || serverStats.length > 0) {
-        const tableText = (0, stats_1.generateEsbuildBuildStatsTable)([browserStats, serverStats], colors, unchangedCount === 0, !!estimatedTransferSizes, budgetFailures, verbose);
+        const tableText = (0, stats_table_1.generateEsbuildBuildStatsTable)([browserStats, serverStats], colors, unchangedCount === 0, !!estimatedTransferSizes, budgetFailures, verbose);
         return tableText + '\n';
     }
     else if (changedFiles !== undefined) {