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 headerponent.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>

appponent.html:

<app-header></app-header>

<router-outlet></router-outlet>

headerponent.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: './headerponent.html',
  styleUrl: './headerponent.scss'
})
export class HeaderComponent {

}

this is my route.ts:

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

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

this is my homeponent.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>

homeponent.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/heroponent";
import { ServicesComponent } from "./components/services/servicesponent";
import { BestServiceComponent } from "./components/best-service/best-serviceponent";
import { ReachServiceComponent } from "./components/reach-service/reach-serviceponent"; 
import { ProfessionalCatalogueComponent } from "./components/professional-catalogue/professional-catalogueponent";
import { BusinessComponent } from "./components/business/businessponent";
import { ReviewComponent } from "./components/review/reviewponent"; 


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

export class HomeComponent {
  faHeadset = faHeadset;
}

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

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 headerponent.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>

appponent.html:

<app-header></app-header>

<router-outlet></router-outlet>

headerponent.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: './headerponent.html',
  styleUrl: './headerponent.scss'
})
export class HeaderComponent {

}

this is my route.ts:

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

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

this is my homeponent.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>

homeponent.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/heroponent";
import { ServicesComponent } from "./components/services/servicesponent";
import { BestServiceComponent } from "./components/best-service/best-serviceponent";
import { ReachServiceComponent } from "./components/reach-service/reach-serviceponent"; 
import { ProfessionalCatalogueComponent } from "./components/professional-catalogue/professional-catalogueponent";
import { BusinessComponent } from "./components/business/businessponent";
import { ReviewComponent } from "./components/review/reviewponent"; 


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

export class HomeComponent {
  faHeadset = faHeadset;
}

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

• angular
• rendering
• routerlink
• angular-routerlink

• please share github repo with issue happening and the steps to reproduce – Naren Murali Commented Feb 10 at 17:07
• Unfortunately, i cannot share GitHub repo as i work for an anization, its their private project, and the repo is also private. – Chris Angel Commented Feb 11 at 11:25

1 Answer 1

Angular components don't inherit height so you have to set it in the styling.

either with: :host { display: block; } in each component styles property or add with the cli / set as default:

"@schematics/angular:component": {
      "displayBlock": true
   }