@@ -332,45 +332,64 @@ export class AngularServerApp {
332332 return createRedirectResponse ( result . redirectTo , status ) ;
333333 }
334334
335- const { inlineCriticalCssProcessor, criticalCssLRUCache, textDecoder } = this ;
335+ if ( renderMode === RenderMode . Prerender ) {
336+ const renderedHtml = await result . content ( ) ;
337+ const finalHtml = await this . inlineCriticalCss ( renderedHtml , url ) ;
338+
339+ return new Response ( finalHtml , responseInit ) ;
340+ }
336341
337342 // Use a stream to send the response before finishing rendering and inling critical CSS, improving performance via header flushing.
338343 const stream = new ReadableStream ( {
339- async start ( controller ) {
344+ start : async ( controller ) => {
340345 const renderedHtml = await result . content ( ) ;
341-
342- if ( ! inlineCriticalCssProcessor ) {
343- controller . enqueue ( textDecoder . encode ( renderedHtml ) ) ;
344- controller . close ( ) ;
345-
346- return ;
347- }
348-
349- let htmlWithCriticalCss ;
350- try {
351- if ( renderMode === RenderMode . Server ) {
352- const cacheKey = await sha256 ( renderedHtml ) ;
353- htmlWithCriticalCss = criticalCssLRUCache . get ( cacheKey ) ;
354- if ( ! htmlWithCriticalCss ) {
355- htmlWithCriticalCss = await inlineCriticalCssProcessor . process ( renderedHtml ) ;
356- criticalCssLRUCache . put ( cacheKey , htmlWithCriticalCss ) ;
357- }
358- } else {
359- htmlWithCriticalCss = await inlineCriticalCssProcessor . process ( renderedHtml ) ;
360- }
361- } catch ( error ) {
362- // eslint-disable-next-line no-console
363- console . error ( `An error occurred while inlining critical CSS for: ${ url } .` , error ) ;
364- }
365-
366- controller . enqueue ( textDecoder . encode ( htmlWithCriticalCss ?? renderedHtml ) ) ;
346+ const finalHtml = await this . inlineCriticalCss ( renderedHtml , url , true ) ;
347+ controller . enqueue ( this . textDecoder . encode ( finalHtml ) ) ;
367348 controller . close ( ) ;
368349 } ,
369350 } ) ;
370351
371352 return new Response ( stream , responseInit ) ;
372353 }
373354
355+ /**
356+ * Inlines critical CSS into the given HTML content.
357+ *
358+ * @param html - The HTML content to process.
359+ * @param url - The URL associated with the request, for logging purposes.
360+ * @param cache - A flag to indicate if the result should be cached.
361+ * @returns A promise that resolves to the HTML with inlined critical CSS.
362+ */
363+ private async inlineCriticalCss ( html : string , url : URL , cache = false ) : Promise < string > {
364+ const { inlineCriticalCssProcessor, criticalCssLRUCache } = this ;
365+
366+ if ( ! inlineCriticalCssProcessor ) {
367+ return html ;
368+ }
369+
370+ try {
371+ if ( ! cache ) {
372+ return await inlineCriticalCssProcessor . process ( html ) ;
373+ }
374+
375+ const cacheKey = await sha256 ( html ) ;
376+ const cachedHtml = criticalCssLRUCache . get ( cacheKey ) ;
377+ if ( cachedHtml ) {
378+ return cachedHtml ;
379+ }
380+
381+ const processedHtml = await inlineCriticalCssProcessor . process ( html ) ;
382+ criticalCssLRUCache . put ( cacheKey , processedHtml ) ;
383+
384+ return processedHtml ;
385+ } catch ( error ) {
386+ // eslint-disable-next-line no-console
387+ console . error ( `An error occurred while inlining critical CSS for: ${ url } .` , error ) ;
388+
389+ return html ;
390+ }
391+ }
392+
374393 /**
375394 * Constructs the asset path on the server based on the provided HTTP request.
376395 *
0 commit comments