fix(router): Apply named outlets to children empty paths not appearin…

…g in the URL (#51292)

Empty path routes are effectively 'passthrough' routes that do not
appear in the URL. When these exist in the route tree, we do not want to
apply named outlet commands to that tree location. Instead, we skip past
this location in the tree, effectively squashing/removing this
passthrough route from the tree.

fixes #50356

PR Close #51292

packages/router/src/create_url_tree.ts

@@ -338,10 +338,10 @@ function updateSegmentGroupChildren(
   } else {
     const outlets = getOutlets(commands);
     const children: {[key: string]: UrlSegmentGroup} = {};
-    // If the set of commands does not apply anything to the primary outlet and the child segment is
-    // an empty path primary segment on its own, we want to apply the commands to the empty child
-    // path rather than here. The outcome is that the empty primary child is effectively removed
-    // from the final output UrlTree. Imagine the following config:
+    // If the set of commands applies to anything other than the primary outlet and the child
+    // segment is an empty path primary segment on its own, we want to apply the commands to the
+    // empty child path rather than here. The outcome is that the empty primary child is effectively
+    // removed from the final output UrlTree. Imagine the following config:
     //
     // {path: '', children: [{path: '**', outlet: 'popup'}]}.
     //
@@ -359,8 +359,8 @@ function updateSegmentGroupChildren(
     // `UrlSegmentGroup` that is created from an "unsquashed"/expanded `ActivatedRoute` tree.
     // This code effectively "squashes" empty path primary routes when they have no siblings on
     // the same level of the tree.
-    if (!outlets[PRIMARY_OUTLET] && segmentGroup.children[PRIMARY_OUTLET] &&
-        segmentGroup.numberOfChildren === 1 &&
+    if (Object.keys(outlets).some(o => o !== PRIMARY_OUTLET) &&
+        segmentGroup.children[PRIMARY_OUTLET] && segmentGroup.numberOfChildren === 1 &&
         segmentGroup.children[PRIMARY_OUTLET].segments.length === 0) {
       const childrenOfEmptyChild =
           updateSegmentGroupChildren(segmentGroup.children[PRIMARY_OUTLET], startIndex, commands);

packages/router/test/create_url_tree.spec.ts

@@ -231,6 +231,39 @@ describe('createUrlTree', async () => {
              .toEqual('/case/(foo:foo)');
        });
 
+    it('can change both primary and named outlets under an empty path', async () => {
+      router.resetConfig([{
+        path: 'foo',
+        children: [
+          {
+            path: '',
+            component: class {},
+            children: [
+              {path: 'bar', component: class {}},
+              {path: 'baz', component: class {}, outlet: 'other'},
+            ],
+          },
+        ]
+      }]);
+
+      await router.navigateByUrl('/foo/(bar//other:baz)');
+      expect(router.url).toEqual('/foo/(bar//other:baz)');
+      expect(router
+                 .createUrlTree(
+                     [
+                       {
+                         outlets: {
+                           other: null,
+                           primary: ['bar'],
+                         },
+                       },
+                     ],
+                     // relative to the root '' route
+                     {relativeTo: router.routerState.root.firstChild})
+                 .toString())
+          .toEqual('/foo/bar');
+    });
+
     describe('absolute navigations', () => {
       it('with and pathless root', async () => {
         router.resetConfig([