Usar rotas filhas com o angular

Tenho duas páginas: home e login. No aapRoutes fiz:

export const ROUTES: Routes = [
    { path: '', component: HomeComponent, children: [
      { path: 'login', component: LoginComponent },
    ] }
  ];

E no html do home coloquei:

<router-outlet></router-outlet>

Mas o que ocorre é que a página de login aparece embaixo da página home, quando clico no botão de login. Queria que mudasse de página, que só aparecesse a pagina de login.

O que faço?