@angular/build 19.0.0-next.10 → 19.0.0-next.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@angular/build",
-  "version": "19.0.0-next.10",
+  "version": "19.0.0-next.11",
   "description": "Official build system for Angular",
   "keywords": [
     "Angular CLI",
@@ -23,41 +23,41 @@
   "builders": "builders.json",
   "dependencies": {
     "@ampproject/remapping": "2.3.0",
-    "@angular-devkit/architect": "0.1900.0-next.10",
-    "@babel/core": "7.25.7",
+    "@angular-devkit/architect": "0.1900.0-next.11",
+    "@babel/core": "7.25.8",
     "@babel/helper-annotate-as-pure": "7.25.7",
     "@babel/helper-split-export-declaration": "7.24.7",
     "@babel/plugin-syntax-import-attributes": "7.25.7",
     "@inquirer/confirm": "5.0.0",
     "@vitejs/plugin-basic-ssl": "1.1.0",
     "browserslist": "^4.23.0",
-    "critters": "0.0.24",
+    "critters": "0.0.25",
     "esbuild": "0.24.0",
     "fast-glob": "3.3.2",
     "https-proxy-agent": "7.0.5",
     "istanbul-lib-instrument": "6.0.3",
     "listr2": "8.2.5",
-    "magic-string": "0.30.11",
+    "magic-string": "0.30.12",
     "mrmime": "2.0.0",
     "parse5-html-rewriting-stream": "7.0.0",
     "picomatch": "4.0.2",
     "piscina": "4.7.0",
     "rollup": "4.24.0",
-    "sass": "1.79.4",
+    "sass": "1.79.5",
     "semver": "7.6.3",
-    "vite": "5.4.8",
+    "vite": "5.4.9",
     "watchpack": "2.4.2"
   },
   "optionalDependencies": {
     "lmdb": "3.1.3"
   },
   "peerDependencies": {
-    "@angular/compiler": "^19.0.0-next.0",
-    "@angular/compiler-cli": "^19.0.0-next.0",
-    "@angular/localize": "^19.0.0-next.0",
-    "@angular/platform-server": "^19.0.0-next.0",
-    "@angular/service-worker": "^19.0.0-next.0",
-    "@angular/ssr": "^19.0.0-next.10",
+    "@angular/compiler": "^19.0.0-next.9",
+    "@angular/compiler-cli": "^19.0.0-next.9",
+    "@angular/localize": "^19.0.0-next.9",
+    "@angular/platform-server": "^19.0.0-next.9",
+    "@angular/service-worker": "^19.0.0-next.9",
+    "@angular/ssr": "^19.0.0-next.11",
     "less": "^4.2.0",
     "postcss": "^8.4.0",
     "tailwindcss": "^2.0.0 || ^3.0.0",

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

@@ -9,7 +9,7 @@ import type { BuilderContext } from '@angular-devkit/architect';
 import type { Plugin } from 'esbuild';
 import { I18nOptions } from '../../utils/i18n-options';
 import { IndexHtmlTransform } from '../../utils/index-file/index-html-generator';
-import { Schema as ApplicationBuilderOptions, I18NTranslation, OutputMode, OutputPathClass } from './schema';
+import { Schema as ApplicationBuilderOptions, ExperimentalPlatform, I18NTranslation, OutputMode, OutputPathClass } from './schema';
 /**
  * The filename for the client-side rendered HTML template.
  * This template is used for client-side rendering (CSR) in a web application.
@@ -119,8 +119,10 @@ export declare function normalizeOptions(context: BuilderContext, projectName: s
     outputMode: OutputMode | undefined;
     ssrOptions: {
         entry?: undefined;
+        platform?: undefined;
     } | {
         entry: string | undefined;
+        platform: ExperimentalPlatform;
     } | undefined;
     verbose: boolean | undefined;
     watch: boolean | undefined;

package/src/builders/application/options.js

@@ -153,9 +153,10 @@ async function normalizeOptions(context, projectName, options, extensions) {
         ssrOptions = {};
     }
     else if (typeof options.ssr === 'object') {
-        const { entry } = options.ssr;
+        const { entry, experimentalPlatform = schema_1.ExperimentalPlatform.Node } = options.ssr;
         ssrOptions = {
             entry: entry && node_path_1.default.join(workspaceRoot, entry),
+            platform: experimentalPlatform,
         };
     }
     let appShellOptions;

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

@@ -61,7 +61,9 @@ export interface ResultMessage {
 }
 export interface ComponentUpdateResult extends BaseResult {
     kind: ResultKind.ComponentUpdate;
-    id: string;
-    type: 'style' | 'template';
-    content: string;
+    updates: {
+        id: string;
+        type: 'style' | 'template';
+        content: string;
+    }[];
 }

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

@@ -500,6 +500,37 @@ export interface SsrClass {
      * The server entry-point that when executed will spawn the web server.
      */
     entry?: string;
+    /**
+     * Specifies the platform for which the server bundle is generated. This affects the APIs
+     * and modules available in the server-side code.
+     *
+     * - `node`:  (Default) Generates a bundle optimized for Node.js environments.
+     * - `neutral`: Generates a platform-neutral bundle suitable for environments like edge
+     * workers, and other serverless platforms. This option avoids using Node.js-specific APIs,
+     * making the bundle more portable.
+     *
+     * Please note that this feature does not provide polyfills for Node.js modules.
+     * Additionally, it is experimental, and the schematics may undergo changes in future
+     * versions.
+     */
+    experimentalPlatform?: ExperimentalPlatform;
+}
+/**
+ * Specifies the platform for which the server bundle is generated. This affects the APIs
+ * and modules available in the server-side code.
+ *
+ * - `node`:  (Default) Generates a bundle optimized for Node.js environments.
+ * - `neutral`: Generates a platform-neutral bundle suitable for environments like edge
+ * workers, and other serverless platforms. This option avoids using Node.js-specific APIs,
+ * making the bundle more portable.
+ *
+ * Please note that this feature does not provide polyfills for Node.js modules.
+ * Additionally, it is experimental, and the schematics may undergo changes in future
+ * versions.
+ */
+export declare enum ExperimentalPlatform {
+    Neutral = "neutral",
+    Node = "node"
 }
 /**
  * Options to pass to style preprocessors.
@@ -509,6 +540,32 @@ export interface StylePreprocessorOptions {
      * Paths to include. Paths will be resolved to workspace root.
      */
     includePaths?: string[];
+    /**
+     * Options to pass to the sass preprocessor.
+     */
+    sass?: Sass;
+}
+/**
+ * Options to pass to the sass preprocessor.
+ */
+export interface Sass {
+    /**
+     * A set of deprecations to treat as fatal. If a deprecation warning of any provided type is
+     * encountered during compilation, the compiler will error instead. If a Version is
+     * provided, then all deprecations that were active in that compiler version will be treated
+     * as fatal.
+     */
+    fatalDeprecations?: string[];
+    /**
+     * A set of future deprecations to opt into early. Future deprecations passed here will be
+     * treated as active by the compiler, emitting warnings as necessary.
+     */
+    futureDeprecations?: string[];
+    /**
+     * A set of active deprecations to ignore. If a deprecation warning of any provided type is
+     * encountered during compilation, the compiler will ignore it instead.
+     */
+    silenceDeprecations?: string[];
 }
 export type StyleElement = StyleClass | string;
 export interface StyleClass {

package/src/builders/application/schema.js

@@ -2,7 +2,7 @@
 // THIS FILE IS AUTOMATICALLY GENERATED. TO UPDATE THIS FILE YOU NEED TO CHANGE THE
 // CORRESPONDING JSON SCHEMA FILE, THEN RUN devkit-admin build (or bazel build ...).
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.OutputMode = exports.OutputHashing = exports.InlineStyleLanguage = exports.I18NTranslation = exports.CrossOrigin = exports.Type = void 0;
+exports.ExperimentalPlatform = exports.OutputMode = exports.OutputHashing = exports.InlineStyleLanguage = exports.I18NTranslation = exports.CrossOrigin = exports.Type = void 0;
 /**
  * The type of budget.
  */
@@ -66,3 +66,21 @@ var OutputMode;
     OutputMode["Server"] = "server";
     OutputMode["Static"] = "static";
 })(OutputMode || (exports.OutputMode = OutputMode = {}));
