Angular fragment router with route buttons does not render component

I am trying to use the fragment routes on angular18(standalone components) for the first time. Clicking on the route links changes the routes to the fragment route, eg "/#about" but the component does not render unless I go to the normal routes eg "/about".

I have the following set up:

routes.ts:

import { Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';
export const routes: Routes = [
{path: '', component: HomeComponent},
{path: 'about', component: AboutComponent},
// {path: '**', redirectTo: ''}
];


header.component.html(this has the fragment links):

<div id = "header">
<div id = "home_bttn">
<a routerLink = "/" fragment = "">Home</a>
</div>
<div id = "sections">
<a routerLink="/" fragment= "about" >About</a>
</div>
</div>


about.component.ts:

import { Component } from '@angular/core';

@Component({
selector: 'app-about',
standalone: true,
imports: [],
templateUrl: './about.component.html',
styleUrl: './about.component.scss'
})
export class AboutComponent {
}


about.component.html:

<div id = "about">About works</div>


styles.scss:

html, body {
height: 100%;
margin: 0;
overflow: hidden;
}

#main-container {
height: 100%;
overflow-y: scroll;
scroll-behavior: smooth;
background-color: orange;
}


app.container.html:

<div id="main-container">
<app-header></app-header>
<router-outlet></router-outlet>
</div>

Continue reading...