Angular router loads previous component as well when routerLink to other component

Question

I have a sign-in page with a sign up button, which when clicked routes to /sign-up, My expected behavior is that the /sign-up displays only the sign-up component , but the pages is also loading the sign-up component and the sign-in component, shown in below images. sign-up page I do not want the signin component to be loaded as well. I tried around moving before, after inside components etc , however I get same result, how do I fix this? code below

app.component

<router-outlet></router-outlet>
<app-signin></app-signin>

app-routing.module

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { NewPostComponent } from './components/new-post/new-post.component'
import { SigninComponent } from './components/signin/signin.component'
import { SignupComponent } from './components/signup/signup.component'


const routes: Routes = [
  { path: 'sign-in', component: SigninComponent },
  { path: 'sign-up', component: SignupComponent },
  { path: 'new-post', component: NewPostComponent }
];

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

signin.component

<div class="container border signin">
  <div class="row">
    <div class="col">
      <img
        src="../../../assets/signin-img.jpg"
        alt="signin image"
        class="img-fluid"
      />
    </div>
    <div class="col form-group">
      <h1>Login</h1>
      <form>
        <div class="">
          <input type="text" placeholder="Email" class="form-control" />
          <br />
          <input type="password" placeholder="Password" class="form-control" />
          <br />
          <button type="submit" class="btn btn-primary">Submit</button>
          <button class="btn btn-primary" routerLink="/sign-up">Signup</button>
        </div>
      </form>
    </div>
  </div>
</div>

signup.component

<div class="container border">
<div class="row">
    <div class="col">
      <img src="../../../assets/signin-img.jpg" alt="signin image" class="img-fluid" />
    </div>
    <div class="col">
        <h1>Registration Info</h1>
      <form>
        <div class="">
          <input type="text" placeholder="Name" class="form-control">
          <br>
          <input type="date" placeholder="Birthday" class="form-control">
          <br>
          <select class="form-control">
            <option value="" disabled selected>Gender</option>
            <option value="male">Male</option>
            <option value="female">Female</option>
            <option value="trangender">Transgender</option>
            <option value="other">Other</option>
            <option value="noMention">Prefer not to mention</option>
          </select> 
          <br>
          <input type="email" placeholder="Email" class="form-control">
          <br>
          <label>Password</label>
          <br>
          <input type="password" placeholder="Confirm Password" class="form-control">
        </div>
      </form>
    </div>
  </div>
  </div>

Answer 1

More of Hack rather than a solution, it would be great for someone to figure this or explains what I'm doing wrong.

Added a redirect form base to sign-in

{ path: '', redirectTo: 'sign-in', pathMatch: 'full' },

app.component contains only this

<router-outlet></router-outlet>

This seems to work