@angular/ssr 19.0.0-next.7 → 19.0.0-next.9

package/fesm2022/ssr.mjs

@@ -1,5 +1,5 @@
 import { APP_BASE_HREF, PlatformLocation } from '@angular/common';
-import { ɵConsole as _Console, InjectionToken, makeEnvironmentProviders, runInInjectionContext, createPlatformFactory, platformCore, ApplicationRef, ɵwhenStable as _whenStable, Compiler, ɵresetCompiledComponents as _resetCompiledComponents } from '@angular/core';
+import { ɵConsole as _Console, InjectionToken, makeEnvironmentProviders, runInInjectionContext, createPlatformFactory, platformCore, ApplicationRef, ɵwhenStable as _whenStable, Compiler, LOCALE_ID, ɵresetCompiledComponents as _resetCompiledComponents } from '@angular/core';
 import { ɵSERVER_CONTEXT as _SERVER_CONTEXT, renderModule, renderApplication, INITIAL_CONFIG, ɵINTERNAL_SERVER_PLATFORM_PROVIDERS as _INTERNAL_SERVER_PLATFORM_PROVIDERS } from '@angular/platform-server';
 import { ɵloadChildren as _loadChildren, Router } from '@angular/router';
 import Critters from '../third_party/critters/index.js';
@@ -573,16 +573,18 @@ async function* traverseRoutesConfig(options) {
                 matchedMetaData = serverConfigRouteTree.match(currentRoutePath);
                 if (!matchedMetaData) {
                     yield {
-                        error: `The '${currentRoutePath}' route does not match any route defined in the server routing configuration. ` +
+                        error: `The '${stripLeadingSlash(currentRoutePath)}' route does not match any route defined in the server routing configuration. ` +
                             'Please ensure this route is added to the server routing configuration.',
                     };
                     continue;
                 }
+                matchedMetaData.presentInClientRouter = true;
             }
             const metadata = {
                 ...matchedMetaData,
                 route: currentRoutePath,
             };
+            delete metadata.presentInClientRouter;
             // Handle redirects
             if (typeof redirectTo === 'string') {
                 const redirectToResolved = resolveRedirectTo(currentRoutePath, redirectTo);
@@ -625,7 +627,9 @@ async function* traverseRoutesConfig(options) {
             }
         }
         catch (error) {
-            yield { error: `Error processing route '${route.path}': ${error.message}` };
+            yield {
+                error: `Error processing route '${stripLeadingSlash(route.path ?? '')}': ${error.message}`,
+            };
         }
     }
 }
