🐞 bug report

Affected Package

The issue is probably caused by package @angular/router

Is this a regression?

Yes, the previous version in which this bug was not present was: Angular 9 (9.1.12)

Description

In angular 9 if using router navigation like:
this.router.navigate(["parent", { outlets: { primary: "child" } }], {});

It will produce the following url: /parent/(child)
but in angular 10 this url will instead be: /parent/child

They will though have the same currentUrlTree structure in the angular router in both angular 9 and 10 if the navigation was made with the angular router.

But if the browser is reloaded or the url (with /parent/child) are pasted into another browser window the internal UrlTree of the angular router will have a different structure.

So in angular 10 the urlTree has one structure if using: this.router.navigate(["parent", { outlets: { primary: "child" } }], {});
but if reloading the browser from that specific url the initial created url tree will have a different structure. See the provided stackblitz console for more details.

Before reload:

After:

This issue then in its turn blocks the possibility to activate a named outlet for the router.

🔬 Minimal Reproduction

Example with Angular 9: https://stackblitz.com/edit/angular-sdc5rh?file=src/app/parent/parent.component.ts
Example with Angular 10: https://stackblitz.com/edit/angular-jqkm4x?file=src/app/parent/parent.component.ts

Check the different behavior between angular 9 and 10 by pressing:

1. Show parent
2. Show child by router navigate
3. Reload window
4. Show child-named-outlet

Step 4 only works in angular 9

Press the "Show Parent" to "reset the application" and test other combinations if needed.
Also check the console that logs the different UrlTree structures