@angular/build 19.0.0-next.4 → 19.0.0-next.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@angular/build",
-  "version": "19.0.0-next.4",
+  "version": "19.0.0-next.6",
   "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.4",
+    "@angular-devkit/architect": "0.1900.0-next.6",
     "@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.4",
+    "@angular/ssr": "^19.0.0-next.6",
     "less": "^4.2.0",
     "postcss": "^8.4.0",
     "tailwindcss": "^2.0.0 || ^3.0.0",

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

@@ -31,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: DevServerExternalResultMetadata, 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

@@ -110,6 +110,7 @@ async function* serveWithVite(serverOptions, builderName, builderAction, context
         explicitBrowser: [],
         explicitServer: [],
     };
+    const usedComponentStyles = new Map();
     // Add cleanup logic via a builder teardown.
     let deferred;
     context.addTeardown(async () => {
@@ -214,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 {
@@ -238,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) {
@@ -277,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
@@ -302,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,
@@ -377,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');
@@ -471,6 +486,7 @@ async function setupServer(serverOptions, outputFiles, assets, preserveSymlinks,
                 indexHtmlTransformer,
                 extensionMiddleware,
                 normalizePath,
+                usedComponentStyles,
             }),
             (0, id_prefix_plugin_1.createRemoveIdPrefixPlugin)(externalMetadata.explicitBrowser),
         ],

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

@@ -40,11 +40,6 @@ 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/application-code-bundle.js

@@ -232,7 +232,6 @@ function createServerMainCodeBundleOptions(options, target, sourceFileCache) {
                 `export * from '${mainServerEntryPointJsImport}';`,
                 // Add @angular/ssr exports
                 `export {
-            ɵServerRenderContext,
             ɵdestroyAngularServerApp,
             ɵextractRoutesAndCreateRouteTree,
             ɵgetOrCreateAngularServerApp,

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

@@ -13,7 +13,6 @@ 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.
@@ -49,11 +48,6 @@ 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,7 +64,6 @@ 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");
@@ -101,11 +100,6 @@ 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/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,10 +17,3 @@
 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.4';
+const VERSION = '19.0.0-next.6';
 function hasCacheMetadata(value) {
     return (!!value &&
         typeof value === 'object' &&

package/src/utils/server-rendering/load-esm-from-memory.d.ts

@@ -6,13 +6,12 @@
  * found in the LICENSE file at https://angular.dev/license
  */
 import type { ApplicationRef, Type } from '@angular/core';
-import type { ɵServerRenderContext, ɵextractRoutesAndCreateRouteTree, ɵgetOrCreateAngularServerApp } from '@angular/ssr';
+import type { ɵextractRoutesAndCreateRouteTree, ɵgetOrCreateAngularServerApp } from '@angular/ssr';
 /**
  * Represents the exports available from the main server bundle.
  */
 interface MainServerBundleExports {
     default: (() => Promise<ApplicationRef>) | Type<unknown>;
-    ɵServerRenderContext: typeof ɵServerRenderContext;
     ɵextractRoutesAndCreateRouteTree: typeof ɵextractRoutesAndCreateRouteTree;
     ɵgetOrCreateAngularServerApp: typeof ɵgetOrCreateAngularServerApp;
 }

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

@@ -112,12 +112,12 @@ async function renderPages(baseHref, sourcemap, allRoutes, maxThreads, workspace
         for (const route of allRoutes) {
             // Remove base href from file output path.
             const routeWithoutBaseHref = addLeadingSlash(route.slice(baseHrefWithLeadingSlash.length - 1));
-            const isAppShellRoute = appShellRoute === routeWithoutBaseHref;
-            const render = renderWorker.run({ url: route, isAppShellRoute });
+            const render = renderWorker.run({ url: route });
             const renderResult = render
                 .then((content) => {
                 if (content !== null) {
                     const outPath = node_path_1.posix.join(removeLeadingSlash(routeWithoutBaseHref), 'index.html');
+                    const isAppShellRoute = appShellRoute === routeWithoutBaseHref;
                     output[outPath] = { content, appShellRoute: isAppShellRoute };
                 }
             })

package/src/utils/server-rendering/render-worker.d.ts

@@ -11,11 +11,10 @@ export interface RenderWorkerData extends ESMInMemoryFileLoaderWorkerData {
 }
 export interface RenderOptions {
     url: string;
-    isAppShellRoute: boolean;
 }
 /**
  * Renders each route in routes and writes them to <outputPath>/<route>/index.html.
  */
-declare function renderPage({ url, isAppShellRoute }: RenderOptions): Promise<string | null>;
+declare function renderPage({ url }: RenderOptions): Promise<string | null>;
 declare const _default: typeof renderPage;
 export default _default;

package/src/utils/server-rendering/render-worker.js

@@ -12,12 +12,10 @@ const load_esm_from_memory_1 = require("./load-esm-from-memory");
 /**
  * Renders each route in routes and writes them to <outputPath>/<route>/index.html.
  */
-async function renderPage({ url, isAppShellRoute }) {
-    const { ɵgetOrCreateAngularServerApp: getOrCreateAngularServerApp, ɵServerRenderContext: ServerRenderContext, } = await (0, load_esm_from_memory_1.loadEsmModuleFromMemory)('./main.server.mjs');
+async function renderPage({ url }) {
+    const { ɵgetOrCreateAngularServerApp: getOrCreateAngularServerApp } = await (0, load_esm_from_memory_1.loadEsmModuleFromMemory)('./main.server.mjs');
     const angularServerApp = getOrCreateAngularServerApp();
-    const response = await angularServerApp.render(new Request(new URL(url, 'http://local-angular-prerender'), {
-        signal: AbortSignal.timeout(30_000),
-    }), undefined, isAppShellRoute ? ServerRenderContext.AppShell : ServerRenderContext.SSG);
+    const response = await angularServerApp.renderStatic(new URL(url, 'http://local-angular-prerender'), AbortSignal.timeout(30_000));
     return response ? response.text() : null;
 }
 function initialize() {

package/src/utils/server-rendering/routes-extractor-worker.js

@@ -12,7 +12,9 @@ const load_esm_from_memory_1 = require("./load-esm-from-memory");
 /** Renders an application based on a provided options. */
 async function extractRoutes() {
     const { ɵextractRoutesAndCreateRouteTree: extractRoutesAndCreateRouteTree } = await (0, load_esm_from_memory_1.loadEsmModuleFromMemory)('./main.server.mjs');
-    const routeTree = await extractRoutesAndCreateRouteTree(new URL('http://local-angular-prerender/'));
+    const routeTree = await extractRoutesAndCreateRouteTree(new URL('http://local-angular-prerender/'), 
+    /** manifest */ undefined, 
+    /** invokeGetPrerenderParams */ true);
     return routeTree.toObject();
 }
 function initialize() {