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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@angular/build",
-  "version": "19.0.0-next.3",
+  "version": "19.0.0-next.5",
   "description": "Official build system for Angular",
   "keywords": [
     "Angular CLI",
@@ -23,7 +23,7 @@
   "builders": "builders.json",
   "dependencies": {
     "@ampproject/remapping": "2.3.0",
-    "@angular-devkit/architect": "0.1900.0-next.3",
+    "@angular-devkit/architect": "0.1900.0-next.5",
     "@babel/core": "7.25.2",
     "@babel/helper-annotate-as-pure": "7.24.7",
     "@babel/helper-split-export-declaration": "7.24.7",
@@ -42,18 +42,19 @@
     "parse5-html-rewriting-stream": "7.0.0",
     "picomatch": "4.0.2",
     "piscina": "4.6.1",
-    "rollup": "4.21.2",
+    "rollup": "4.21.3",
     "sass": "1.78.0",
     "semver": "7.6.3",
-    "vite": "5.4.3",
+    "vite": "5.4.4",
     "watchpack": "2.4.2"
   },
   "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.3",
+    "@angular/ssr": "^19.0.0-next.5",
     "less": "^4.2.0",
     "postcss": "^8.4.0",
     "tailwindcss": "^2.0.0 || ^3.0.0",

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

@@ -20,6 +20,10 @@ interface OutputFileRecord {
     servable: boolean;
     type: BuildOutputFileType;
 }
+interface DevServerExternalResultMetadata extends Omit<ExternalResultMetadata, 'explicit'> {
+    explicitBrowser: string[];
+    explicitServer: string[];
+}
 export type BuilderAction = (options: ApplicationBuilderInternalOptions, context: BuilderContext, plugins?: Plugin[]) => AsyncIterable<Result>;
 export declare function serveWithVite(serverOptions: NormalizedDevServerOptions, builderName: string, builderAction: BuilderAction, context: BuilderContext, transformers?: {
     indexHtml?: (content: string) => Promise<string>;
@@ -27,6 +31,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: ExternalResultMetadata, ssr: boolean, prebundleTransformer: JavaScriptTransformer, target: string[], zoneless: boolean, 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, ssr: boolean, 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>;
 type EsbuildLoaderOption = Exclude<DepOptimizationConfig['esbuildOptions'], undefined>['loader'];
 export {};

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

@@ -107,8 +107,10 @@ async function* serveWithVite(serverOptions, builderName, builderAction, context
     const externalMetadata = {
         implicitBrowser: [],
         implicitServer: [],
-        explicit: [],
+        explicitBrowser: [],
+        explicitServer: [],
     };
+    const usedComponentStyles = new Map();
     // Add cleanup logic via a builder teardown.
     let deferred;
     context.addTeardown(async () => {
@@ -187,15 +189,18 @@ async function* serveWithVite(serverOptions, builderName, builderAction, context
                 requiresServerRestart = implicitServerFiltered.some((dep) => !previousImplicitServer.has(dep));
             }
             // Empty Arrays to avoid growing unlimited with every re-build.
-            externalMetadata.explicit.length = 0;
+            externalMetadata.explicitBrowser.length = 0;
+            externalMetadata.explicitServer.length = 0;
             externalMetadata.implicitServer.length = 0;
             externalMetadata.implicitBrowser.length = 0;
-            externalMetadata.explicit.push(...explicit);
+            externalMetadata.explicitBrowser.push(...explicit);
+            externalMetadata.explicitServer.push(...explicit, ...nodeJsBuiltinModules);
             externalMetadata.implicitServer.push(...implicitServerFiltered);
             externalMetadata.implicitBrowser.push(...implicitBrowserFiltered);
             // The below needs to be sorted as Vite uses these options are part of the hashing invalidation algorithm.
             // See: https://github.com/vitejs/vite/blob/0873bae0cfe0f0718ad2f5743dd34a17e4ab563d/packages/vite/src/node/optimizer/index.ts#L1203-L1239
-            externalMetadata.explicit.sort();
+            externalMetadata.explicitBrowser.sort();
+            externalMetadata.explicitServer.sort();
             externalMetadata.implicitServer.sort();
             externalMetadata.implicitBrowser.sort();
         }
@@ -210,7 +215,7 @@ async function* serveWithVite(serverOptions, builderName, builderAction, context
                 await server.restart();
             }
             else {
-                await handleUpdate(normalizePath, generatedFiles, server, serverOptions, context.logger);
+                await handleUpdate(normalizePath, generatedFiles, server, serverOptions, context.logger, usedComponentStyles);
             }
         }
         else {
@@ -234,7 +239,7 @@ async function* serveWithVite(serverOptions, builderName, builderAction, context
                 ? browserOptions.polyfills
                 : [browserOptions.polyfills];
             // Setup server and start listening
-            const serverConfiguration = await setupServer(serverOptions, generatedFiles, assetFiles, browserOptions.preserveSymlinks, externalMetadata, !!browserOptions.ssr, prebundleTransformer, target, (0, internal_1.isZonelessApp)(polyfills), browserOptions.loader, extensions?.middleware, transformers?.indexHtml, thirdPartySourcemaps);
+            const serverConfiguration = await setupServer(serverOptions, generatedFiles, assetFiles, browserOptions.preserveSymlinks, externalMetadata, !!browserOptions.ssr, prebundleTransformer, target, (0, internal_1.isZonelessApp)(polyfills), usedComponentStyles, browserOptions.loader, extensions?.middleware, transformers?.indexHtml, thirdPartySourcemaps);
             server = await createServer(serverConfiguration);
             await server.listen();
             if (browserOptions.ssr && serverOptions.prebundle !== false) {
@@ -273,7 +278,7 @@ async function* serveWithVite(serverOptions, builderName, builderAction, context
     }
     await new Promise((resolve) => (deferred = resolve));
 }
-async function handleUpdate(normalizePath, generatedFiles, server, serverOptions, logger) {
+async function handleUpdate(normalizePath, generatedFiles, server, serverOptions, logger, usedComponentStyles) {
     const updatedFiles = [];
     let isServerFileUpdated = false;
     // Invalidate any updated files
@@ -298,7 +303,21 @@ async function handleUpdate(normalizePath, generatedFiles, server, serverOptions
             const timestamp = Date.now();
             server.hot.send({
                 type: 'update',
-                updates: updatedFiles.map((filePath) => {
+                updates: updatedFiles.flatMap((filePath) => {
+                    // For component styles, an HMR update must be sent for each one with the corresponding
+                    // component identifier search parameter (`ngcomp`). The Vite client code will not keep
+                    // the existing search parameters when it performs an update and each one must be
+                    // specified explicitly. Typically, there is only one each though as specific style files
+                    // are not typically reused across components.
+                    const componentIds = usedComponentStyles.get(filePath);
+                    if (componentIds) {
+                        return componentIds.map((id) => ({
+                            type: 'css-update',
+                            timestamp,
+                            path: `${filePath}?ngcomp` + (id ? `=${id}` : ''),
+                            acceptedPath: filePath,
+                        }));
+                    }
                     return {
                         type: 'css-update',
                         timestamp,
@@ -373,7 +392,7 @@ function analyzeResultFiles(normalizePath, htmlIndexPath, resultFiles, generated
         }
     }
 }
-async function setupServer(serverOptions, outputFiles, assets, preserveSymlinks, externalMetadata, ssr, prebundleTransformer, target, zoneless, prebundleLoaderExtensions, extensionMiddleware, indexHtmlTransformer, thirdPartySourcemaps = false) {
+async function setupServer(serverOptions, outputFiles, assets, preserveSymlinks, externalMetadata, ssr, prebundleTransformer, target, zoneless, usedComponentStyles, 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');
@@ -433,18 +452,18 @@ async function setupServer(serverOptions, outputFiles, assets, preserveSymlinks,
             },
             // This is needed when `externalDependencies` is used to prevent Vite load errors.
             // NOTE: If Vite adds direct support for externals, this can be removed.
-            preTransformRequests: externalMetadata.explicit.length === 0,
+            preTransformRequests: externalMetadata.explicitBrowser.length === 0,
         },
         ssr: {
             // Note: `true` and `/.*/` have different sematics. When true, the `external` option is ignored.
             noExternal: /.*/,
             // Exclude any Node.js built in module and provided dependencies (currently build defined externals)
-            external: externalMetadata.explicit,
+            external: externalMetadata.explicitServer,
             optimizeDeps: getDepOptimizationConfig({
                 // Only enable with caching since it causes prebundle dependencies to be cached
                 disabled: serverOptions.prebundle === false,
                 // Exclude any explicitly defined dependencies (currently build defined externals and node.js built-ins)
-                exclude: externalMetadata.explicit,
+                exclude: externalMetadata.explicitServer,
                 // Include all implict dependencies from the external packages internal option
                 include: externalMetadata.implicitServer,
                 ssr: true,
@@ -463,19 +482,20 @@ async function setupServer(serverOptions, outputFiles, assets, preserveSymlinks,
                 outputFiles,
                 assets,
                 ssr,
-                external: externalMetadata.explicit,
+                external: externalMetadata.explicitBrowser,
                 indexHtmlTransformer,
                 extensionMiddleware,
                 normalizePath,
+                usedComponentStyles,
             }),
-            (0, id_prefix_plugin_1.createRemoveIdPrefixPlugin)(externalMetadata.explicit),
+            (0, id_prefix_plugin_1.createRemoveIdPrefixPlugin)(externalMetadata.explicitBrowser),
         ],
         // Browser only optimizeDeps. (This does not run for SSR dependencies).
         optimizeDeps: getDepOptimizationConfig({
             // Only enable with caching since it causes prebundle dependencies to be cached
             disabled: serverOptions.prebundle === false,
             // Exclude any explicitly defined dependencies (currently build defined externals)
-            exclude: externalMetadata.explicit,
+            exclude: externalMetadata.explicitBrowser,
             // Include all implict dependencies from the external packages internal option
             include: externalMetadata.implicitBrowser,
             ssr: false,

package/src/tools/angular/compilation/parallel-compilation.d.ts

@@ -22,7 +22,7 @@ export declare class ParallelCompilation extends AngularCompilation {
     #private;
     readonly jit: boolean;
     constructor(jit: boolean);
-    initialize(tsconfig: string, hostOptions: AngularHostOptions, compilerOptionsTransformer?: ((compilerOptions: CompilerOptions) => CompilerOptions) | undefined): Promise<{
+    initialize(tsconfig: string, hostOptions: AngularHostOptions, compilerOptionsTransformer?: (compilerOptions: CompilerOptions) => CompilerOptions): Promise<{
         affectedFiles: ReadonlySet<SourceFile>;
         compilerOptions: CompilerOptions;
         referencedFiles: readonly string[];

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

@@ -40,6 +40,11 @@ class ParallelCompilation extends angular_compilation_1.AngularCompilation {
             useAtomics: !process.versions.webcontainer,
             filename: localRequire.resolve('./parallel-worker'),
             recordTiming: false,
+            env: {
+                ...process.env,
+                // Enable compile code caching if enabled for the main process (only exists on Node.js v22.8+)
+                'NODE_COMPILE_CACHE': (0, node_module_1.getCompileCacheDir)?.(),
+            },
         });
     }
     initialize(tsconfig, hostOptions, compilerOptionsTransformer) {

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

@@ -13,6 +13,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.JavaScriptTransformer = void 0;
 const node_crypto_1 = require("node:crypto");
 const promises_1 = require("node:fs/promises");
+const node_module_1 = require("node:module");
 const piscina_1 = __importDefault(require("piscina"));
 /**
  * A class that performs transformation of JavaScript files and raw data.
@@ -48,6 +49,11 @@ class JavaScriptTransformer {
             // Shutdown idle threads after 1 second of inactivity
             idleTimeout: 1000,
             recordTiming: false,
+            env: {
+                ...process.env,
+                // Enable compile code caching if enabled for the main process (only exists on Node.js v22.8+)
+                'NODE_COMPILE_CACHE': (0, node_module_1.getCompileCacheDir)?.(),
+            },
         });
         return this.#workerPool;
     }

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

@@ -64,6 +64,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SassWorkerImplementation = void 0;
 const node_assert_1 = __importDefault(require("node:assert"));
+const node_module_1 = require("node:module");
 const node_url_1 = require("node:url");
 const node_worker_threads_1 = require("node:worker_threads");
 const piscina_1 = require("piscina");
@@ -100,6 +101,11 @@ class SassWorkerImplementation {
             // Shutdown idle threads after 1 second of inactivity
             idleTimeout: 1000,
             recordTiming: false,
+            env: {
+                ...process.env,
+                // Enable compile code caching if enabled for the main process (only exists on Node.js v22.8+)
+                'NODE_COMPILE_CACHE': (0, node_module_1.getCompileCacheDir)?.(),
+            },
         });
         return this.#workerPool;
     }

package/src/tools/sass/worker.d.ts

@@ -5,6 +5,7 @@
  * Use of this source code is governed by an MIT-style license that can be
  * found in the LICENSE file at https://angular.dev/license
  */
+import { RawSourceMap } from '@ampproject/remapping';
 import { MessagePort } from 'node:worker_threads';
 import { SourceSpan, StringOptions } from 'sass';
 import type { SerializableWarningMessage } from './sass-service';
@@ -38,45 +39,25 @@ interface RenderRequestMessage {
      */
     rebase: boolean;
 }
-export default function renderSassStylesheet(request: RenderRequestMessage): Promise<{
+interface RenderResult {
     warnings: SerializableWarningMessage[] | undefined;
     result: {
-        loadedUrls: string[];
         css: string;
-        sourceMap?: import("source-map-js").RawSourceMap;
+        loadedUrls: string[];
+        sourceMap?: RawSourceMap;
     };
-    error?: undefined;
-} | {
+}
+interface RenderError {
     warnings: SerializableWarningMessage[] | undefined;
     error: {
-        span: Omit<SourceSpan, "url"> & {
+        message: string;
+        stack?: string;
+        span?: Omit<SourceSpan, 'url'> & {
             url?: string;
         };
-        message: string;
-        stack: string | undefined;
-        sassMessage: string;
-        sassStack: string;
-    };
-    result?: undefined;
-} | {
-    warnings: SerializableWarningMessage[] | undefined;
-    error: {
-        message: string;
-        stack: string | undefined;
-        span?: undefined;
-        sassMessage?: undefined;
-        sassStack?: undefined;
+        sassMessage?: string;
+        sassStack?: string;
     };
-    result?: undefined;
-} | {
-    warnings: SerializableWarningMessage[] | undefined;
-    error: {
-        message: string;
-        span?: undefined;
-        stack?: undefined;
-        sassMessage?: undefined;
-        sassStack?: undefined;
-    };
-    result?: undefined;
-}>;
+}
+export default function renderSassStylesheet(request: RenderRequestMessage): Promise<RenderResult | RenderError>;
 export {};

package/src/tools/sass/worker.js

@@ -95,6 +95,7 @@ async function renderSassStylesheet(request) {
             warnings,
             result: {
                 ...result,
+                sourceMap: result.sourceMap,
                 // URL is not serializable so to convert to string here and back to URL in the parent.
                 loadedUrls: result.loadedUrls.map((p) => (0, node_url_1.fileURLToPath)(p)),
             },

package/src/tools/vite/angular-memory-plugin.d.ts

@@ -17,5 +17,6 @@ export interface AngularMemoryPluginOptions {
     extensionMiddleware?: Connect.NextHandleFunction[];
     indexHtmlTransformer?: (content: string) => Promise<string>;
     normalizePath: (path: string) => string;
+    usedComponentStyles: Map<string, string[]>;
 }
 export declare function createAngularMemoryPlugin(options: AngularMemoryPluginOptions): Plugin;

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

@@ -17,7 +17,7 @@ const promises_1 = require("node:fs/promises");
 const node_path_1 = require("node:path");
 const middlewares_1 = require("./middlewares");
 function createAngularMemoryPlugin(options) {
-    const { workspaceRoot, virtualProjectRoot, outputFiles, assets, external, ssr, extensionMiddleware, indexHtmlTransformer, normalizePath, } = options;
+    const { workspaceRoot, virtualProjectRoot, outputFiles, assets, external, ssr, extensionMiddleware, indexHtmlTransformer, normalizePath, usedComponentStyles, } = options;
     return {
         name: 'vite:angular-memory',
         // Ensures plugin hooks run before built-in Vite hooks
@@ -75,7 +75,7 @@ function createAngularMemoryPlugin(options) {
                 };
             };
             // Assets and resources get handled first
-            server.middlewares.use((0, middlewares_1.createAngularAssetsMiddleware)(server, assets, outputFiles));
+            server.middlewares.use((0, middlewares_1.createAngularAssetsMiddleware)(server, assets, outputFiles, usedComponentStyles));
             if (extensionMiddleware?.length) {
                 extensionMiddleware.forEach((middleware) => server.middlewares.use(middleware));
             }

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

@@ -7,4 +7,4 @@
  */
 import type { Connect, ViteDevServer } from 'vite';
 import { AngularMemoryOutputFiles } from '../utils';
-export declare function createAngularAssetsMiddleware(server: ViteDevServer, assets: Map<string, string>, outputFiles: AngularMemoryOutputFiles): Connect.NextHandleFunction;
+export declare function createAngularAssetsMiddleware(server: ViteDevServer, assets: Map<string, string>, outputFiles: AngularMemoryOutputFiles, usedComponentStyles: Map<string, string[]>): Connect.NextHandleFunction;

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

@@ -10,8 +10,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.createAngularAssetsMiddleware = createAngularAssetsMiddleware;
 const mrmime_1 = require("mrmime");
 const node_path_1 = require("node:path");
+const load_esm_1 = require("../../../utils/load-esm");
 const utils_1 = require("../utils");
-function createAngularAssetsMiddleware(server, assets, outputFiles) {
+const COMPONENT_REGEX = /%COMP%/g;
+function createAngularAssetsMiddleware(server, assets, outputFiles, usedComponentStyles) {
     return function (req, res, next) {
         if (req.url === undefined || res.writableEnded) {
             return;
@@ -53,13 +55,50 @@ function createAngularAssetsMiddleware(server, assets, outputFiles) {
         if (extension !== '.js' && extension !== '.html') {
             const outputFile = outputFiles.get(pathname);
             if (outputFile?.servable) {
+                const data = outputFile.contents;
+                if (extension === '.css') {
+                    // Inject component ID for view encapsulation if requested
+                    const componentId = new URL(req.url, 'http://localhost').searchParams.get('ngcomp');
+                    if (componentId !== null) {
+                        // Record the component style usage for HMR updates
+                        const usedIds = usedComponentStyles.get(pathname);
+                        if (usedIds === undefined) {
+                            usedComponentStyles.set(pathname, [componentId]);
+                        }
+                        else {
+                            usedIds.push(componentId);
+                        }
+                        // Shim the stylesheet if a component ID is provided
+                        if (componentId.length > 0) {
+                            // Validate component ID
+                            if (/[_.-A-Za-z0-9]+-c\d{9}$/.test(componentId)) {
+                                (0, load_esm_1.loadEsmModule)('@angular/compiler')
+                                    .then((compilerModule) => {
+                                    const encapsulatedData = compilerModule
+                                        .encapsulateStyle(new TextDecoder().decode(data))
+                                        .replaceAll(COMPONENT_REGEX, componentId);
+                                    res.setHeader('Content-Type', 'text/css');
+                                    res.setHeader('Cache-Control', 'no-cache');
+                                    (0, utils_1.appendServerConfiguredHeaders)(server, res);
+                                    res.end(encapsulatedData);
+                                })
+                                    .catch((e) => next(e));
+                                return;
+                            }
+                            else {
+                                // eslint-disable-next-line no-console
+                                console.error('Invalid component stylesheet ID request: ' + componentId);
+                            }
+                        }
+                    }
+                }
                 const mimeType = (0, mrmime_1.lookup)(extension);
                 if (mimeType) {
                     res.setHeader('Content-Type', mimeType);
                 }
                 res.setHeader('Cache-Control', 'no-cache');
                 (0, utils_1.appendServerConfiguredHeaders)(server, res);
-                res.end(outputFile.contents);
+                res.end(data);
                 return;
             }
         }

package/src/typings.d.ts

@@ -17,3 +17,10 @@
 declare module 'esbuild' {
   export * from 'esbuild-wasm';
 }
+
+/**
+ * Augment the Node.js module builtin types to support the v22.8+ compile cache functions
+ */
+declare module 'node:module' {
+  function getCompileCacheDir(): string | undefined;
+}

package/src/utils/normalize-cache.js

@@ -10,7 +10,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.normalizeCacheOptions = normalizeCacheOptions;
 const node_path_1 = require("node:path");
 /** Version placeholder is replaced during the build process with actual package version */
-const VERSION = '19.0.0-next.3';
+const VERSION = '19.0.0-next.5';
 function hasCacheMetadata(value) {
     return (!!value &&
         typeof value === 'object' &&

package/src/utils/server-rendering/manifest.js

@@ -70,15 +70,13 @@ function generateAngularServerAppManifest(additionalHtmlOutputFiles, outputFiles
     for (const file of [...additionalHtmlOutputFiles.values(), ...outputFiles]) {
         if (file.path === options_1.INDEX_HTML_SERVER ||
             file.path === options_1.INDEX_HTML_CSR ||
-            file.path.endsWith('.css')) {
+            (inlineCriticalCss && file.path.endsWith('.css'))) {
             serverAssetsContent.push(`['${file.path}', async () => ${JSON.stringify(file.text)}]`);
         }
     }
     const manifestContent = `
-import bootstrap from './main.server.mjs';
-
 export default {
-  bootstrap: () => bootstrap,
+  bootstrap: () => import('./main.server.mjs').then(m => m.default),
   inlineCriticalCss: ${inlineCriticalCss},
   routes: ${JSON.stringify(routes, undefined, 2)},
   assets: new Map([${serverAssetsContent.join(', \n')}]),