fix(router): handle parenthesized outlets without a name in DefaultUrlSerializer (#64507)

atscott · crisbeto · commit bfa53cdd3f35 · 2025-10-23T12:33:58.000+02:00
Previously, the `DefaultUrlSerializer` would incorrectly parse URLs with a parenthesized outlet that did not have a name, such as `/(left)`. This would result in an `undefined` outlet name in the serialized URL. This commit fixes the issue by ensuring that parenthesized outlets without a name are treated as primary outlets. fixes #58516. Based on the description, either the URL was constructed manually or by custom serializer. PR Close #64507
diff --git a/packages/router/src/url_tree.ts b/packages/router/src/url_tree.ts
@@ -717,7 +717,7 @@ class UrlParser {
         );
       }
 
-      let outletName: string = undefined!;
+      let outletName: string | undefined;
       if (path.indexOf(':') > -1) {
         outletName = path.slice(0, path.indexOf(':'));
         this.capture(outletName);
@@ -727,7 +727,7 @@ class UrlParser {
       }
 
       const children = this.parseChildren();
-      segments[outletName] =
+      segments[outletName ?? PRIMARY_OUTLET] =
         Object.keys(children).length === 1 && children[PRIMARY_OUTLET]
           ? children[PRIMARY_OUTLET]
           : new UrlSegmentGroup([], children);
diff --git a/packages/router/test/url_tree.spec.ts b/packages/router/test/url_tree.spec.ts
@@ -40,6 +40,23 @@ describe('UrlTree', () => {
       const p = router.parseUrl(serialized);
       expect(router.serializeUrl(p)).toBe(serialized);
     });
+
+    it('should work with named outlet with primary and immediate named siblings', () => {
+      const router = TestBed.inject(Router);
+      const tree = router.createUrlTree([
+        {
+          outlets: {
+            primary: ['Home'],
+            app: ['Welcome'],
+            dock: [{outlets: {primary: 'left', 1: ['One', {pinned: true}]}}],
+          },
+        },
+      ]);
+      const url = tree.toString();
+      expect(url).toBe('/Home(app:Welcome//dock:/(left//1:One;pinned=true))');
+      const tree2 = serializer.parse(url);
+      expect(serializer.serialize(tree2)).toBe(url);
+    });
   });
 
   describe('containsTree', () => {