+/**
+ * Specifies the platform for which the server bundle is generated. This affects the APIs
+ * and modules available in the server-side code.
+ *
+ * - `node`:  (Default) Generates a bundle optimized for Node.js environments.
+ * - `neutral`: Generates a platform-neutral bundle suitable for environments like edge
+ * workers, and other serverless platforms. This option avoids using Node.js-specific APIs,
+ * making the bundle more portable.
+ *
+ * Please note that this feature does not provide polyfills for Node.js modules.
+ * Additionally, it is experimental, and the schematics may undergo changes in future
+ * versions.
+ */
+var ExperimentalPlatform;
+(function (ExperimentalPlatform) {
+    ExperimentalPlatform["Neutral"] = "neutral";
+    ExperimentalPlatform["Node"] = "node";
+})(ExperimentalPlatform || (exports.ExperimentalPlatform = ExperimentalPlatform = {}));

package/src/builders/application/schema.json

@@ -125,6 +125,34 @@
             "type": "string"
           },
           "default": []
+        },
+        "sass": {
+          "description": "Options to pass to the sass preprocessor.",
+          "type": "object",
+          "properties": {
+            "fatalDeprecations": {
+              "description": "A set of deprecations to treat as fatal. If a deprecation warning of any provided type is encountered during compilation, the compiler will error instead. If a Version is provided, then all deprecations that were active in that compiler version will be treated as fatal.",
+              "type": "array",
+              "items": {
+                "type": "string"
+              }
+            },
+            "silenceDeprecations": {
+              "description": " A set of active deprecations to ignore. If a deprecation warning of any provided type is encountered during compilation, the compiler will ignore it instead.",
+              "type": "array",
+              "items": {
+                "type": "string"
+              }
+            },
+            "futureDeprecations": {
+              "description": "A set of future deprecations to opt into early. Future deprecations passed here will be treated as active by the compiler, emitting warnings as necessary.",
+              "type": "array",
+              "items": {
+                "type": "string"
+              }
+            }
+          },
+          "additionalProperties": false
         }
       },
       "additionalProperties": false
