fix(@angular/ssr): handle baseHref that start with ./

alan-agius4 · alan-agius4 · commit 8bd2b260e200 · 2024-11-21T07:20:59.000Z
Updated function to support handling `baseHref` starting with './' path correctly. (cherry picked from commit 8c534da)
diff --git a/packages/angular/ssr/src/routes/ng-routes.ts b/packages/angular/ssr/src/routes/ng-routes.ts
@@ -421,12 +421,15 @@ export async function getRoutesFromAngularRouterConfig(
     const routesResults: RouteTreeNodeMetadata[] = [];
     const errors: string[] = [];
 
-    const baseHref =
+    let baseHref =
       injector.get(APP_BASE_HREF, null, { optional: true }) ??
       injector.get(PlatformLocation).getBaseHrefFromDOM();
 
-    const compiler = injector.get(Compiler);
+    if (baseHref.startsWith('./')) {
+      baseHref = baseHref.slice(2);
+    }
 
+    const compiler = injector.get(Compiler);
     const serverRoutesConfig = injector.get(SERVER_ROUTES_CONFIG, null, { optional: true });
     let serverConfigRouteTree: RouteTree<ServerConfigRouteTreeAdditionalMetadata> | undefined;
 
diff --git a/packages/angular/ssr/test/app-engine_spec.ts b/packages/angular/ssr/test/app-engine_spec.ts
@@ -42,7 +42,7 @@ describe('AngularAppEngine', () => {
               setAngularAppTestingManifest(
                 [{ path: 'home', component: HomeComponent }],
                 [{ path: '**', renderMode: RenderMode.Server }],
-                locale,
+                '/' + locale,
               );
 
               return {
diff --git a/packages/angular/ssr/test/routes/ng-routes_spec.ts b/packages/angular/ssr/test/routes/ng-routes_spec.ts
@@ -355,4 +355,24 @@ describe('extractRoutesAndCreateRouteTree', () => {
       { route: '/', renderMode: RenderMode.Server, status: 201 },
     ]);
   });
+
+  it(`handles a baseHref starting with a "./" path`, async () => {
+    setAngularAppTestingManifest(
+      [{ path: 'home', component: DummyComponent }],
+      [{ path: '**', renderMode: RenderMode.Server }],
+      /** baseHref*/ './example',
+    );
+
+    const { routeTree, errors } = await extractRoutesAndCreateRouteTree(
+      url,
+      /** manifest */ undefined,
+      /** invokeGetPrerenderParams */ true,
+      /** includePrerenderFallbackRoutes */ true,
+    );
+
+    expect(errors).toHaveSize(0);
+    expect(routeTree.toObject()).toEqual([
+      { route: '/example/home', renderMode: RenderMode.Server },
+    ]);
+  });
 });
diff --git a/packages/angular/ssr/test/testing-utils.ts b/packages/angular/ssr/test/testing-utils.ts
@@ -21,12 +21,12 @@ import { ServerRoute, provideServerRoutesConfig } from '../src/routes/route-conf
  *
  * @param routes - An array of route definitions to be used by the Angular Router.
  * @param serverRoutes - An array of ServerRoute definitions to be used for server-side rendering.
- * @param [baseHref=''] - An optional base href to be used in the HTML template.
+ * @param [baseHref='/'] - An optional base href to be used in the HTML template.
  */
 export function setAngularAppTestingManifest(
   routes: Routes,
   serverRoutes: ServerRoute[],
-  baseHref = '',
+  baseHref = '/',
   additionalServerAssets: Record<string, ServerAsset> = {},
 ): void {
   setAngularAppManifest({
@@ -40,7 +40,7 @@ export function setAngularAppTestingManifest(
           text: async () => `<html>
             <head>
               <title>SSR page</title>
-              <base href="/${baseHref}" />
+              <base href="${baseHref}" />
             </head>
             <body>
               <app-root></app-root>
@@ -55,7 +55,7 @@ export function setAngularAppTestingManifest(
             `<html>
             <head>
               <title>CSR page</title>
-              <base href="/${baseHref}" />
+              <base href="${baseHref}" />
             </head>
             <body>
               <app-root></app-root>
