refactor(@angular/ssr): replace :params with *

The SSR router relies on wildcard matching rather than params. This commit refactors the stored routes by removing the `:params`. (cherry picked from commit 20411f6)
angular · Nov 22, 2024 · 0eb5870 · 0eb5870
1 parent c8cd90e
commit 0eb5870
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 11 deletions.
diff --git a/packages/angular/ssr/src/routes/ng-routes.ts b/packages/angular/ssr/src/routes/ng-routes.ts
@@ -576,7 +576,7 @@ export async function extractRoutesAndCreateRouteTree(
     }
 
     const fullRoute = joinUrlParts(baseHref, route);
-    routeTree.insert(fullRoute.replace(URL_PARAMETER_REGEXP, '*'), metadata);
+    routeTree.insert(fullRoute, metadata);
   }
 
   return {

diff --git a/packages/angular/ssr/src/routes/route-tree.ts b/packages/angular/ssr/src/routes/route-tree.ts
@@ -131,6 +131,7 @@ export class RouteTree<AdditionalMetadata extends Record<string, unknown> = {}>
   insert(route: string, metadata: RouteTreeNodeMetadataWithoutRoute & AdditionalMetadata): void {
     let node = this.root;
     const segments = this.getPathSegments(route);
+    const normalizedSegments: string[] = [];
 
     for (const segment of segments) {
       // Replace parameterized segments (e.g., :id) with a wildcard (*) for matching
@@ -143,12 +144,13 @@ export class RouteTree<AdditionalMetadata extends Record<string, unknown> = {}>
       }
 
       node = childNode;
+      normalizedSegments.push(normalizedSegment);
     }
 
     // At the leaf node, store the full route and its associated metadata
     node.metadata = {
       ...metadata,
-      route: segments.join('/'),
+      route: normalizedSegments.join('/'),
     };
 
     node.insertionIndex = this.insertionIndexCounter++;

diff --git a/packages/angular/ssr/test/routes/route-tree_spec.ts b/packages/angular/ssr/test/routes/route-tree_spec.ts
@@ -30,7 +30,7 @@ describe('RouteTree', () => {
       expect(routeTreeObj).toEqual([
         { redirectTo: '/home-page', route: '/home', renderMode: RenderMode.Server },
         { redirectTo: '/about-page', route: '/about', renderMode: RenderMode.Server },
-        { route: '/products/:id', renderMode: RenderMode.Server },
+        { route: '/products/*', renderMode: RenderMode.Server },
         { redirectTo: '/api/details-page', route: '/api/details', renderMode: RenderMode.Server },
       ]);
 
@@ -46,7 +46,7 @@ describe('RouteTree', () => {
         renderMode: RenderMode.Server,
       });
       expect(newRouteTree.match('/products/123')).toEqual({
-        route: '/products/:id',
+        route: '/products/*',
         renderMode: RenderMode.Server,
       });
       expect(newRouteTree.match('/api/details')).toEqual({
@@ -71,7 +71,7 @@ describe('RouteTree', () => {
 
       expect(newRouteTree.match('/shop/categories/electronics/products/123')).toEqual({
         redirectTo: '/shop/products',
-        route: '/shop/categories/:category/products/:id',
+        route: '/shop/categories/*/products/*',
         renderMode: RenderMode.Server,
       });
       expect(newRouteTree.match('/shop/cart')).toEqual({
@@ -127,7 +127,7 @@ describe('RouteTree', () => {
       const routeTreeObj = routeTree.toObject();
       expect(routeTreeObj).toEqual([
         { route: '/first', renderMode: RenderMode.Server },
-        { route: '/:id', renderMode: RenderMode.Server },
+        { route: '/*', renderMode: RenderMode.Server },
         { route: '/second', renderMode: RenderMode.Server },
       ]);
 
@@ -137,11 +137,11 @@ describe('RouteTree', () => {
         renderMode: RenderMode.Server,
       });
       expect(newRouteTree.match('/second')).toEqual({
-        route: '/:id',
+        route: '/*',
         renderMode: RenderMode.Server,
       });
       expect(newRouteTree.match('/third')).toEqual({
-        route: '/:id',
+        route: '/*',
         renderMode: RenderMode.Server,
       });
     });
@@ -217,7 +217,7 @@ describe('RouteTree', () => {
     it('should handle parameterized segments as wildcards', () => {
       routeTree.insert('/users/:id', { renderMode: RenderMode.Server });
       expect(routeTree.match('/users/123')).toEqual({
-        route: '/users/:id',
+        route: '/users/*',
         renderMode: RenderMode.Server,
       });
     });
@@ -229,11 +229,11 @@ describe('RouteTree', () => {
       });
 
       expect(routeTree.match('/shop/categories/electronics')).toEqual({
-        route: '/shop/categories/:category',
+        route: '/shop/categories/*',
         renderMode: RenderMode.Server,
       });
       expect(routeTree.match('/shop/categories/electronics/products/456')).toEqual({
-        route: '/shop/categories/:category/products/:id',
+        route: '/shop/categories/*/products/*',
         renderMode: RenderMode.Server,
       });
     });