fixup! perf(@angular/ssr): pre-compile critical CSS plans at build time

Author: alan-agius4

packages/angular/build/src/utils/index-file/nonce.ts

@@ -42,7 +42,7 @@ export async function addNonce(html: string): Promise<string> {
 }
 
 /** Finds the Angular nonce in an HTML string. */
-async function findNonce(html: string): Promise<string | null> {
+export async function findNonce(html: string): Promise<string | null> {
   // Inexpensive check to avoid parsing the HTML when we're sure there's no nonce.
   if (!NONCE_ATTR_PATTERN.test(html)) {
     return null;

packages/angular/build/src/utils/server-rendering/manifest.ts

@@ -18,6 +18,7 @@ import {
   BuildOutputFileType,
   createOutputFile,
 } from '../../tools/esbuild/bundler-files';
+import { findNonce } from '../index-file/nonce';
 import { joinUrlParts } from '../url';
 
 export const SERVER_APP_MANIFEST_FILENAME = 'angular-app-manifest.mjs';
@@ -201,7 +202,7 @@ export async function generateAngularServerAppManifest(
 
   const indexHtml = additionalHtmlOutputFiles.get(INDEX_HTML_SERVER)?.text;
   if (indexHtml) {
-    nonce = findNonce(indexHtml);
+    nonce = (await findNonce(indexHtml)) ?? undefined;
   }
 
   // When routes have been extracted, mappings are no longer needed, as preloads will be included in the metadata.
@@ -263,12 +264,3 @@ function generateLazyLoadedFilesMappings(
 
   return entryPointToBundles;
 }
-
-/**
- * Finds the Angular nonce attribute value in an HTML string.
- */
-function findNonce(html: string): string | undefined {
-  const match = /<[a-zA-Z0-9-]+[^>]*?\sngcspnonce=(?:"([^"]*)"|'([^']*)'|(\S+))/i.exec(html);
-
-  return match ? (match[1] ?? match[2] ?? match[3]) : undefined;
-}

packages/angular/ssr/src/app.ts

@@ -369,20 +369,27 @@ export class AngularServerApp {
       return html;
     }
 
-    this.inlineCriticalCssProcessor ??= createProcessor([...criticalCssPlans], {
-      preload: 'media-script',
-      nonce,
-      preloadFonts: true,
-      inlineFonts: true,
-      noscriptFallback: true,
-      cache: true,
-      logger: {
-        // eslint-disable-next-line no-console
-        warn: console.warn,
-      },
-    }).process;
+    try {
+      this.inlineCriticalCssProcessor ??= createProcessor([...criticalCssPlans], {
+        preload: 'media-script',
+        nonce,
+        preloadFonts: true,
+        inlineFonts: true,
+        noscriptFallback: true,
+        cache: true,
+        logger: {
+          // eslint-disable-next-line no-console
+          warn: console.warn,
+        },
+      }).process;
 
-    return this.inlineCriticalCssProcessor(html);
+      return this.inlineCriticalCssProcessor(html);
+    } catch (error) {
+      // eslint-disable-next-line no-console
+      console.error('An error occurred while inlining critical CSS.', error);
+
+      return html;
+    }
   }
 
   /**