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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@angular/build",
-  "version": "19.0.0-next.4",
+  "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.4",
+    "@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.4",
+    "@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

@@ -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/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/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.5';
 function hasCacheMetadata(value) {
     return (!!value &&
         typeof value === 'object' &&