@@ -518,6 +546,11 @@
             "entry": {
               "type": "string",
               "description": "The server entry-point that when executed will spawn the web server."
+            },
+            "experimentalPlatform": {
+              "description": "Specifies the platform for which the server bundle is generated. This affects the APIs and modules available in the server-side code. \n\n- `node`:  (Default) Generates a bundle optimized for Node.js environments. \n- `neutral`: Generates a platform-neutral bundle suitable for environments like edge workers, and other serverless platforms. This option avoids using Node.js-specific APIs, making the bundle more portable. \n\nPlease note that this feature does not provide polyfills for Node.js modules. Additionally, it is experimental, and the schematics may undergo changes in future versions.",
+              "default": "node",
+              "enum": ["node", "neutral"]
             }
           },
           "additionalProperties": false

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

@@ -32,6 +32,6 @@ export declare function serveWithVite(serverOptions: NormalizedDevServerOptions,
     middleware?: Connect.NextHandleFunction[];
     buildPlugins?: Plugin[];
 }): AsyncIterableIterator<DevServerBuilderOutput>;
-export declare function setupServer(serverOptions: NormalizedDevServerOptions, outputFiles: Map<string, OutputFileRecord>, assets: Map<string, string>, preserveSymlinks: boolean | undefined, externalMetadata: DevServerExternalResultMetadata, ssrMode: ServerSsrMode, prebundleTransformer: JavaScriptTransformer, target: string[], zoneless: boolean, usedComponentStyles: Map<string, string[]>, prebundleLoaderExtensions: EsbuildLoaderOption | undefined, extensionMiddleware?: Connect.NextHandleFunction[], indexHtmlTransformer?: (content: string) => Promise<string>, thirdPartySourcemaps?: boolean): Promise<InlineConfig>;
+export declare function setupServer(serverOptions: NormalizedDevServerOptions, outputFiles: Map<string, OutputFileRecord>, assets: Map<string, string>, preserveSymlinks: boolean | undefined, externalMetadata: DevServerExternalResultMetadata, ssrMode: ServerSsrMode, prebundleTransformer: JavaScriptTransformer, target: string[], zoneless: boolean, usedComponentStyles: Map<string, Set<string>>, templateUpdates: Map<string, string>, prebundleLoaderExtensions: EsbuildLoaderOption | undefined, extensionMiddleware?: Connect.NextHandleFunction[], indexHtmlTransformer?: (content: string) => Promise<string>, thirdPartySourcemaps?: boolean): Promise<InlineConfig>;
 type EsbuildLoaderOption = Exclude<DepOptimizationConfig['esbuildOptions'], undefined>['loader'];
 export {};

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

