Angular Routes are used with proper folder structure but still some components are loading below the others

Question

I am trying to build a shopping application but I am facing an issue that although Angular Routes are used with proper folder structure but still some components is loading below the others. Below is my folder/components structure:

https://i.sstatic.net/SMc61.png

Inside app folder, I have MyComponents folder and inside it, I have 3 main components: homepage, login and register. Inside these 3 components, I have several other components in each.

app.component.html content is:

<app-homepage></app-homepage>
<router-outlet></router-outlet>

homepage.component.html content is:

<app-navbar></app-navbar>
<app-about-us></app-about-us>
<app-workitems></app-workitems>
<app-contact-us></app-contact-us>

In navbar component, I have all the links of components to be rendered. Navbar.component.html is:

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <a class="navbar-brand" href="#">Shopping Application</a>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav" style="font-weight: bolder;">
        <li class="nav-item mx-5">
          <a class="nav-link" routerLink="aboutUs">About the Owner</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" routerLink="contactUs">Contact Us</a>
        </li>
      </ul>
      <div class="container-inline my-2 my-lg-0" style="margin-left: auto;  margin-right: 1rem;">
        <a class="btn btn-primary mx-2 my-2 my-sm-0" routerLink="register" type="button">Sign Up</a>
        <a class="btn btn-success mx-2 my-2 my-sm-0" routerLink="login" type="button">Login</a>
      </div>
    </div>
  </nav>

And similarily in other components also. Homepage component is rendering fine in beginning but when I click on About us or contact us or login or register link, it renders there components but below the homepage component but I want these components to open from top(homepage component get removed and the new component shows up) which is not happening. Can someone help please?

Also below I have adding app-routing.module.ts file contents:

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { AboutUsComponent } from './MyComponents/homepage/about-us/about-us.component';
import { ContactUsComponent } from './MyComponents/homepage/contact-us/contact-us.component';
import { HomepageComponent } from './MyComponents/homepage/homepage.component';
import { NavbarComponent } from './MyComponents/homepage/navbar/navbar.component';
import { LoginComponent } from './MyComponents/login/login.component';
import { OrdersComponent } from './MyComponents/login/orders/orders.component';
import { ProfileComponent } from './MyComponents/login/profile/profile.component';
import { WorkitemsComponent } from './MyComponents/login/workitems/workitems.component';
import { RegisterComponent } from './MyComponents/register/register.component';

const routes: Routes = [
 {
   path:"homepage",
   component: HomepageComponent
 },
 {
   path:"login",
   component: LoginComponent
 },
 {
   path:"register",
   component: RegisterComponent
 },
 {
   path:"aboutUs",
   component: AboutUsComponent
 },
 {
   path:"contactUs",
   component: ContactUsComponent
 },
 {
   path:"navbar",
   component: NavbarComponent
 },
 {
   path:"cart",
   component: LoginComponent
 },
 {
   path:"orders",
   component: OrdersComponent
 },
 {
   path:"profile",
   component: ProfileComponent
 },
 {
   path:"workitems",
   component: WorkitemsComponent
 }
];

@NgModule({
 imports: [RouterModule.forRoot(routes)],
 exports: [RouterModule]
})
export class AppRoutingModule { }

Answer 1

I found the answer after exploring the code again and again. Actually the error was in app-routing.module.ts file. Here, I got to know that I have not configured any component when default url(http://localhost:4200) is used and also I had populated some components in app.component also which will get appended in top of every page. Now I have configured a path for default url in app-routing.module.ts file as:

{
   path:"",
   component: HomepageComponent
 }

And also I made app.component.html empty and it had only router outlet tag:

<router-outlet></router-outlet>

Now its working fine.