refactor(@angular/build): remove route extractor and use version from @angular/ssr

Removed the route extractor from `@angular/build` and replaced it with the one from `@angular/ssr` for consistency and improved maintenance.

Author: alan-agius4

packages/angular/build/BUILD.bazel

@@ -55,7 +55,7 @@ ts_library(
     module_name = "@angular/build",
     module_root = "src/index.d.ts",
     deps = [
-        "//packages/angular/build/src/utils/routes-extractor",
+        "//packages/angular/ssr",
         "//packages/angular_devkit/architect",
         "@npm//@ampproject/remapping",
         "@npm//@angular/common",

packages/angular/build/package.json

@@ -49,6 +49,7 @@
     "@angular/localize": "^18.0.0 || ^18.2.0-next.0",
     "@angular/platform-server": "^18.0.0 || ^18.2.0-next.0",
     "@angular/service-worker": "^18.0.0 || ^18.2.0-next.0",
+    "@angular/ssr": "^0.0.0-PLACEHOLDER",
     "less": "^4.2.0",
     "postcss": "^8.4.0",
     "tailwindcss": "^2.0.0 || ^3.0.0",
@@ -64,6 +65,9 @@
     "@angular/service-worker": {
       "optional": true
     },
+    "@angular/ssr": {
+      "optional": true
+    },
     "less": {
       "optional": true
     },

packages/angular/build/src/tools/esbuild/application-code-bundle.ts

@@ -9,8 +9,7 @@
 import type { BuildOptions, PartialMessage } from 'esbuild';
 import assert from 'node:assert';
 import { createHash } from 'node:crypto';
-import { readFile } from 'node:fs/promises';
-import { extname, join } from 'node:path';
+import { extname } from 'node:path';
 import type { NormalizedApplicationBuildOptions } from '../../builders/application/options';
 import { allowMangle } from '../../utils/environment-options';
 import { createCompilerPlugin } from './angular/compiler-plugin';
@@ -246,14 +245,7 @@ export function createServerCodeBundleOptions(
         }
 
         if (prerenderOptions?.discoverRoutes) {
-          // We do not import it directly so that node.js modules are resolved using the correct context.
-          const routesExtractorCode = await readFile(
-            join(__dirname, '../../utils/routes-extractor/extractor.js'),
-            'utf-8',
-          );
-
-          // Remove source map URL comments from the code if a sourcemap is present as this will not match the file.
-          contents.push(routesExtractorCode.replace(/^\/\/# sourceMappingURL=[^\r\n]*/gm, ''));
+          contents.push(`export { ɵgetRoutesFromAngularRouterConfig } from '@angular/ssr';`);
         }
 
         return {

packages/angular/build/src/utils/routes-extractor/BUILD.bazel

@@ -8,7 +8,7 @@
 
 import type { ApplicationRef, Type, ɵConsole } from '@angular/core';
 import type { renderApplication, renderModule, ɵSERVER_CONTEXT } from '@angular/platform-server';
-import type { extractRoutes } from '../routes-extractor/extractor';
+import type { ɵgetRoutesFromAngularRouterConfig } from '@angular/ssr';
 
 export interface MainServerBundleExports {
   /** Standalone application bootstrapping function. */
@@ -26,7 +26,7 @@ export interface RenderUtilsServerBundleExports {
   renderApplication: typeof renderApplication;
 
   /** Method to extract routes from the router config. */
-  extractRoutes: typeof extractRoutes;
+  ɵgetRoutesFromAngularRouterConfig: typeof ɵgetRoutesFromAngularRouterConfig;
 
   ɵresetCompiledComponents?: () => void;
 

packages/angular/build/src/utils/routes-extractor/extractor.ts

@@ -29,26 +29,27 @@ const { document, verbose } = workerData as RoutesExtractorWorkerData;
 
 /** Renders an application based on a provided options. */
 async function extractRoutes(): Promise<RoutersExtractorWorkerResult> {
-  const { extractRoutes } = await loadEsmModuleFromMemory('./render-utils.server.mjs');
+  const { ɵgetRoutesFromAngularRouterConfig: getRoutesFromAngularRouterConfig } =
+    await loadEsmModuleFromMemory('./render-utils.server.mjs');
   const { default: bootstrapAppFnOrModule } = await loadEsmModuleFromMemory('./main.server.mjs');
 
   const skippedRedirects: string[] = [];
   const skippedOthers: string[] = [];
   const routes: string[] = [];
 
-  for await (const { route, success, redirect } of extractRoutes(
+  const { routes: extractRoutes } = await getRoutesFromAngularRouterConfig(
     bootstrapAppFnOrModule,
     document,
-  )) {
-    if (success) {
-      routes.push(route);
-      continue;
-    }
+    new URL('http://localhost'),
+  );
 
-    if (redirect) {
+  for (const { route, redirectTo } of extractRoutes) {
+    if (redirectTo !== undefined) {
       skippedRedirects.push(route);
-    } else {
+    } else if (/[:*]/.test(route)) {
       skippedOthers.push(route);
+    } else {
+      routes.push(route);
     }
   }
 

packages/angular/build/src/utils/server-rendering/main-bundle-exports.ts

@@ -12,7 +12,4 @@ export {
   type CommonEngineOptions,
 } from './src/common-engine/common-engine';
 
-// TODO(alanagius): enable at a later stage
-// export { AngularAppEngine } from './src/app-engine';
-// export { AngularServerApp } from './src/app';
-// export { REQUEST, REQUEST_CONTEXT, RESPONSE_INIT } from './src/tokens';
+export { getRoutesFromAngularRouterConfig as ɵgetRoutesFromAngularRouterConfig } from './src/routes/ng-routes';

packages/angular/build/src/utils/server-rendering/routes-extractor-worker.ts

@@ -37,12 +37,24 @@ interface AngularRouterConfigResult {
   baseHref: string;
 
   /**
-   * An async iterator that yields `RouteResult` objects.
+   * An array of `RouteResult` objects representing the application's routes.
    *
-   * Each `RouteResult` represents a route and its associated information, such as the path
-   * and any potential redirection target.
+   * Each `RouteResult` contains details about a specific route, such as its path and any
+   * associated redirection targets. This array is asynchronously generated and
+   * provides information on how routes are structured and resolved.
+   *
+   * Example:
+   * ```typescript
+   * const result: AngularRouterConfigResult = {
+   *   baseHref: '/app/',
+   *   routes: [
+   *     { route: '/home', redirectTo: '/welcome' },
+   *     { route: '/about' },
+   *   ],
+   * };
+   * ```
    */
-  routes: AsyncIterableIterator<RouteResult>;
+  routes: RouteResult[];
 }
 
 /**
@@ -211,28 +223,34 @@ export async function getRoutesFromAngularRouterConfig(
 
     const injector = applicationRef.injector;
     const router = injector.get(Router);
+    const routesResults: RouteResult[] = [];
 
-    const baseHref =
-      injector.get(APP_BASE_HREF, null, { optional: true }) ??
-      injector.get(PlatformLocation).getBaseHrefFromDOM();
-
-    if (router.config.length === 0) {
-      // No routes found in the configuration.
-      return { baseHref, routes: (async function* () {})() };
-    } else {
+    if (router.config.length) {
       const compiler = injector.get(Compiler);
 
       // Retrieve all routes from the Angular router configuration.
-      return {
-        baseHref,
-        routes: traverseRoutesConfig({
-          routes: router.config,
-          compiler,
-          parentInjector: injector,
-          parentRoute: '',
-        }),
-      };
+      const traverseRoutes = traverseRoutesConfig({
+        routes: router.config,
+        compiler,
+        parentInjector: injector,
+        parentRoute: '',
+      });
+
+      for await (const result of traverseRoutes) {
+        routesResults.push(result);
+      }
+    } else {
+      routesResults.push({ route: '' });
     }
+
+    const baseHref =
+      injector.get(APP_BASE_HREF, null, { optional: true }) ??
+      injector.get(PlatformLocation).getBaseHrefFromDOM();
+
+    return {
+      baseHref,
+      routes: routesResults,
+    };
   } finally {
     platformRef.destroy();
   }

packages/angular/ssr/public_api.ts

@@ -65,7 +65,7 @@ export class ServerRouter {
           url,
         );
 
-        for await (let { route, redirectTo } of routes) {
+        for (let { route, redirectTo } of routes) {
           route = joinUrlParts(baseHref, route);
           redirectTo = redirectTo === undefined ? undefined : joinUrlParts(baseHref, redirectTo);
 

packages/angular/ssr/src/routes/ng-routes.ts

@@ -66,5 +66,5 @@ export function renderAngular(
  * @returns True if the value is an Angular module (i.e., it has the `ɵmod` property), false otherwise.
  */
 export function isNgModule(value: AngularBootstrap): value is Type<unknown> {
-  return typeof value === 'object' && 'ɵmod' in value;
+  return 'ɵmod' in value;
 }

packages/angular/ssr/src/routes/router.ts

@@ -123,6 +123,7 @@ ts_library(
     deps = [
         "//packages/angular/build",
         "//packages/angular/build:private",
+        "//packages/angular/ssr",
         "//packages/angular_devkit/architect",
         "//packages/angular_devkit/build_webpack",
         "//packages/angular_devkit/core",