A link to switch a page between router-outlet doesn't work well, it moves to a correct page but it lands in the middle of the page (somewhere under router-outlet) instead of header where I've set focus.

• RouterLink works between outside of router-outlet(navigation) and router-outlet.
• If I remove fragment/focusDirective, it lands on top on the page, but I need to have fragment in order for screen reader to read up the header.
• Header becomes focused (tested with NerdeFocus chrome extension) when the page has been rendered, so focus function seems working
• I tried to add scrollIntoView function in app component, but it didn't help
• I'm using Angular11

app.ts

<nav class="col-lg-3">
....
</nav>

<div class="col-lg-9">
   <router-outlet></router-outlet>
</div>

app-routing.module.ts

const routes: Routes = [
  {
    path: 'a',
    component: AComponent,
  },
  {
    path: 'b',
    component: BComponent,
  },
];

@NgModule({
  imports: [
    RouterModule.forRoot(routes, {
    useHash: true,
    relativeLinkResolution: 'legacy'
}),
  exports: [RouterModule]
})
export class AppRoutingModule { }

Component A html

<a (click)="onEditMode($event)">Edit</a>

Component A ts

onEditMode(event) {
  event.preventDefault();
  this.router.navigateByUrl('componentB#header');
}

Component B html

<h1 id="header" tabindex="-1" appFocusFragment>Header</h1>

focusFragment

@Directive({
  selector: '[appFocusFragment]'
})

export class FocusFragmentDirective implements AfterViewInit{
  constructor(private route: ActivatedRoute) { }

  ngAfterViewInit() {
    this.route.fragment.subscribe(fragment => {
      const anchor = document.querySelector<HTMLAnchorElement>(`#${fragment}`);
      if (fragment && anchor) {
        anchor.scrollIntoView();
        anchor.focus();
      }
    });
  }
}

Sorry about my bad explanation and English, please kindly let me know if more information is needed.

Thank you!