@@ -659,8 +663,8 @@ async function* handleSSGRoute(metadata, parentInjector, invokeGetPrerenderParam
     if (invokeGetPrerenderParams) {
         if (!getPrerenderParams) {
             yield {
-                error: `The '${currentRoutePath}' route uses prerendering and includes parameters, but 'getPrerenderParams' is missing. ` +
-                    `Please define 'getPrerenderParams' function for this route in your server routing configuration ` +
+                error: `The '${stripLeadingSlash(currentRoutePath)}' route uses prerendering and includes parameters, but 'getPrerenderParams' ` +
+                    `is missing. Please define 'getPrerenderParams' function for this route in your server routing configuration ` +
                     `or specify a different 'renderMode'.`,
             };
             return;
@@ -672,7 +676,7 @@ async function* handleSSGRoute(metadata, parentInjector, invokeGetPrerenderParam
                     const parameterName = match.slice(1);
                     const value = params[parameterName];
                     if (typeof value !== 'string') {
-                        throw new Error(`The 'getPrerenderParams' function defined for the '${currentRoutePath}' route ` +
+                        throw new Error(`The 'getPrerenderParams' function defined for the '${stripLeadingSlash(currentRoutePath)}' route ` +
                             `returned a non-string value for parameter '${parameterName}'. ` +
                             `Please make sure the 'getPrerenderParams' function returns values for all parameters ` +
                             'specified in this route.');
@@ -816,14 +820,34 @@ async function getRoutesFromAngularRouterConfig(bootstrap, document, url, invoke
                 invokeGetPrerenderParams,
                 includePrerenderFallbackRoutes,
             });
+            let seenAppShellRoute;
             for await (const result of traverseRoutes) {
                 if ('error' in result) {
                     errors.push(result.error);
                 }
                 else {
+                    if (result.renderMode === RenderMode.AppShell) {
+                        if (seenAppShellRoute !== undefined) {
+                            errors.push(`Error: Both '${seenAppShellRoute}' and '${stripLeadingSlash(result.route)}' routes have ` +
+                                `their 'renderMode' set to 'AppShell'. AppShell renderMode should only be assigned to one route. ` +
+                                `Please review your route configurations to ensure that only one route is set to 'RenderMode.AppShell'.`);
+                        }
+                        seenAppShellRoute = stripLeadingSlash(result.route);
+                    }
                     routesResults.push(result);
                 }
             }
+            if (serverConfigRouteTree) {
+                for (const { route, presentInClientRouter } of serverConfigRouteTree.traverse()) {
+                    if (presentInClientRouter || route === '**') {
+                        // Skip if matched or it's the catch-all route.
+                        continue;
+                    }
+                    errors.push(`The '${route}' server route does not match any routes defined in the Angular ` +
+                        `routing configuration (typically provided as a part of the 'provideRouter' call). ` +
+                        'Please make sure that the mentioned server route is present in the Angular routing configuration.');
+                }
+            }
         }
         else {
             routesResults.push({ route: '', renderMode: RenderMode.Prerender });
@@ -1039,17 +1063,43 @@ class ServerRouter {
 
 /**
  * Injection token for the current request.
+ * @developerPreview
  */
 const REQUEST = new InjectionToken('REQUEST');
 /**
  * Injection token for the response initialization options.
+ * @developerPreview
  */
 const RESPONSE_INIT = new InjectionToken('RESPONSE_INIT');
 /**
  * Injection token for additional request context.
+ * @developerPreview
  */
 const REQUEST_CONTEXT = new InjectionToken('REQUEST_CONTEXT');
 
+/**
+ * Generates a SHA-256 hash of the provided string.
+ *
+ * @param data - The input string to be hashed.
+ * @returns A promise that resolves to the SHA-256 hash of the input,
+ * represented as a hexadecimal string.
+ */
+async function sha256(data) {
+    if (typeof crypto === 'undefined') {
+        // TODO(alanagius): remove once Node.js version 18 is no longer supported.
+        throw new Error(`The global 'crypto' module is unavailable. ` +
+            `If you are running on Node.js, please ensure you are using version 20 or later, ` +
+            `which includes built-in support for the Web Crypto module.`);
+    }
+    const encodedData = new TextEncoder().encode(data);
+    const hashBuffer = await crypto.subtle.digest('SHA-256', encodedData);
+    const hashParts = [];
+    for (const h of new Uint8Array(hashBuffer)) {
+        hashParts.push(h.toString(16).padStart(2, '0'));
+    }
+    return hashParts.join('');
+}
+
 /**
  * Pattern used to extract the media query set by Critters in an `onload` handler.
  */
@@ -1207,6 +1257,126 @@ class InlineCriticalCssProcessor extends CrittersBase {
     }
 }
 
+/**
+ * A Least Recently Used (LRU) cache implementation.
+ *
+ * This cache stores a fixed number of key-value pairs, and when the cache exceeds its capacity,
+ * the least recently accessed items are evicted.
+ *
+ * @template Key - The type of the cache keys.
+ * @template Value - The type of the cache values.
+ */
+class LRUCache {
+    /**
+     * Creates a new LRUCache instance.
+     * @param capacity The maximum number of items the cache can hold.
+     */
+    constructor(capacity) {
+        /**
+         * Internal storage for the cache, mapping keys to their associated nodes in the linked list.
+         */
+        this.cache = new Map();
+        this.capacity = capacity;
+    }
+    /**
+     * Gets the value associated with the given key.
+     * @param key The key to retrieve the value for.
+     * @returns The value associated with the key, or undefined if the key is not found.
+     */
+    get(key) {
+        const node = this.cache.get(key);
+        if (node) {
+            this.moveToHead(node);
+            return node.value;
+        }
+        return undefined;
+    }
+    /**
+     * Puts a key-value pair into the cache.
+     * If the key already exists, the value is updated.
+     * If the cache is full, the least recently used item is evicted.
+     * @param key The key to insert or update.
+     * @param value The value to associate with the key.
+     */
+    put(key, value) {
+        const cachedNode = this.cache.get(key);
+        if (cachedNode) {
+            // Update existing node
+            cachedNode.value = value;
+            this.moveToHead(cachedNode);
+            return;
+        }
+        // Create a new node
+        const newNode = { key, value, prev: undefined, next: undefined };
+        this.cache.set(key, newNode);
+        this.addToHead(newNode);
+        if (this.cache.size > this.capacity) {
+            // Evict the LRU item
+            const tail = this.removeTail();
+            if (tail) {
+                this.cache.delete(tail.key);
+            }
+        }
+    }
+    /**
+     * Adds a node to the head of the linked list.
+     * @param node The node to add.
+     */
+    addToHead(node) {
+        node.next = this.head;
+        node.prev = undefined;
+        if (this.head) {
+            this.head.prev = node;
+        }
+        this.head = node;
+        if (!this.tail) {
+            this.tail = node;
+        }
+    }
+    /**
+     * Removes a node from the linked list.
+     * @param node The node to remove.
+     */
+    removeNode(node) {
+        if (node.prev) {
+            node.prev.next = node.next;
+        }
+        else {
+            this.head = node.next;
+        }
+        if (node.next) {
+            node.next.prev = node.prev;
+        }
+        else {
+            this.tail = node.prev;
+        }
+    }
+    /**
+     * Moves a node to the head of the linked list.
+     * @param node The node to move.
+     */
+    moveToHead(node) {
+        this.removeNode(node);
+        this.addToHead(node);
+    }
+    /**
+     * Removes the tail node from the linked list.
+     * @returns The removed tail node, or undefined if the list is empty.
+     */
+    removeTail() {
+        const node = this.tail;
+        if (node) {
+            this.removeNode(node);
+        }
+        return node;
+    }
+}
+
+/**
+ * Maximum number of critical CSS entries the cache can store.
+ * This value determines the capacity of the LRU (Least Recently Used) cache, which stores critical CSS for pages.
+ */
+const MAX_INLINE_CSS_CACHE_ENTRIES = 50;
 /**
  * A mapping of `RenderMode` enum values to corresponding string representations.
  *
@@ -1245,6 +1415,14 @@ class AngularServerApp {
          * An instance of ServerAsset that handles server-side asset.
          */
         this.assets = new ServerAssets(this.manifest);
+        /**
+         * Cache for storing critical CSS for pages.
+         * Stores a maximum of MAX_INLINE_CSS_CACHE_ENTRIES entries.
+         *
+         * Uses an LRU (Least Recently Used) eviction policy, meaning that when the cache is full,
+         * the least recently accessed page's critical CSS will be removed to make space for new entries.
+         */
+        this.criticalCssLRUCache = new LRUCache(MAX_INLINE_CSS_CACHE_ENTRIES);
     }
     /**
      * Renders a response for the given HTTP request using the server application.
@@ -1326,38 +1504,62 @@ class AngularServerApp {
             // Initialize the response with status and headers if available.
             responseInit = {
                 status,
-                headers: headers ? new Headers(headers) : undefined,
+                headers: new Headers({
+                    'Content-Type': 'text/html;charset=UTF-8',
+                    ...headers,
+                }),
             };
-            if (renderMode === RenderMode.Client) {
+            if (renderMode === RenderMode.Server) {
+                // Configure platform providers for request and response only for SSR.
+                platformProviders.push({
+                    provide: REQUEST,
+                    useValue: request,
+                }, {
+                    provide: REQUEST_CONTEXT,
+                    useValue: requestContext,
+                }, {
+                    provide: RESPONSE_INIT,
+                    useValue: responseInit,
+                });
+            }
+            else if (renderMode === RenderMode.Client) {
                 // Serve the client-side rendered version if the route is configured for CSR.
                 return new Response(await this.assets.getServerAsset('index.csr.html'), responseInit);
             }
+        }
+        const { manifest: { bootstrap, inlineCriticalCss, locale }, hooks, assets, } = this;
+        if (locale !== undefined) {
             platformProviders.push({
-                provide: REQUEST,
-                useValue: request,
-            }, {
-                provide: REQUEST_CONTEXT,
-                useValue: requestContext,
-            }, {
-                provide: RESPONSE_INIT,
-                useValue: responseInit,
+                provide: LOCALE_ID,
+                useValue: locale,
             });
         }
-        const { manifest, hooks, assets } = this;
         let html = await assets.getIndexServerHtml();
         // Skip extra microtask if there are no pre hooks.
         if (hooks.has('html:transform:pre')) {
-            html = await hooks.run('html:transform:pre', { html });
+            html = await hooks.run('html:transform:pre', { html, url });
         }
-        this.boostrap ??= await manifest.bootstrap();
-        html = await renderAngular(html, this.boostrap, new URL(request.url), platformProviders, SERVER_CONTEXT_VALUE[renderMode]);
-        if (manifest.inlineCriticalCss) {
+        this.boostrap ??= await bootstrap();
+        html = await renderAngular(html, this.boostrap, url, platformProviders, SERVER_CONTEXT_VALUE[renderMode]);
+        if (inlineCriticalCss) {
             // Optionally inline critical CSS.
             this.inlineCriticalCssProcessor ??= new InlineCriticalCssProcessor((path) => {
                 const fileName = path.split('/').pop() ?? path;
                 return this.assets.getServerAsset(fileName);
             });
-            html = await this.inlineCriticalCssProcessor.process(html);
+            if (isSsrMode) {
+                // Only cache if we are running in SSR Mode.
+                const cacheKey = await sha256(html);
+                let htmlWithCriticalCss = this.criticalCssLRUCache.get(cacheKey);
+                if (htmlWithCriticalCss === undefined) {
+                    htmlWithCriticalCss = await this.inlineCriticalCssProcessor.process(html);
+                    this.criticalCssLRUCache.put(cacheKey, htmlWithCriticalCss);
+                }
+                html = htmlWithCriticalCss;
+            }
+            else {
+                html = await this.inlineCriticalCssProcessor.process(html);
+            }
         }
         return new Response(html, responseInit);
     }
@@ -1442,6 +1644,10 @@ class AngularAppEngine {
          * The manifest for the server application.
          */
         this.manifest = getAngularAppEngineManifest();
+        /**
+         * A cache that holds entry points, keyed by their potential locale string.
+         */
+        this.entryPointsCache = new Map();
     }
     /**
      * Hooks for extending or modifying the behavior of the server application.
@@ -1478,11 +1684,11 @@ class AngularAppEngine {
     async render(request, requestContext) {
         // Skip if the request looks like a file but not `/index.html`.
         const url = new URL(request.url);
-        const entryPoint = this.getEntryPointFromUrl(url);
+        const entryPoint = await this.getEntryPointExportsForUrl(url);
         if (!entryPoint) {
             return null;
         }
-        const { ɵgetOrCreateAngularServerApp: getOrCreateAngularServerApp } = await entryPoint();
+        const { ɵgetOrCreateAngularServerApp: getOrCreateAngularServerApp } = entryPoint;
         // Note: Using `instanceof` is not feasible here because `AngularServerApp` will
         // be located in separate bundles, making `instanceof` checks unreliable.
         // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion
@@ -1490,25 +1696,6 @@ class AngularAppEngine {
         serverApp.hooks = this.hooks;
         return serverApp.render(request, requestContext);
     }
-    /**
-     * Retrieves the entry point path and locale for the Angular server application based on the provided URL.
-     *
-     * This method determines the appropriate entry point and locale for rendering the application by examining the URL.
-     * If there is only one entry point available, it is returned regardless of the URL.
-     * Otherwise, the method extracts a potential locale identifier from the URL and looks up the corresponding entry point.
-     *
-     * @param url - The URL used to derive the locale and determine the appropriate entry point.
-     * @returns A function that returns a promise resolving to an object with the `EntryPointExports` type,
-     * or `undefined` if no matching entry point is found for the extracted locale.
-     */
-    getEntryPointFromUrl(url) {
-        const { entryPoints, basePath } = this.manifest;
-        if (entryPoints.size === 1) {
-            return entryPoints.values().next().value;
-        }
-        const potentialLocale = getPotentialLocaleIdFromUrl(url, basePath);
-        return entryPoints.get(potentialLocale);
-    }
     /**
      * Retrieves HTTP headers for a request associated with statically generated (SSG) pages,
      * based on the URL pathname.
@@ -1522,10 +1709,77 @@ class AngularAppEngine {
             return new Map();
         }
         const { pathname } = stripIndexHtmlFromURL(new URL(request.url));
-        const headers = this.manifest.staticPathsHeaders.get(pathname);
+        const headers = this.manifest.staticPathsHeaders.get(stripTrailingSlash(pathname));
         return new Map(headers);
     }
+    /**
+     * Retrieves the exports for a specific entry point, caching the result.
+     *
+     * @param potentialLocale - The locale string used to find the corresponding entry point.
+     * @returns A promise that resolves to the entry point exports or `undefined` if not found.
+     */
+    getEntryPointExports(potentialLocale) {
+        const cachedEntryPoint = this.entryPointsCache.get(potentialLocale);
+        if (cachedEntryPoint) {
+            return cachedEntryPoint;
+        }
+        const { entryPoints } = this.manifest;
+        const entryPoint = entryPoints.get(potentialLocale);
+        if (!entryPoint) {
+            return undefined;
+        }
+        const entryPointExports = entryPoint();
+        this.entryPointsCache.set(potentialLocale, entryPointExports);
+        return entryPointExports;
+    }
+    /**
+     * Retrieves the entry point for a given URL by determining the locale and mapping it to
+     * the appropriate application bundle.
+     *
+     * This method determines the appropriate entry point and locale for rendering the application by examining the URL.
+     * If there is only one entry point available, it is returned regardless of the URL.
+     * Otherwise, the method extracts a potential locale identifier from the URL and looks up the corresponding entry point.
+     *
+     * @param url - The URL of the request.
+     * @returns A promise that resolves to the entry point exports or `undefined` if not found.
+     */
+    getEntryPointExportsForUrl(url) {
+        const { entryPoints, basePath } = this.manifest;
+        if (entryPoints.size === 1) {
+            return this.getEntryPointExports('');
+        }
+        const potentialLocale = getPotentialLocaleIdFromUrl(url, basePath);
+        return this.getEntryPointExports(potentialLocale);
+    }
+}
+
+/**
+ * Annotates a request handler function with metadata, marking it as a special
+ * handler.
+ *
+ * @param handler - The request handler function to be annotated.
+ * @returns The same handler function passed in, with metadata attached.
+ *
+ * @example
+ * Example usage in a Hono application:
+ * ```ts
+ * const app = new Hono();
+ * export default createRequestHandler(app.fetch);
+ * ```
+ *
+ * @example
+ * Example usage in a H3 application:
+ * ```ts
+ * const app = createApp();
+ * const handler = toWebHandler(app);
+ * export default createRequestHandler(handler);
+ * ```
+ * @developerPreview
+ */
+function createRequestHandler(handler) {
+    handler['__ng_request_handler__'] = true;
+    return handler;
 }
 
-export { AngularAppEngine, provideServerRoutesConfig, InlineCriticalCssProcessor as ɵInlineCriticalCssProcessor, destroyAngularServerApp as ɵdestroyAngularServerApp, extractRoutesAndCreateRouteTree as ɵextractRoutesAndCreateRouteTree, getOrCreateAngularServerApp as ɵgetOrCreateAngularServerApp, getRoutesFromAngularRouterConfig as ɵgetRoutesFromAngularRouterConfig, setAngularAppEngineManifest as ɵsetAngularAppEngineManifest, setAngularAppManifest as ɵsetAngularAppManifest };
+export { AngularAppEngine, REQUEST, REQUEST_CONTEXT, RESPONSE_INIT, RenderMode, createRequestHandler, provideServerRoutesConfig, InlineCriticalCssProcessor as ɵInlineCriticalCssProcessor, destroyAngularServerApp as ɵdestroyAngularServerApp, extractRoutesAndCreateRouteTree as ɵextractRoutesAndCreateRouteTree, getOrCreateAngularServerApp as ɵgetOrCreateAngularServerApp, getRoutesFromAngularRouterConfig as ɵgetRoutesFromAngularRouterConfig, setAngularAppEngineManifest as ɵsetAngularAppEngineManifest, setAngularAppManifest as ɵsetAngularAppManifest };
 //# sourceMappingURL=ssr.mjs.map