routing navigate method not redirecting to targeted component

I have an issue with using routing navigate method of angular. I have two components : LoginComponent and HomeComponent. When I click on the button in "login.component.html", I want to be redirected to "home.component.html".

• 
  app.module.ts
  
  
  import { BrowserModule } from '@angular/platform-browser';
  import { NgModule } from '@angular/core';
  import { AppComponent } from './app.component';
  import { HomeComponent } from './home/home.component';
  import { LoginComponent } from './login/login.component';
  import { RouterModule, Routes } from '@angular/router';
  
  const routes: Routes = [
  {path: 'home', component: HomeComponent}
  ];
  
  @NgModule({
  declarations: [
  AppComponent,
  HomeComponent,
  LoginComponent
  ],
  imports: [
  BrowserModule, RouterModule.forRoot(routes)
  ],
  providers: [],
  bootstrap: [AppComponent]
  })
  export class AppModule { }
• 
  login.component.html
  

<button class="btn btn-primary" (click)="goHome();" class="clickable">Home</button>

• home.component.html

<p>
home works!
</p>

The URL changes but it remain in the same component page.

• 
  login.component.ts
  
  
  
  import { Component, OnInit } from '@angular/core';
  import { Router } from '@angular/router';
  
  @Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
  })
  export class LoginComponent implements OnInit {
  
  constructor(private router:Router) { }
  
  ngOnInit() {
  }
  
  goHome() {
  this.router.navigate(['home']);
  }
  }​

Continue reading...