Angular osobna strona z logowaniem

Cześć, dopiero zaczynam zabawę z Angularem. Mam komponent o nazwie login oraz inne komponenty odpowiedzialne za wygląd i funkcjonowanie strony już po zalogowaniu. Jak powinienem zrobić aby wszystko odbywało się w obrębie Single Page Application, ale żeby na początku wyświetlała mi się tylko strona z logowaniem a po poprawnym zalogowaniu już inne komponenty. Na razie mam coś takiego (app.component.html):

<app-login></app-login>
<app-menu></app-menu>
<div class="container">
  <router-outlet></router-outlet>
</div>
<app-footer></app-footer>

i chciałbym aby początkowo było widocznie tylko app-login i pozostałe komponenty były ukryte a po poprawnym logowaniu aby zniknęło app-login i pozostałe komponenty stał się widoczne.

Znalazłem takie rozwiązanie: w app.component.html zostawiłem tylko <router-outlet></router-outlet>, następnie utworzyłem nowy komponent o nazwie home i w nim w pliku html wstawiłem :

<app-menu></app-menu>
<div class="container">
  <router-outlet></router-outlet>
</div>
<app-footer></app-footer>

w pliku app-routing.module.ts zmieniłem:

const routes: Routes = [
  { path: 'login', component: LoginComponent },
  { path: '', component: HomeComponent,
    children:[{ path: 'todos', component: ListTodosComponent },
    { path: 'logout', component: LogoutComponent},
    { path: 'todos/update/:id', component: UpdateTodoComponent},]}
];

Nie wiem czy to dobre rozwiązanie, ale działa. Ale pojawia się dodatkowe pytanie. Czy mogę jakoś pozbyć się strony home, jeśli nic na niej nie wyświetlam? Nie chcę żeby ktoś wchodził na endpoint http://localhost:4200/ ponieważ nic sie nie znajduje na tej stronie.Chciałbym żeby po zalogowaniu przekierowanie było od razu np. na stronę http://localhost:4200/todos z brakiem możliwości wejścia na http://localhost:4200/.