@angular/build 19.0.0-next.9 → 19.0.0-rc.1

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

@@ -10,9 +10,8 @@ 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, usedComponentStyles) {
+function createAngularAssetsMiddleware(server, assets, outputFiles, componentStyles, encapsulateStyle) {
     return function angularAssetsMiddleware(req, res, next) {
         if (req.url === undefined || res.writableEnded) {
             return;
@@ -59,45 +58,66 @@ function createAngularAssetsMiddleware(server, assets, outputFiles, usedComponen
         if (extension !== '.js' && extension !== '.html') {
             const outputFile = outputFiles.get(pathname);
             if (outputFile?.servable) {
-                const data = outputFile.contents;
-                if (extension === '.css') {
+                let data = outputFile.contents;
+                const componentStyle = componentStyles.get(pathname);
+                if (componentStyle) {
                     // Inject component ID for view encapsulation if requested
-                    const componentId = new URL(req.url, 'http://localhost').searchParams.get('ngcomp');
+                    const searchParams = new URL(req.url, 'http://localhost').searchParams;
+                    const componentId = searchParams.get('ngcomp');
                     if (componentId !== null) {
+                        // Track if the component uses ShadowDOM encapsulation (3 = ViewEncapsulation.ShadowDom)
+                        // Shadow DOM components currently require a full reload.
+                        // Vite's CSS hot replacement does not support shadow root searching.
+                        if (searchParams.get('e') === '3') {
+                            componentStyle.reload = true;
+                        }
                         // Record the component style usage for HMR updates
-                        const usedIds = usedComponentStyles.get(pathname);
-                        if (usedIds === undefined) {
-                            usedComponentStyles.set(pathname, [componentId]);
+                        if (componentStyle.used === undefined) {
+                            componentStyle.used = new Set([componentId]);
                         }
                         else {
-                            usedIds.push(componentId);
+                            componentStyle.used.add(componentId);
+                        }
+                        // Report if there are no changes to avoid reprocessing
+                        const etag = `W/"${outputFile.contents.byteLength}-${outputFile.hash}-${componentId}"`;
+                        if (req.headers['if-none-match'] === etag) {
+                            res.statusCode = 304;
+                            res.end();
+                            return;
                         }
                         // Shim the stylesheet if a component ID is provided
                         if (componentId.length > 0) {
                             // Validate component ID
-                            if (/^[_.\-\p{Letter}\d]+-c\d{9}$/u.test(componentId)) {
-                                (0, load_esm_1.loadEsmModule)('@angular/compiler')
-                                    .then((compilerModule) => {
-                                    const encapsulatedData = compilerModule.encapsulateStyle(new TextDecoder().decode(data), componentId);
-                                    res.setHeader('Content-Type', 'text/css');
-                                    res.setHeader('Cache-Control', 'no-cache');
-                                    res.end(encapsulatedData);
-                                })
-                                    .catch((e) => next(e));
-                                return;
-                            }
-                            else {
+                            if (!/^[_.\-\p{Letter}\d]+-c\d+$/u.test(componentId)) {
+                                const message = 'Invalid component stylesheet ID request: ' + componentId;
                                 // eslint-disable-next-line no-console
-                                console.error('Invalid component stylesheet ID request: ' + componentId);
+                                console.error(message);
+                                res.statusCode = 400;
+                                res.end(message);
+                                return;
                             }
+                            data = encapsulateStyle(data, componentId);
                         }
+                        res.setHeader('Content-Type', 'text/css');
+                        res.setHeader('Cache-Control', 'no-cache');
+                        res.setHeader('ETag', etag);
+                        res.end(data);
+                        return;
                     }
                 }
+                // Avoid resending the content if it has not changed since last request
+                const etag = `W/"${outputFile.contents.byteLength}-${outputFile.hash}"`;
+                if (req.headers['if-none-match'] === etag) {
+                    res.statusCode = 304;
+                    res.end();
+                    return;
+                }
                 const mimeType = (0, mrmime_1.lookup)(extension);
                 if (mimeType) {
                     res.setHeader('Content-Type', mimeType);
                 }
                 res.setHeader('Cache-Control', 'no-cache');
+                res.setHeader('ETag', etag);
                 res.end(data);
                 return;
             }

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

@@ -0,0 +1,9 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * 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 type { Connect } from 'vite';
+export declare function createAngularComponentMiddleware(templateUpdates: ReadonlyMap<string, string>): Connect.NextHandleFunction;

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

@@ -0,0 +1,33 @@
+"use strict";
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * 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
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createAngularComponentMiddleware = createAngularComponentMiddleware;
+const ANGULAR_COMPONENT_PREFIX = '/@ng/component';
+function createAngularComponentMiddleware(templateUpdates) {
+    return function angularComponentMiddleware(req, res, next) {
+        if (req.url === undefined || res.writableEnded) {
+            return;
+        }
+        if (!req.url.startsWith(ANGULAR_COMPONENT_PREFIX)) {
+            next();
+            return;
+        }
+        const requestUrl = new URL(req.url, 'http://localhost');
+        const componentId = requestUrl.searchParams.get('c');
+        if (!componentId) {
+            res.statusCode = 400;
+            res.end();
+            return;
+        }
+        const updateCode = templateUpdates.get(encodeURIComponent(componentId)) ?? '';
+        res.setHeader('Content-Type', 'text/javascript');
+        res.setHeader('Cache-Control', 'no-cache');
+        res.end(updateCode);
+    };
+}

package/src/tools/vite/middlewares/index.d.ts

@@ -5,8 +5,9 @@
  * 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
  */
-export { createAngularAssetsMiddleware } from './assets-middleware';
+export { type ComponentStyleRecord, createAngularAssetsMiddleware } from './assets-middleware';
 export { angularHtmlFallbackMiddleware } from './html-fallback-middleware';
 export { createAngularIndexHtmlMiddleware } from './index-html-middleware';
 export { createAngularSsrExternalMiddleware, createAngularSsrInternalMiddleware, } from './ssr-middleware';
 export { createAngularHeadersMiddleware } from './headers-middleware';
+export { createAngularComponentMiddleware } from './component-middleware';

package/src/tools/vite/middlewares/index.js

@@ -7,7 +7,7 @@
  * found in the LICENSE file at https://angular.dev/license
  */
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.createAngularHeadersMiddleware = exports.createAngularSsrInternalMiddleware = exports.createAngularSsrExternalMiddleware = exports.createAngularIndexHtmlMiddleware = exports.angularHtmlFallbackMiddleware = exports.createAngularAssetsMiddleware = void 0;
+exports.createAngularComponentMiddleware = exports.createAngularHeadersMiddleware = exports.createAngularSsrInternalMiddleware = exports.createAngularSsrExternalMiddleware = exports.createAngularIndexHtmlMiddleware = exports.angularHtmlFallbackMiddleware = exports.createAngularAssetsMiddleware = void 0;
 var assets_middleware_1 = require("./assets-middleware");
 Object.defineProperty(exports, "createAngularAssetsMiddleware", { enumerable: true, get: function () { return assets_middleware_1.createAngularAssetsMiddleware; } });
 var html_fallback_middleware_1 = require("./html-fallback-middleware");
@@ -19,3 +19,5 @@ Object.defineProperty(exports, "createAngularSsrExternalMiddleware", { enumerabl
 Object.defineProperty(exports, "createAngularSsrInternalMiddleware", { enumerable: true, get: function () { return ssr_middleware_1.createAngularSsrInternalMiddleware; } });
 var headers_middleware_1 = require("./headers-middleware");
 Object.defineProperty(exports, "createAngularHeadersMiddleware", { enumerable: true, get: function () { return headers_middleware_1.createAngularHeadersMiddleware; } });
+var component_middleware_1 = require("./component-middleware");
+Object.defineProperty(exports, "createAngularComponentMiddleware", { enumerable: true, get: function () { return component_middleware_1.createAngularComponentMiddleware; } });

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

@@ -23,7 +23,9 @@ function createAngularSsrInternalMiddleware(server, indexHtmlTransformer) {
             await (0, load_esm_1.loadEsmModule)('@angular/compiler');
             const { writeResponseToNodeResponse, createWebRequestFromNodeRequest } = await (0, load_esm_1.loadEsmModule)('@angular/ssr/node');
             const { ɵgetOrCreateAngularServerApp } = (await server.ssrLoadModule('/main.server.mjs'));
-            const angularServerApp = ɵgetOrCreateAngularServerApp();
+            const angularServerApp = ɵgetOrCreateAngularServerApp({
+                allowStaticRouteRender: true,
+            });
             // Only Add the transform hook only if it's a different instance.
             if (cachedAngularServerApp !== angularServerApp) {
                 angularServerApp.hooks.on('html:transform:pre', async ({ html, url }) => {
@@ -35,7 +37,7 @@ function createAngularSsrInternalMiddleware(server, indexHtmlTransformer) {
             const webReq = new Request(createWebRequestFromNodeRequest(req), {
                 signal: AbortSignal.timeout(30_000),
             });
-            const webRes = await angularServerApp.render(webReq);
+            const webRes = await angularServerApp.handle(webReq);
             if (!webRes) {
                 return next();
             }
@@ -53,11 +55,11 @@ async function createAngularSsrExternalMiddleware(server, indexHtmlTransformer)
     const { createWebRequestFromNodeRequest, writeResponseToNodeResponse } = await (0, load_esm_1.loadEsmModule)('@angular/ssr/node');
     return function angularSsrExternalMiddleware(req, res, next) {
         (async () => {
-            const { default: handler, AngularAppEngine } = (await server.ssrLoadModule('./server.mjs'));
-            if (!(0, utils_1.isSsrNodeRequestHandler)(handler) && !(0, utils_1.isSsrRequestHandler)(handler)) {
+            const { reqHandler, AngularAppEngine } = (await server.ssrLoadModule('./server.mjs'));
+            if (!(0, utils_1.isSsrNodeRequestHandler)(reqHandler) && !(0, utils_1.isSsrRequestHandler)(reqHandler)) {
                 if (!fallbackWarningShown) {
                     // eslint-disable-next-line no-console
-                    console.warn(`The default export in 'server.ts' does not provide a Node.js request handler. ` +
+                    console.warn(`The 'reqHandler' export in 'server.ts' is either undefined or does not provide a recognized request handler. ` +
                         'Using the internal SSR middleware instead.');
                     fallbackWarningShown = true;
                 }
@@ -66,6 +68,7 @@ async function createAngularSsrExternalMiddleware(server, indexHtmlTransformer)
                 return;
             }
             if (cachedAngularAppEngine !== AngularAppEngine) {
+                AngularAppEngine.ɵallowStaticRouteRender = true;
                 AngularAppEngine.ɵhooks.on('html:transform:pre', async ({ html, url }) => {
                     const processedHtml = await server.transformIndexHtml(url.pathname, html);
                     return indexHtmlTransformer?.(processedHtml) ?? processedHtml;
@@ -73,11 +76,11 @@ async function createAngularSsrExternalMiddleware(server, indexHtmlTransformer)
                 cachedAngularAppEngine = AngularAppEngine;
             }
             // Forward the request to the middleware in server.ts
-            if ((0, utils_1.isSsrNodeRequestHandler)(handler)) {
-                await handler(req, res, next);
+            if ((0, utils_1.isSsrNodeRequestHandler)(reqHandler)) {
+                await reqHandler(req, res, next);
             }
             else {
-                const webRes = await handler(createWebRequestFromNodeRequest(req));
+                const webRes = await reqHandler(createWebRequestFromNodeRequest(req));
                 if (!webRes) {
                     next();
                     return;

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

@@ -11,6 +11,7 @@ interface AngularMemoryPluginOptions {
     virtualProjectRoot: string;
     outputFiles: AngularMemoryOutputFiles;
     external?: string[];
+    skipViteClient?: boolean;
 }
 export declare function createAngularMemoryPlugin(options: AngularMemoryPluginOptions): Promise<Plugin>;
 export {};

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

@@ -18,8 +18,6 @@ const load_esm_1 = require("../../../utils/load-esm");
 async function createAngularMemoryPlugin(options) {
     const { virtualProjectRoot, outputFiles, external } = options;
     const { normalizePath } = await (0, load_esm_1.loadEsmModule)('vite');
-    // See: https://github.com/vitejs/vite/blob/a34a73a3ad8feeacc98632c0f4c643b6820bbfda/packages/vite/src/node/server/pluginContainer.ts#L331-L334
-    const defaultImporter = (0, node_path_1.join)(virtualProjectRoot, 'index.html');
     return {
         name: 'vite:angular-memory',
         // Ensures plugin hooks run before built-in Vite hooks
@@ -32,17 +30,10 @@ async function createAngularMemoryPlugin(options) {
                 return source;
             }
             if (importer) {
-                let normalizedSource;
                 if (source[0] === '.' && normalizePath(importer).startsWith(virtualProjectRoot)) {
                     // Remove query if present
                     const [importerFile] = importer.split('?', 1);
-                    normalizedSource = (0, node_path_1.join)((0, node_path_1.dirname)((0, node_path_1.relative)(virtualProjectRoot, importerFile)), source);
-                }
-                else if (source[0] === '/' && importer === defaultImporter) {
-                    normalizedSource = (0, node_path_1.basename)(source);
-                }
-                if (normalizedSource) {
-                    source = '/' + normalizePath(normalizedSource);
+                    source = '/' + (0, node_path_1.join)((0, node_path_1.dirname)((0, node_path_1.relative)(virtualProjectRoot, importerFile)), source);
                 }
             }
             const [file] = source.split('?', 1);
@@ -55,9 +46,10 @@ async function createAngularMemoryPlugin(options) {
             const relativeFile = '/' + normalizePath((0, node_path_1.relative)(virtualProjectRoot, file));
             const codeContents = outputFiles.get(relativeFile)?.contents;
             if (codeContents === undefined) {
-                return relativeFile.endsWith('/node_modules/vite/dist/client/client.mjs')
-                    ? loadViteClientCode(file)
-                    : undefined;
+                if (relativeFile.endsWith('/node_modules/vite/dist/client/client.mjs')) {
+                    return options.skipViteClient ? '' : loadViteClientCode(file);
+                }
+                return undefined;
             }
             const code = Buffer.from(codeContents).toString('utf-8');
             const mapContents = outputFiles.get(relativeFile + '.map')?.contents;

package/src/tools/vite/plugins/setup-middlewares-plugin.d.ts

@@ -6,6 +6,7 @@
  * found in the LICENSE file at https://angular.dev/license
  */
 import type { Connect, Plugin } from 'vite';
+import { ComponentStyleRecord } from '../middlewares';
 import { AngularMemoryOutputFiles } from '../utils';
 export declare enum ServerSsrMode {
     /**
@@ -34,7 +35,8 @@ interface AngularSetupMiddlewaresPluginOptions {
     assets: Map<string, string>;
     extensionMiddleware?: Connect.NextHandleFunction[];
     indexHtmlTransformer?: (content: string) => Promise<string>;
-    usedComponentStyles: Map<string, string[]>;
+    componentStyles: Map<string, ComponentStyleRecord>;
+    templateUpdates: Map<string, string>;
     ssrMode: ServerSsrMode;
 }
 export declare function createAngularSetupMiddlewaresPlugin(options: AngularSetupMiddlewaresPluginOptions): Plugin;

package/src/tools/vite/plugins/setup-middlewares-plugin.js

@@ -9,6 +9,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ServerSsrMode = void 0;
 exports.createAngularSetupMiddlewaresPlugin = createAngularSetupMiddlewaresPlugin;
+const load_esm_1 = require("../../../utils/load-esm");
 const middlewares_1 = require("../middlewares");
 var ServerSsrMode;
 (function (ServerSsrMode) {
@@ -33,15 +34,23 @@ var ServerSsrMode;
      */
     ServerSsrMode[ServerSsrMode["ExternalSsrMiddleware"] = 2] = "ExternalSsrMiddleware";
 })(ServerSsrMode || (exports.ServerSsrMode = ServerSsrMode = {}));
+async function createEncapsulateStyle() {
+    const { encapsulateStyle } = await (0, load_esm_1.loadEsmModule)('@angular/compiler');
+    const decoder = new TextDecoder('utf-8');
+    return (style, componentId) => {
+        return encapsulateStyle(decoder.decode(style), componentId);
+    };
+}
 function createAngularSetupMiddlewaresPlugin(options) {
     return {
         name: 'vite:angular-setup-middlewares',
         enforce: 'pre',
-        configureServer(server) {
-            const { indexHtmlTransformer, outputFiles, extensionMiddleware, assets, usedComponentStyles, ssrMode, } = options;
+        async configureServer(server) {
+            const { indexHtmlTransformer, outputFiles, extensionMiddleware, assets, componentStyles, templateUpdates, ssrMode, } = options;
             // Headers, assets and resources get handled first
             server.middlewares.use((0, middlewares_1.createAngularHeadersMiddleware)(server));
-            server.middlewares.use((0, middlewares_1.createAngularAssetsMiddleware)(server, assets, outputFiles, usedComponentStyles));
+            server.middlewares.use((0, middlewares_1.createAngularComponentMiddleware)(templateUpdates));
+            server.middlewares.use((0, middlewares_1.createAngularAssetsMiddleware)(server, assets, outputFiles, componentStyles, await createEncapsulateStyle()));
             extensionMiddleware?.forEach((middleware) => server.middlewares.use(middleware));
             // Returning a function, installs middleware after the main transform middleware but
             // before the built-in HTML middleware

package/src/tools/vite/utils.d.ts

@@ -7,6 +7,7 @@
  */
 export type AngularMemoryOutputFiles = Map<string, {
     contents: Uint8Array;
+    hash: string;
     servable: boolean;
 }>;
 export declare function pathnameWithoutBasePath(url: string, basePath: string): string;

package/src/typings.d.ts

@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.dev/license
  */
 
-// The `bundled_critters` causes issues with module mappings in Bazel,
+// The `bundled_beasties` causes issues with module mappings in Bazel,
 // leading to unexpected behavior with esbuild. Specifically, the problem occurs
 // when esbuild resolves to a different module or version than expected, due to
 // how Bazel handles module mappings.

package/src/utils/environment-options.d.ts

@@ -16,4 +16,5 @@ export declare const useTypeChecking: boolean;
 export declare const useJSONBuildLogs: boolean;
 export declare const shouldOptimizeChunks: boolean;
 export declare const useComponentStyleHmr: boolean;
+export declare const useComponentTemplateHmr: boolean;
 export declare const usePartialSsrBuild: boolean;

package/src/utils/environment-options.js

@@ -7,7 +7,7 @@
  * found in the LICENSE file at https://angular.dev/license
  */
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.usePartialSsrBuild = exports.useComponentStyleHmr = exports.shouldOptimizeChunks = exports.useJSONBuildLogs = exports.useTypeChecking = exports.shouldWatchRoot = exports.debugPerformance = exports.useParallelTs = exports.maxWorkers = exports.allowMinify = exports.shouldBeautify = exports.allowMangle = void 0;
+exports.usePartialSsrBuild = exports.useComponentTemplateHmr = exports.useComponentStyleHmr = exports.shouldOptimizeChunks = exports.useJSONBuildLogs = exports.useTypeChecking = exports.shouldWatchRoot = exports.debugPerformance = exports.useParallelTs = exports.maxWorkers = exports.allowMinify = exports.shouldBeautify = exports.allowMangle = void 0;
 const node_os_1 = require("node:os");
 function isDisabled(variable) {
     return variable === '0' || variable.toLowerCase() === 'false';
@@ -83,6 +83,8 @@ exports.useJSONBuildLogs = isPresent(buildLogsJsonVariable) && isEnabled(buildLo
 const optimizeChunksVariable = process.env['NG_BUILD_OPTIMIZE_CHUNKS'];
 exports.shouldOptimizeChunks = isPresent(optimizeChunksVariable) && isEnabled(optimizeChunksVariable);
 const hmrComponentStylesVariable = process.env['NG_HMR_CSTYLES'];
-exports.useComponentStyleHmr = isPresent(hmrComponentStylesVariable) && isEnabled(hmrComponentStylesVariable);
+exports.useComponentStyleHmr = !isPresent(hmrComponentStylesVariable) || !isDisabled(hmrComponentStylesVariable);
+const hmrComponentTemplateVariable = process.env['NG_HMR_TEMPLATES'];
+exports.useComponentTemplateHmr = isPresent(hmrComponentTemplateVariable) && isEnabled(hmrComponentTemplateVariable);
 const partialSsrBuildVariable = process.env['NG_BUILD_PARTIAL_SSR'];
 exports.usePartialSsrBuild = isPresent(partialSsrBuildVariable) && isEnabled(partialSsrBuildVariable);

package/src/utils/index-file/auto-csp.d.ts

@@ -0,0 +1,23 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * 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
+ */
+/**
+ * Calculates a CSP compatible hash of an inline script.
+ * @param scriptText Text between opening and closing script tag. Has to
+ *     include whitespaces and newlines!
+ * @returns The hash of the text formatted appropriately for CSP.
+ */
+export declare function hashTextContent(scriptText: string): string;
+/**
+ * Finds all `<script>` tags and creates a dynamic script loading block for consecutive `<script>` with `src` attributes.
+ * Hashes all scripts, both inline and generated dynamic script loading blocks.
+ * Inserts a `<meta>` tag at the end of the `<head>` of the document with the generated hash-based CSP.
+ *
+ * @param html Markup that should be processed.
+ * @returns The transformed HTML that contains the `<meta>` tag CSP and dynamic loader scripts.
+ */
+export declare function autoCsp(html: string, unsafeEval?: boolean): Promise<string>;