Angular маршрутизатор также загружает предыдущий компонент, когда routerLink к другому компоненту

Question

У меня есть страница входа с кнопкой регистрации, на которой при нажатии перенаправляется на / регистрация, я ожидаю, что в / sign-up будет отображаться только компонент регистрации, но страницы также загружаются компонент подписки и компонент входа, показанные на изображениях ниже. страница регистрации Я не хочу, чтобы компонент входа также загружался. Я пробовал передвигаться раньше, после внутренних компонентов и т.д. c, но я получаю тот же результат, как мне это исправить? код ниже

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

Больше взлома, чем решения, было бы неплохо, если бы кто-то понял это или объяснил, что я делаю неправильно.

Добавлена ​​база перенаправлений для входа в систему

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

app.component содержит только это

<router-outlet></router-outlet>

Это похоже на работу