Problem z routingiem w Angularze

Cześć,
Potrzebuję pomocy, a więc piszę frontend w Angularze (TypeScript, Visual Studio Code), używam routingu i podczas wyświetlania aplikacji w przeglądarce wyświetla mi się pierwszy komponent, kiedy klikam w link, który ma uruchamiać drugi komponent to wyświetla się on na tej samej stronie razem z widokiem pierwszego komponentu. Co muszę zmienić lub dodać do mojej aplikacji? Będę wdzięczna za pomoc.
Poniżej wrzucam kod

Plik z modułem routingu

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { Routes, RouterModule } from '@angular/router';
import { LogowanieComponent } from '../logowanie/logowanie.component';

const routes: Routes =[
  {path: 'logowanie', component:LogowanieComponent} 
  
];
@NgModule({
  
  imports: [
    CommonModule,
    RouterModule.forRoot(routes)
  ],
  exports:[
    RouterModule
  ]
})
export class AppRoutingModule { }

Plik z modułem pierwszego komponentu:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule } from '@angular/router';


import { AppComponent } from './app.component';
import { LogowanieComponent } from './logowanie/logowanie.component';
import { AppRoutingModule } from './app-routing/app-routing.module';


@NgModule({
  declarations: [
    AppComponent,
    LogowanieComponent
    
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,

    
    
  ],
  providers: [],
  bootstrap: [AppComponent]
  

})
export class AppModule { }

I fragment pliku html:

   <div>
      <h4>Menu</h4>
      
<nav>
	<a routerLink="/logowanie" >Zaloguj się</a>
</nav>
<router-outlet></router-outlet>

  </div>

Twój AppComponent jest twoją "centralą". Stwórz sobie jeszcze jeden route np. HomeComponent i niech on będzie twoim "indexem" w aplikacji.

@AdamWox: Ok, utworzyłam dodatkowy komponent, gdzie musiałabym go wstawić, żeby to on był głównym?

const routes: Routes = [
  { path: 'login', component: LoginComponent },
  { path: 'home', component: HomeComponent },
  { path: '',   redirectTo: '/home', pathMatch: 'full' },
];

W routingu ustawiasz sobie, że twój Home jest jako główny i wtedy robiąc link do /login przejdzie na login.

@AdamWox: Zrobiłam tak jak napisałeś wyżej i nadal mam ten sam problem po kliknięciu w link nie otwiera mi zawartości komponentu na innej stronie, tylko wyświetla z na tej samej z pozostałym widokiem

<nav>
	<a routerLink="/logowanie" >Zaloguj się</a>
</nav>

To powinno być w HomeComponent

Jeśli Home jest dostępny dopiero po zalogowaniu to powinno się użyć czegoś takiego jak Guard w Routes.

AppComponent

  <router-outlet></router-outlet>

HomeComponent

   <div>
      <h4>Menu</h4>
      
<nav>
	<a routerLink="/logowanie" >Zaloguj się</a>
</nav>

  </div>

LoginComponent

<form>
<input name="email" type="email" placeholder="Email"/>
<input name="password" type="password" placeholder="Hasło"/>
</form>