title: Navigate to a fragment of a **different** (not the same) page/component in Angular
body: <p>On click of a link, I would like to navigate to a fragment of a <strong>different</strong> page/component. I have not been able to achieve this even though trying multiple things:</p>
  <p>Link:</p>
  <pre><code>&lt;a routerLink=&quot;/main/dash&quot; fragment=&quot;dir&quot;&gt;View&lt;/a&gt;
  </code></pre>
  <p>The destination html/template:</p>
  <pre><code>&lt;!-- Other elements --&gt;
  
  &lt;app-dir id=&quot;dir&quot;&gt;&lt;/app-dir&gt;
  </code></pre>
  <p>Router configuration:</p>
  <pre><code>{
     path: 'main',
     component: LayoutComponent,
     children: [{
        path: 'dash',
           loadChildren: () =&gt; import('src/app/features/dash/dash.module').then(m =&gt; m.DashModule),
           canActivate: [AuthGuard]
     }]
  
     // Other code
  }
     
  // Other code
  
  imports: [RouterModule.forRoot(appRoutes, { useHash: true, anchorScrolling: 'enabled', onSameUrlNavigation: 'reload' })],
  </code></pre>
  <p>On click of the &quot;View&quot; link, the system navigates to the <code>/main/dash</code> path/page/component, but it does not scroll to the fragment in the first go. Once I am on the homepage, when I click on the same navigation link (View - which resides in header), it scrolls to the fragment.</p>
  <p>I.e. AnchorScrolling works when I am already on the same page/component, but not if the source is a different page/component.</p>
  <p>I also tried using <code>(click)</code> &amp; <code>this.router.navigate()</code> instead of using routerLink - but the result is same.</p>
  <p>I do use <code>HashLocationStrategy</code>.</p>
  <p>Any help would be appreciated.</p>
  <p>Thanks!</p>
  <p><strong>Update:</strong></p>
  <p>After digging even deeper, <a href="https://stackoverflow.com/questions/59916824/fragment-routing-after-page-load-angular">Fragment Routing after Page Load Angular</a> is the exact problem I am facing. It seems there is no solution available yet?: <a href="https://github.com/angular/angular/issues/30139" rel="nofollow noreferrer">https://github.com/angular/angular/issues/30139</a></p>