RouterLink fragments break app routing

I have a component called pgr-accordion where I'm trying to utilize anchor fragments to jump around the html of its parent component called power-gauge-report like so (both are included within power-gauge-report.module):

<accordion [closeOthers]="true">
  <accordion-group routerLink="." fragment="financials" #financials...>
  <accordion-group routerLink="." fragment="earnings" #earnings...>
  <accordion-group routerLink="." fragment="technicals" #technicals...>
  <accordion-group routerLink="." fragment="experts" #experts...>
</accordion>

url: /power-gauge-report/A#financials

This works, but the problem I have is that when I click on these routerLinks to jump to a fragment, all my header components (one of which is outside of the router-outlet and one secondary-header that is a child of power-gauge-report.component) disappears. I think this is a routing issue but I can't seem to understand what I'm doing wrong. Here are my routes (all on app root):

const routes: Routes = [
  {path: '', redirectTo: '/market-insights', pathMatch: 'full'},
  {path: 'login', component: LoginComponent},
  {path: 'market-insights', component: MarketInsightsComponent},
  {path: 'market-insights/:id', component: InsightDetailComponent},
  {path: 'power-gauge-report', component: PowerGaugeReportComponent},
  {path: 'power-gauge-report/:symbol', component: PowerGaugeReportComponent},
  {path: 'portfolio-health-check', component: PortfolioHealthCheckComponent},
  {path: 'glossary', component: GlossaryComponent},
  {path: 'market-insights/about/:name', component: AboutComponent},
  {path: '404', component: PageNotFoundComponent},
  {path: '**', redirectTo: '/404'}
];