@@ -92,8 +92,13 @@ async function* serveWithVite(serverOptions, builderName, builderAction, context
         // https://nodejs.org/api/process.html#processsetsourcemapsenabledval
         process.setSourceMapsEnabled(true);
     }
-    // TODO: Enable by default once full support across CLI and FW is integrated
-    browserOptions.externalRuntimeStyles = environment_options_1.useComponentStyleHmr;
+    // Enable to support component style hot reloading (`NG_HMR_CSTYLES=0` can be used to disable)
+    browserOptions.externalRuntimeStyles = !!serverOptions.liveReload && environment_options_1.useComponentStyleHmr;
+    if (browserOptions.externalRuntimeStyles) {
+        // Preload the @angular/compiler package to avoid first stylesheet request delays.
+        // Once @angular/build is native ESM, this should be re-evaluated.
+        void (0, load_esm_1.loadEsmModule)('@angular/compiler');
+    }
     // Setup the prebundling transformer that will be shared across Vite prebundling requests
     const prebundleTransformer = new internal_1.JavaScriptTransformer(
     // Always enable JIT linking to support applications built with and without AOT.
@@ -116,6 +121,7 @@ async function* serveWithVite(serverOptions, builderName, builderAction, context
         explicitServer: [],
     };
     const usedComponentStyles = new Map();
+    const templateUpdates = new Map();
     // Add cleanup logic via a builder teardown.
     let deferred;
     context.addTeardown(async () => {
@@ -157,6 +163,8 @@ async function* serveWithVite(serverOptions, builderName, builderAction, context
                         assetFiles.set('/' + normalizePath(outputPath), normalizePath(file.inputPath));
                     }
                 }
+                // Clear stale template updates on a code rebuilds
+                templateUpdates.clear();
                 // Analyze result files for changes
                 analyzeResultFiles(normalizePath, htmlIndexPath, result.files, generatedFiles);
                 break;
@@ -166,8 +174,18 @@ async function* serveWithVite(serverOptions, builderName, builderAction, context
                 break;
             case results_1.ResultKind.ComponentUpdate:
                 (0, node_assert_1.default)(serverOptions.hmr, 'Component updates are only supported with HMR enabled.');
-                // TODO: Implement support -- application builder currently does not use
-                break;
+                (0, node_assert_1.default)(server, 'Builder must provide an initial full build before component update results.');
+                for (const componentUpdate of result.updates) {
+                    if (componentUpdate.type === 'template') {
+                        templateUpdates.set(componentUpdate.id, componentUpdate.content);
+                        server.ws.send('angular:component-update', {
+                            id: componentUpdate.id,
+                            timestamp: Date.now(),
+                        });
+                    }
+                }
+                context.logger.info('Component update sent to client(s).');
+                continue;
             default:
                 context.logger.warn(`Unknown result kind [${result.kind}] provided by build.`);
                 continue;
@@ -259,7 +277,7 @@ async function* serveWithVite(serverOptions, builderName, builderAction, context
                 });
             }
             // Setup server and start listening
-            const serverConfiguration = await setupServer(serverOptions, generatedFiles, assetFiles, browserOptions.preserveSymlinks, externalMetadata, ssrMode, prebundleTransformer, target, (0, internal_1.isZonelessApp)(polyfills), usedComponentStyles, browserOptions.loader, extensions?.middleware, transformers?.indexHtml, thirdPartySourcemaps);
+            const serverConfiguration = await setupServer(serverOptions, generatedFiles, assetFiles, browserOptions.preserveSymlinks, externalMetadata, ssrMode, prebundleTransformer, target, (0, internal_1.isZonelessApp)(polyfills), usedComponentStyles, templateUpdates, browserOptions.loader, extensions?.middleware, transformers?.indexHtml, thirdPartySourcemaps);
             server = await createServer(serverConfiguration);
             await server.listen();
             const urls = server.resolvedUrls;
@@ -328,7 +346,7 @@ async function handleUpdate(normalizePath, generatedFiles, server, serverOptions
                     // are not typically reused across components.
                     const componentIds = usedComponentStyles.get(filePath);
                     if (componentIds) {
-                        return componentIds.map((id) => ({
+                        return Array.from(componentIds).map((id) => ({
                             type: 'css-update',
                             timestamp,
                             path: `${filePath}?ngcomp` + (id ? `=${id}` : ''),
@@ -409,7 +427,7 @@ function analyzeResultFiles(normalizePath, htmlIndexPath, resultFiles, generated
         }
     }
 }
-async function setupServer(serverOptions, outputFiles, assets, preserveSymlinks, externalMetadata, ssrMode, prebundleTransformer, target, zoneless, usedComponentStyles, prebundleLoaderExtensions, extensionMiddleware, indexHtmlTransformer, thirdPartySourcemaps = false) {
+async function setupServer(serverOptions, outputFiles, assets, preserveSymlinks, externalMetadata, ssrMode, prebundleTransformer, target, zoneless, usedComponentStyles, templateUpdates, prebundleLoaderExtensions, extensionMiddleware, indexHtmlTransformer, thirdPartySourcemaps = false) {
     const proxy = await (0, utils_1.loadProxyConfiguration)(serverOptions.workspaceRoot, serverOptions.proxyConfig);
     // dynamically import Vite for ESM compatibility
     const { normalizePath } = await (0, load_esm_1.loadEsmModule)('vite');
@@ -502,6 +520,7 @@ async function setupServer(serverOptions, outputFiles, assets, preserveSymlinks,
                 indexHtmlTransformer,
                 extensionMiddleware,
                 usedComponentStyles,
+                templateUpdates,
                 ssrMode,
             }),
             (0, plugins_1.createRemoveIdPrefixPlugin)(externalMetadata.explicitBrowser),

package/src/tools/angular/angular-host.d.ts

@@ -14,7 +14,7 @@ export interface AngularHostOptions {
     sourceFileCache?: Map<string, ts.SourceFile>;
     modifiedFiles?: Set<string>;
     externalStylesheets?: Map<string, string>;
-    transformStylesheet(data: string, containingFile: string, stylesheetFile?: string, order?: number): Promise<string | null>;
+    transformStylesheet(data: string, containingFile: string, stylesheetFile?: string, order?: number, className?: string): Promise<string | null>;
     processWebWorker(workerFile: string, containingFile: string): string;
 }
 /**

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

@@ -113,10 +113,7 @@ function createAngularCompilerHost(typescript, compilerOptions, hostOptions) {
         if (data.trim().length === 0) {
             return { content: '' };
         }
-        const result = await hostOptions.transformStylesheet(data, context.containingFile, context.resourceFile ?? undefined, 
-        // TODO: Remove once available in compiler-cli types
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        context.order);
+        const result = await hostOptions.transformStylesheet(data, context.containingFile, context.resourceFile ?? undefined, context.order, context.className);
         return typeof result === 'string' ? { content: result } : null;
     };
     host.resourceNameToFileName = function (resourceName, containingFile) {

package/src/tools/angular/compilation/parallel-compilation.js

@@ -37,9 +37,9 @@ class ParallelCompilation extends angular_compilation_1.AngularCompilation {
     initialize(tsconfig, hostOptions, compilerOptionsTransformer) {
         const stylesheetChannel = new node_worker_threads_1.MessageChannel();
         // The request identifier is required because Angular can issue multiple concurrent requests
-        stylesheetChannel.port1.on('message', ({ requestId, data, containingFile, stylesheetFile }) => {
+        stylesheetChannel.port1.on('message', ({ requestId, data, containingFile, stylesheetFile, order, className }) => {
             hostOptions
-                .transformStylesheet(data, containingFile, stylesheetFile)
+                .transformStylesheet(data, containingFile, stylesheetFile, order, className)
                 .then((value) => stylesheetChannel.port1.postMessage({ requestId, value }))
                 .catch((error) => stylesheetChannel.port1.postMessage({ requestId, error }));
         });

package/src/tools/angular/compilation/parallel-worker.js

@@ -37,7 +37,7 @@ async function initialize(request) {
         fileReplacements: request.fileReplacements,
         sourceFileCache,
         modifiedFiles: sourceFileCache.modifiedFiles,
-        transformStylesheet(data, containingFile, stylesheetFile) {
+        transformStylesheet(data, containingFile, stylesheetFile, order, className) {
             const requestId = (0, node_crypto_1.randomUUID)();
             const resultPromise = new Promise((resolve, reject) => stylesheetRequests.set(requestId, [resolve, reject]));
             request.stylesheetPort.postMessage({
@@ -45,6 +45,8 @@ async function initialize(request) {
                 data,
                 containingFile,
                 stylesheetFile,
+                order,
+                className,
             });
             return resultPromise;
         },

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

@@ -102,7 +102,7 @@ function createCompilerPlugin(pluginOptions, styleOptions) {
             // Determines if transpilation should be handle by TypeScript or esbuild
             let useTypeScriptTranspilation = true;
             // Track incremental component stylesheet builds
-            const stylesheetBundler = new component_stylesheets_1.ComponentStylesheetBundler(styleOptions, pluginOptions.incremental);
+            const stylesheetBundler = new component_stylesheets_1.ComponentStylesheetBundler(styleOptions, styleOptions.inlineStyleLanguage, pluginOptions.incremental);
             let sharedTSCompilationState;
             // To fully invalidate files, track resource referenced files and their referencing source
             const referencedFileTracker = new file_reference_tracker_1.FileReferenceTracker();
@@ -140,7 +140,7 @@ function createCompilerPlugin(pluginOptions, styleOptions) {
                     fileReplacements: pluginOptions.fileReplacements,
                     modifiedFiles,
                     sourceFileCache: pluginOptions.sourceFileCache,
-                    async transformStylesheet(data, containingFile, stylesheetFile, order) {
+                    async transformStylesheet(data, containingFile, stylesheetFile, order, className) {
                         let stylesheetResult;
                         // Stylesheet file only exists for external stylesheets
                         if (stylesheetFile) {
@@ -148,8 +148,8 @@ function createCompilerPlugin(pluginOptions, styleOptions) {
                         }
                         else {
                             stylesheetResult = await stylesheetBundler.bundleInline(data, containingFile, 
-                            // Inline stylesheets from a template style element are always CSS
-                            containingFile.endsWith('.html') ? 'css' : styleOptions.inlineStyleLanguage, 
+                            // Inline stylesheets from a template style element are always CSS; Otherwise, use default.
+                            containingFile.endsWith('.html') ? 'css' : undefined, 
                             // When external runtime styles are enabled, an identifier for the style that does not change
                             // based on the content is required to avoid emitted JS code changes. Any JS code changes will
                             // invalid the output and force a full page reload for HMR cases. The containing file and order
@@ -158,6 +158,7 @@ function createCompilerPlugin(pluginOptions, styleOptions) {
                                 ? (0, node_crypto_1.createHash)('sha-256')
                                     .update(containingFile)
                                     .update((order ?? 0).toString())
+                                    .update(className ?? '')
                                     .digest('hex')
                                 : undefined);
                         }
@@ -215,7 +216,7 @@ function createCompilerPlugin(pluginOptions, styleOptions) {
                 let referencedFiles;
                 let externalStylesheets;
                 try {
-                    const initializationResult = await compilation.initialize(pluginOptions.tsconfig, hostOptions, createCompilerOptionsTransformer(setupWarnings, pluginOptions, preserveSymlinks));
+                    const initializationResult = await compilation.initialize(pluginOptions.tsconfig, hostOptions, createCompilerOptionsTransformer(setupWarnings, pluginOptions, preserveSymlinks, build.initialOptions.conditions));
                     shouldTsIgnoreJs = !initializationResult.compilerOptions.allowJs;
                     // Isolated modules option ensures safe non-TypeScript transpilation.
                     // Typescript printing support for sourcemaps is not yet integrated.
@@ -344,9 +345,22 @@ function createCompilerPlugin(pluginOptions, styleOptions) {
                     // Store as the returned Uint8Array to allow caching the fully transformed code
                     typeScriptFileCache.set(request, contents);
                 }
+                let loader;
+                if (useTypeScriptTranspilation || isJS) {
+                    // TypeScript has transpiled to JS or is already JS
+                    loader = 'js';
+                }
+                else if (request.at(-1) === 'x') {
+                    // TSX and TS have different syntax rules. Only set if input is a TSX file.
+                    loader = 'tsx';
+                }
+                else {
+                    // Otherwise, directly bundle TS
+                    loader = 'ts';
+                }
                 return {
                     contents,
-                    loader: useTypeScriptTranspilation || isJS ? 'js' : 'ts',
+                    loader,
                 };
             });
             build.onLoad({ filter: /\.[cm]?js$/ }, (0, load_result_cache_1.createCachedLoad)(pluginOptions.loadResultCache, async (args) => {
@@ -361,7 +375,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, pluginOptions.loadResultCache);
+                (0, jit_plugin_callbacks_1.setupJitPluginCallbacks)(build, stylesheetBundler, additionalResults, pluginOptions.loadResultCache);
             }
             build.onEnd((result) => {
                 // Ensure other compilations are unblocked if the main compilation throws during start
@@ -415,7 +429,7 @@ async function bundleExternalStylesheet(stylesheetBundler, stylesheetFile, exter
         metafile,
     });
 }
-function createCompilerOptionsTransformer(setupWarnings, pluginOptions, preserveSymlinks) {
+function createCompilerOptionsTransformer(setupWarnings, pluginOptions, preserveSymlinks, customConditions) {
     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 /** ES2022 */) {
@@ -463,6 +477,11 @@ function createCompilerOptionsTransformer(setupWarnings, pluginOptions, preserve
                 notes: [{ text: `The 'module' option will be set to 'ES2022' instead.` }],
             });
         }
+        // Synchronize custom resolve conditions.
+        // Set if using the supported bundler resolution mode (bundler is the default in new projects)
+        if (compilerOptions.moduleResolution === 100 /* ModuleResolutionKind.Bundler */) {
+            compilerOptions.customConditions = customConditions;
+        }
         return {
             ...compilerOptions,
             noEmitOnError: false,

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

@@ -15,13 +15,14 @@ import { BundleStylesheetOptions } from '../stylesheets/bundle-options';
 export declare class ComponentStylesheetBundler {
     #private;
     private readonly options;
+    private readonly defaultInlineLanguage;
     private readonly incremental;
     /**
      *
      * @param options An object containing the stylesheet bundling options.
      * @param cache A load result cache to use when bundling.
      */
-    constructor(options: BundleStylesheetOptions, incremental: boolean);
+    constructor(options: BundleStylesheetOptions, defaultInlineLanguage: string, incremental: boolean);
     bundleFile(entry: string, externalId?: string | boolean): Promise<{
         errors: import("esbuild").Message[] | undefined;
         warnings: import("esbuild").Message[];
@@ -30,7 +31,7 @@ export declare class ComponentStylesheetBundler {
         metafile: import("esbuild").Metafile | undefined;
         referencedFiles: Set<string> | undefined;
     }>;
-    bundleInline(data: string, filename: string, language: string, externalId?: string): Promise<{
+    bundleInline(data: string, filename: string, language?: string, externalId?: string): Promise<{
         errors: import("esbuild").Message[] | undefined;
         warnings: import("esbuild").Message[];
         contents: string;

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

@@ -24,6 +24,7 @@ const bundle_options_1 = require("../stylesheets/bundle-options");
  */
 class ComponentStylesheetBundler {
     options;
+    defaultInlineLanguage;
     incremental;
     #fileContexts = new cache_1.MemoryCache();
     #inlineContexts = new cache_1.MemoryCache();
@@ -32,8 +33,9 @@ class ComponentStylesheetBundler {
      * @param options An object containing the stylesheet bundling options.
      * @param cache A load result cache to use when bundling.
      */
-    constructor(options, incremental) {
+    constructor(options, defaultInlineLanguage, incremental) {
         this.options = options;
+        this.defaultInlineLanguage = defaultInlineLanguage;
         this.incremental = incremental;
     }
     async bundleFile(entry, externalId) {
@@ -53,7 +55,7 @@ class ComponentStylesheetBundler {
         });
         return this.extractResult(await bundlerContext.bundle(), bundlerContext.watchFiles, !!externalId);
     }
-    async bundleInline(data, filename, language, externalId) {
+    async bundleInline(data, filename, language = this.defaultInlineLanguage, externalId) {
         // Use a hash of the inline stylesheet content to ensure a consistent identifier. External stylesheets will resolve
         // to the actual stylesheet file path.
         // TODO: Consider xxhash instead for hashing

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

@@ -20,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, loadCache?: LoadResultCache): void;
+}>, loadCache?: LoadResultCache): void;

package/src/tools/esbuild/angular/jit-plugin-callbacks.js

@@ -51,7 +51,7 @@ async function loadEntry(entry, root, skipRead) {
  * @param styleOptions The options to use when bundling stylesheets.
  * @param additionalResultFiles A Map where stylesheet resources will be added.
  */
-function setupJitPluginCallbacks(build, stylesheetBundler, additionalResultFiles, inlineStyleLanguage, loadCache) {
+function setupJitPluginCallbacks(build, stylesheetBundler, additionalResultFiles, loadCache) {
     const root = build.initialOptions.absWorkingDir ?? '';
     // Add a resolve callback to capture and parse any JIT URIs that were added by the
     // JIT resource TypeScript transformer.
@@ -90,7 +90,7 @@ function setupJitPluginCallbacks(build, stylesheetBundler, additionalResultFiles
             stylesheetResult = await stylesheetBundler.bundleFile(entry.path);
         }
         else {
-            stylesheetResult = await stylesheetBundler.bundleInline(entry.contents, entry.path, inlineStyleLanguage);
+            stylesheetResult = await stylesheetBundler.bundleInline(entry.contents, entry.path);
         }
         const { contents, outputFiles, errors, warnings, metafile, referencedFiles } = stylesheetResult;
         additionalResultFiles.set(entry.path, { outputFiles, metafile });