Component is rendering beneath the Home component

I have angular 19 website, in this website, I have used routerLink directive in my header component to navigate between the pages. Now when i am starting my development server and navigating first time to my about page using header navigation link (routerLink), the about page is loading beneath the home page, i dont know why... When i am reloading the page using chrome reload button, it is navigating to the about page correctly (not rendering the about page beneath the homepage). Also when i am using anchor tag, about page is loading correctly. Only when i am initially first time clicking on my about routerLink in my header its loading about beneath homepage.

This is my header.component.html:

<header class="app-header backdrop-blur-[6px] absolute w-full">
<div class="logo">
<a routerLink="/"><img src="/images/logo.png" alt=""></a>
</div>
<nav>
<ul>
<li><a routerLink="/" class="">Home</a></li>
<li><a routerLink="/about" class="">About Us</a></li>
</ul>
</nav>
<div>
<button type="button" class="primary_button">Get Started</button>
</div>
</header>


app.component.html:

<app-header></app-header>

<router-outlet></router-outlet>


header.component.ts:

import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';
import { RouterLink, RouterModule } from '@angular/router';

@Component({
selector: 'app-header',
standalone: true,
imports: [RouterModule, RouterLink, CommonModule],
templateUrl: './header.component.html',
styleUrl: './header.component.scss'
})
export class HeaderComponent {

}


this is my route.ts:

import { Routes } from '@angular/router';
import { HomeComponent } from './pages/home/home.component';
import { AboutComponent } from './pages/about/about.component';
import { NotFoundComponent } from './pages/not-found/not-found.component';

export const routes: Routes = [
{ path: '', component: HomeComponent },
{ path: 'about', component: AboutComponent },
{ path: '**', component: NotFoundComponent }
];


this is my home.component.html: (i have made difference sections inside home->components and then included them here in my home component)

<div class="home_comp">

<app-hero></app-hero>
<app-services></app-services>
<app-best-service></app-best-service>
<app-reach-service></app-reach-service>
<app-professional-catalogue></app-professional-catalogue>
<app-business></app-business>
<app-review></app-review>

</div>


home.component.ts:

import { Component } from '@angular/core';
import { RouterModule } from '@angular/router';
import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
import { faHeadset } from '@fortawesome/free-solid-svg-icons';
import { HeroComponent } from "./components/hero/hero.component";
import { ServicesComponent } from "./components/services/services.component";
import { BestServiceComponent } from "./components/best-service/best-service.component";
import { ReachServiceComponent } from "./components/reach-service/reach-service.component";
import { ProfessionalCatalogueComponent } from "./components/professional-catalogue/professional-catalogue.component";
import { BusinessComponent } from "./components/business/business.component";
import { ReviewComponent } from "./components/review/review.component";


@Component({
selector: 'app-home',
imports: [RouterModule, FontAwesomeModule, HeroComponent, ServicesComponent, BestServiceComponent, ReachServiceComponent, ProfessionalCatalogueComponent, BusinessComponent, ReviewComponent],
templateUrl: './home.component.html',
styleUrl: './home.component.scss'
})

export class HomeComponent {
faHeadset = faHeadset;
}


I have tried everything, like importing the routerLink in header.component.ts, router-outelet is also placed in the app.component.html file correctly...

Continue reading...