title: Using 'useHash: true' breaks opening of Angular routes in new page
body: <p>I am trying to open an Angular route in a new tab and am having issues after adding {useHash: true} to the router. It worked fine before trying useHash, opened the tab, and brought me right to the component I wanted. Now it seems that regardless of what URL I use for opening the new tab, the router thinks I am trying to get to root (&quot;/&quot;).</p>
  <p>To reproduce, I have a very simple angular router:</p>
  <pre><code>import { NgModule } from '@angular/core';
  import { Routes, RouterModule } from '@angular/router';
  import { Page2Component } from './page2.component';
  import { Page1Component } from './page1.component';
  
  const routes: Routes = [
      { 
          path: 'page1', 
          component: Page1Component
      },
      {
          path: 'page2',
          component: Page2Component
      },
    { 
          path: '',
          component: Page1Component
      }
  ];
  
  @NgModule({
    imports: [RouterModule.forRoot(routes, {useHash: true})],
    exports: [RouterModule]
  })
  export class AppRoutingModule { }
  </code></pre>
  <p>This allows viewing of 2 simple components:</p>
  <p>/page1</p>
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { Router } from '@angular/router';
  
  @Component({
    selector: 'app-page1',
    template: `&lt;p&gt;page1 works!&lt;/p&gt;
               &lt;button (click)=&quot;openNewTab()&quot;&gt;OPEN NEW TAB&lt;/button&gt;`,
    styleUrls: ['./app.component.css']
  })
  export class Page1Component implements OnInit {
  
      constructor(private router:Router) { }
  
      ngOnInit(): void {
      }
  
      openNewTab():void {
          console.log('Opening new tab...');
          const url = this.router.serializeUrl(
              this.router.createUrlTree(['page2'])//, 
          );
          window.open(url);
      }
  }
  </code></pre>
  <p>/page2</p>
  <pre><code>import { Component, OnInit } from '@angular/core';
  
  @Component({
    selector: 'app-page2',
    template: `&lt;p&gt;page2 works!&lt;/p&gt;`,
    styleUrls: ['./app.component.css']
  })
  export class Page2Component implements OnInit {
  
    constructor() { }
  
    ngOnInit(): void {
    }
  
  }
  </code></pre>
  <p>Essentially, when you click the button located at some.url.com/#/page1, Angular should open a new tab showing some.url.com/#/page2. What actually happens, as I can clearly see, is it tries to open some.url.com/page2. Notice the lack of the /#. Now, if I set useHash to false, I can go from some.url.com/page1 to some.url.com/page2, no problem. I have tried manually adding the /# to the url I open in about 10 different ways, but regardless of what I try, the router sees the url for the new tab as / (root) as long as useHash is enabled.</p>
  <p><strong>What am I missing here?</strong></p>
  <p>I'll be completely honest that I don't have a great grasp on the inner workings of Angular HashLocationStrategy. Documentation and extensive research aren't helping. I know that I do need to use HashLocationStrategy due to the configuration of the server on which the actual app will eventually be hosted, so unfortunately I can't take the easy out and just set useHash to false. I also have to do this from inside the component, as I have extensive logic I need to execute before opening the new tab in my actual app, so no routerLink from in html either. I have a feeling that I am missing something simple and foundational here...</p>
  <p>Any help would be <strong>greatly</strong> appreciated.</p>
  <p>Working minimal Stackblitz replication: <a href="https://stackblitz.com/edit/angular-ivy-yedwyk" rel="nofollow noreferrer">https://stackblitz.com/edit/angular-ivy-yedwyk</a></p>