From 20411f696eb52c500e096e3dfc5e195185794edc Mon Sep 17 00:00:00 2001 From: Alan Agius Date: Fri, 22 Nov 2024 10:18:58 +0000 Subject: [PATCH] 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`. --- packages/angular/ssr/src/routes/ng-routes.ts | 2 +- packages/angular/ssr/src/routes/route-tree.ts | 4 +++- .../angular/ssr/test/routes/route-tree_spec.ts | 18 +++++++++--------- 3 files changed, 13 insertions(+), 11 deletions(-) diff --git a/packages/angular/ssr/src/routes/ng-routes.ts b/packages/angular/ssr/src/routes/ng-routes.ts index c77c70ffa18f..bf74c60112a4 100644 --- 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 index 36bdabb027df..85b1279aaee5 100644 --- 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 = {}> 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 = {}> } 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 index 30a52c09f4de..fe8097a16c83 100644 --- 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, }); });