fix(@angular/build): add a maximum rendering timeout for SSG

There might be cases were currently, the render application promise does not resolve because the application never becomes stable in most cases this is due to errors, this causes the worker to never exit and the build to keep running until it's manually terminated.

With this change, we add a maximum rendering timeout of 30seconds for each page.

Closes #27565

(cherry picked from commit 59b69f5)

Author: alan-agius4

packages/angular/build/src/utils/server-rendering/render-page.ts

@@ -73,26 +73,46 @@ export async function renderPage({
     },
   ];
 
-  let html: string | undefined;
   assert(
     bootstrapAppFnOrModule,
     'The file "./main.server.mjs" does not have a default export for an AppServerModule or a bootstrapping function.',
   );
 
+  let renderAppPromise: Promise<string>;
   if (isBootstrapFn(bootstrapAppFnOrModule)) {
-    html = await renderApplication(bootstrapAppFnOrModule, {
+    renderAppPromise = renderApplication(bootstrapAppFnOrModule, {
       document,
       url: route,
       platformProviders,
     });
   } else {
-    html = await renderModule(bootstrapAppFnOrModule, {
+    renderAppPromise = renderModule(bootstrapAppFnOrModule, {
       document,
       url: route,
       extraProviders: platformProviders,
     });
   }
 
+  // The below should really handled by the framework!!!.
+  // See: https://github.com/angular/angular/issues/51549
+  let timer: NodeJS.Timeout;
+  const renderingTimeout = new Promise<never>(
+    (_, reject) =>
+      (timer = setTimeout(
+        () =>
+          reject(
+            new Error(
+              `Page ${new URL(route, 'resolve://').pathname} did not render in 30 seconds.`,
+            ),
+          ),
+        30_000,
+      )),
+  );
+
+  const html = await Promise.race([renderAppPromise, renderingTimeout]).finally(() =>
+    clearTimeout(timer),
+  );
+
   if (inlineCriticalCss) {
     const { InlineCriticalCssProcessor } = await import(
       '../../utils/index-file/inline-critical-css'

packages/angular_devkit/build_angular/src/builders/app-shell/render-worker.ts

@@ -103,6 +103,7 @@ async function render({ serverBundlePath, document, url }: RenderRequest): Promi
   }
 
   // The below should really handled by the framework!!!.
+  // See: https://github.com/angular/angular/issues/51549
   let timer: NodeJS.Timeout;
   const renderingTimeout = new Promise<never>(
     (_, reject) =>