Angular 5 does not redirect to another component

I am trying to make that when clicking a button, the user is redirected to another component, however, they are mingling. My main component is Home, and I'm trying to redirect to the Game component. See:

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HomeComponent } from './home/home.component';
import { AppRoutingModule } from './app-routing.module';
import { GameComponent } from './game/game.component';

@NgModule({
  declarations: [
    HomeComponent,
    GameComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [AppRoutingModule],
  bootstrap: [HomeComponent]
})
export class AppModule { }

app.routing.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { GameComponent } from './game/game.component';


const routes: Routes = [
  { path: 'game', component: GameComponent }
];

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

home.component.ts

import { Router } from '@angular/router';
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.scss']
})
export class HomeComponent implements OnInit {

  constructor(private router: Router) { }

  ngOnInit() {
  }

  redirectGame(){
    this.router.navigate(['/game'])
  }

}

home.component.html

    <div class="container">
    <div class="col-md-12 text-center">
        <img class="logo-home img-fluid" alt="Star Wars the Game" title="Star Wars the Game" src="../../assets/img/logo_star_wars.jpg" />
    </div>
    <div class="col-md-12 text-center">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vitae dolor dui. Maecenas justo libero, sodales eu rhoncus eget, porttitor non nisl. In at nunc id dolor porta viverra sit amet at lorem. Nullam sit amet facilisis quam, non rutrum
            massa. Mauris iaculis arcu auctor, malesuada eros ut, scelerisque urna. </p>
        <h3>MAY THE FORCE!</h3>
    </div>
    <div class="col-md-12 text-center btn-iniciar">
        <button type="button" (click)="redirectGame()" class="btn btn-lg btn-dark">PLAY THE GAME!</button>
    </div>
</div>

<router-outlet></router-outlet> 

It calls the Game component when I click the button, however, they blend. I needed only to be shown the game.component

Any ideas?